美文网首页
JQuery视屏笔记

JQuery视屏笔记

作者: 墨色的白_615 | 来源:发表于2019-02-14 22:48 被阅读0次

    一、项目中引入JQuery

    1.首先,在工程中导入jquery的压缩包,并在.JSP或者.html页面的<head><script type="text/javascript" src="jquery压缩包所在路径"></script></head>标签中引入对应的jquery压缩包即可,引入jquery压缩包后,就可以在<head>标签后续中使用对应的JQuery对象了

    ​2.JQuery默认进入的方法为

    $(function(){

    具体的代码块

    ​​})​

    这个方法相当于window.onload()方法​

    3.JQuery对象和DOM对象之前的相互转换

    按照约定,页面定义的JQuery对象均以$美元符开头表示的。例如 var $btn=$("btn")​

    由于JQuery对象是一个数组对象,那么可以通过数组下标取值的方式将​JQuery对象转换成DOM对象,也可以通过对应的get()方法获取对应的DOM对象。例如:

    var btn=$("button")​[0] 

    var btn=$("button").get(0)​

    将DOM对象转换成​JQuery对象

    ​var btn=document.getElementById("btn")

    var $btn=$(btn)​

    二、JQuery选择器

    ​1、5个基本选择器

    id选择器、类选择器、标签选择器、* 所有元素选择器、(selector1​,selector2.......)多个选择器结果求并集

    2、4个层级选择器​

    两个元素之间以空格隔开,例如

    selector1 ​selector2 则表示当前selector1下的所有selector2后代元素

    selector1>​selector2 表示子元素

    ​selector1+​selector2 表示第一个元素的下一个相邻的同级元素

    selector1~selector​2 表示第一个元素的所有同级元素

    3、过滤选择器

    过滤选择器分为多种,基本过滤选择器、内容过滤选择器、​​可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单元素选择器、表单元素属性选择器

    1>、基本过滤选择器分为10种

    :first、:last、:not()、:even、:odd、:eq、:gt、:lt、:header(备注:这个选择器是需要特殊处理的选择器)、:animate

    2>​​​、内容过滤选择器分为四种

    :content()、:empty、:has()、:parent

    3>​​、可见性过滤选择器分为两种

    :hidden、:visible ​

    同时衍生出来的方法有方法的连缀用法​,了解show()方法,attr()方法,val()方法的用法

    4>、属性过滤选择器

    属性过滤选择器有7种,属性过滤选择器不以":"开头,它的七种选择器分别如下所示

    [属性值]​​    表示包含某个属性的元素

    [属性值='内容']​  表示某个属性等于内容值的元素

    ​[属性值!='内容']  同上,不等于

    ​[属性值^='内容']  属性值以内容开头的元素

    [属性$='内容']​    属性值以内容结尾的元素

    ​[属性*='内容']    属性值包含内容的元素

    [​属性值1][属性值2][属性值3]........元素满足属性值一,属性值二,属性值3等等

    5>、子元素过滤选择器​​

    子元素过滤选择器分为四种​

    :nth-​child(可以为索引,奇偶值,表达式等等)

    :​first-child 第一个子元素选择器

    :last-child  最后一个子元素选择器

    :only-child​​  只有一个子元素的选择器

    6>、表单元素选择器

    表单元素选择器共有11种,分别如下:

    :text

    :input

    :password

    :radio

    :checkbox

    :submit

    :imag

    :reset

    :button

    :file

    :hidden

    7>、表单元素属性选择器

    表单元素属性选择器总共有4种,分别为

    :disabled  选取可用的表单元素

    :enable    选取不可用的表单元素

    :checked    选取被选中的<Input>元素

    :selected  选取被选中的<option>元素

    三、JQuery中的方法

    1.查找结点

    1.find()方法

    通过find方法去查找某个元素,该方法的返回值为找到的元素的JQuery对象

    2.通过选择器找到对应的元素

    2.创建节点

    3.插入结点

    append():向对应元素的子节点最后一位插入一个新元素

    appendTo():同上,两者的区别在于主谓互换

    prepend():将对应元素插入为被插入元素的第一个子元素

    prependTo():

    insertAfter():同append()方法一样

    after():

    insertBefore():同prepend()方法一样

    before():

    4.删除、清空结点

    empty():

    remove():

    5.复制节点

    clone():克隆一个新节点,不会克隆对应的

    clone(true):深度克隆节点,并克隆它的相应的事件信息

    6.替换节点

    replaceWith():

    replaceAll():

    7.包裹节点

    wrap():

    wrapAll():

    wrapInner():

    8.操作样式

    JQuery中常用操作样式的方法有如下几种:

    atrr():设置元素属性

    addCss():为元素添加样式属性

    removeCss():为元素移出样式属性

    hasCss():判断元素是否有某种样式

    toggleCss():切换元素的样式

    opacity 透明度属性

    height():获取元素的高度

    width():获取元素的宽度

    offset():top、left属性

    9.window.onload和$(document).ready()的区别

    1>执行的时间点。window.onload必须等到页面所有的东西加载完毕才可以执行,$(document).ready()则只需要等到页面所有的元素结构加载完毕即可执行,外部引入页面则不需要管

    2>个数。前者只能有一个,当有多个时,后者会将前者覆盖,后者可以有多个,并且不会覆盖

    3>是否能简写。前者不可以简写,后者则可以简写为$(function(){})

    10.JQuery中常用的方法

    bind():为元素绑定对应的事件,该方法有两个参数,第一个参数为对应的事件类型,第二个参数为对应的事件的响应函数,例如:为元素div绑定点击事件。$("div").bind(function(){})

    is():判断某个对象是否存在某个选择器,若是存在,则返回值为true,若是不存在,则返回值为false,例如判断某个元素是否存在:hidden过滤选择器

    $("div").is(":hidden")

    hover(函数1,函数2):鼠标悬停方法

    当鼠标放在指定的元素上时,执行函数1,当鼠标移出时,执行函数2。

    mouseover():鼠标移入事件

    mouseout():鼠标移出事件

    toggle(函数1,函数2,函数3..........):当鼠标点击第一次时,执行函数1,当点击第二次时,执行函数2,点击第三次时,执行函数3等等等,等所有函数执行完毕后又从第一个函数开始往后执行

    pageX、pageY:这是是事件对象的两个属性,只有事件对象在当前页面x,y的位置

    unbind():解除事件的绑定

    one():为指定元素添加一次性事件绑定

    show():展示某个元素

    hide():隐藏某个元素

    slideDown():向下展示某个元素

    slideUp():向上隐藏某个元素

    slide两个方法是通过高度去隐藏元素的

    fadeIn():展示某个元素

    fadeOut():隐藏某个元素

    通过透明度去隐藏某个元素的

    toggle():可以切换元素的可见状态

    slideToggle(函数1,函数2):通过高度改变元素可见状态

    fadeTaggle(函数1,函数2):通过透明度改变元素的可见状态

    fadeTo():通过改变元素的透明度达到隐藏元素的状态

    相关文章

      网友评论

          本文标题:JQuery视屏笔记

          本文链接:https://www.haomeiwen.com/subject/imcueqtx.html