JQuery

  jquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Ajax功能，强大的选择器功能，出色的DOM操作封装，出色的浏览器兼容性，可靠的事件处理机制，隐式迭代和链式编程操作，免费开源的库

jQuery方式监听页面的加载：

1.函数内部的代码页面加载(HTML)完毕之后执行

2.调用N次,会执行N次

3.jQ监听的代码可以简写

监听页面加载完成                                                                                                                                                                                      $（function（）{                                                                                                                                                                                             

}）                                                

jquery定义活动模板

$(function(){

})

jquery解决命名$冲突的问题

设置的时候一定要放在最上面$还没被定义变量之前  var xx = $.noConflict();

jquery的属性操作的样式 和css操作的样式                

1、css方法

语法：第一种：$("元素名称").css(' name') 获取第一个匹配元素的样式属性。

第二种：$("元素名称").css(' name'，'value') 设置样式属性

第三种：是以对象的形式写多种样式

  $("").css({     

        ' name'：'value'，

        'backgroundColor': '#ddd',

        'fontWeight': '',

    }) 

2、addClass方法

语法：$("p").addClass('属性名1 属性名2'); 给某个元素添加一个类名，可以是多个类名 

3、removeClass方法

 语法：语法：$("p").addClass('属性名1 属性名2'); 给某个元素删除一个类名，可以是多个类名

4、toggleClass方法

语法：$("元素名称").toggleClass(“class”)  如果存在类就删除，如果没有就添加一个类

5、hasClass方法

语法：$("元素名称").hasClass(“class”)  查询指定的标签中是否有指定的类，有返回true，没有则返回false；

6、获取内容和修改内容的方法 text()和html()

01.$("元素名称").text()  如果没有内容则获取到元素的内容，

    $("元素名称").text('value') 有内容则修改该元素的内容为value

02.$("元素名称").html() 如果没有内容则获取到该元素的内容，

    $("元素名称").html('value') 有内容则修改该元素的内容为value

区别：一：html()操作的是innerHtml属性节点的内容

                text() 操作的是innerText属性节点的内容

          二：html如果传递了参数表示设置标签的内容覆盖之前的内容,传递的是标签加内容会覆盖之前的标签和内容

                text传递参数是标签，则以文本形式展示

三：html方法没有传参,获取第一个标签的节点内容

                text方法没有传参,获取所有标签的文本内容拼接在一起返回

7、width() 方法和height()方法

语法：  $("元素名称").width() 如果不传值就是获取该元素的宽度，

            $("元素名称").width(20) 如果传值就是修改该元素的宽度，

            $("元素名称").height() 如果不传值就是获取该元素的高度，

            $("元素名称").height(20) 如果传值就是修改该元素的高度，

8、val()方法

语法：$("input元素名称").val(); 获取input元素的值

          $("input元素名称").val(value); 设置input元素的值为value    

9、offset()方法  

语法： $("元素名称").offset() 获取该元素相对于当前可视窗口的位置top和left值；返回一个对象{top：29，left：29}

方法：$("元素名称").offset().top ;    $("元素名称").offset().left  ;      

10、position()方法

语法：$("元素名称").position() 获取当前标签距离父标签的距离 top和left值；返回一个对象{top：29，left：29}

方法：$("元素名称").position().top ;    $("元素名称").position().left  ;    

11、scrollTop()方法 滚动条滚动距离

语法：$(window).scrollTop() 获取滚动条滚动的距离参数可选规定以像素计的新位置。一般不设置，设置100，就是会跑到100的位置,一般设置为0；点击回到顶部

$(window).scrollLeft() 参数可选规定以像素计的新位置。一般不设置

滚动条监听事件：$(window).on("scroll",fn)

点击回到顶部案例：

//滚动到一定距离按钮出现

$(window).on("scroll",function(){

vara=$(window).scrollTop();

console.log(a)

varb=$(".x1").offset().top

console.log(b)

if(a>b){

$(".x3").css('display',"block")

}else{

$(".x3").css('display',"none")

            }

        })

//这里是一个按钮，点击回到顶部

$(".xi").on("click",function(){

$(window).scrollTop(0)

        })

12、innerHeight()和innerWidth() 方法

这个方法是获取到元素的宽度和高度不包括边框或者可视区域屏幕的宽度和高度

语法：$(window).innerHeight() 获取可视区域的文档高度

          $(window).innerWidth() 获取可视区域的文档宽度

jquery的选择器

1、基本选择器

ID选择器：$("#myDiv") 匹配唯一的具有此id值的元素 

类选择器：$(".myClass") 匹配具有此类样式值的所有元素

标签选择器：$("div") 匹配指定标签名称的所有元素 

通配符选择器：$("*") 匹配所有元素 

并集选择器：$("div,span,p.myClass") 联合所有匹配的选择器 

交集选择器：$("p.myClass") 匹配到p标签里面的类名 不常用

2、层级选择器

后代选择器：$("form input") 后代选择器，选择ancestor的所有子孙节点 

子代选择器：$("#main > span")main下一级的的所有span子节点 

兄弟选择器：$("label + input") 兄弟相邻选择器，选择所有label相邻的第一个input节点 

兄弟选择器：$("#prev ~ div") 相邻后边的所有，选择prev的所有后面的div同胞节点

3、筛选选择器，也是过滤选择器

     $("li:first") 匹配第一个选择的li元素

     $("li:last") 匹配最后一个选择的li元素

     $("li:not(:first)")选择除了第一个标签之外的所有li标签

     $("li").eq(4)选择第5个li标签 索引0开始

     $("td:eq(2)") 匹配集合中指定位置的元素(从0开始)

     $("li:odd") 选择索引为奇数 索引0开始

     $("li:even") 选择索引为偶数的li标签 索引0开始

     $("li:lt(3)")  $("li:gt(3)")选择索引大于或者小于3的所有li标签

$(":animated") 获取正在执行动画效果的元素

4、属性过滤选择器 

$("div[属性]") 匹配所有具有指定属性的元素

$("input[name ='newsletter']") 匹配所有具有指定属性值的元素

$("input[name !='newsletter']") 匹配所有不具有指定属性值的元素

$("input[name ^='news']") 匹配所有指定属性值以news开头的元素

$("input[name $='letter']") 匹配所有指定属性值以letter结尾的元素

$("input[name *='man']") 匹配所有指定属性值含有man字符的元素

$("input[属性1 =“值”][name2 $= 'man']") 匹配同时符合多个选择器的所有元素

5、父子元素过滤器

$("ul li:nth-child(2)"), 匹配所有li标签的索引为2的li元素，索引0开始

$("ul li:nth-child(odd)"), 匹配所有li标签的奇数元素

$("ul li:nth-child(3n + 1)") 匹配所有li标签的第4,7,11元素

$("div span:first-child") 匹配所有span标签的第1个span元素

     $("div span:last-child") 匹配所有span标签的最后一个span元素

parent() 获取指定标签的父节点

parents() 获取指定标签的祖先节点 父节点以上都是 传参如果指定祖先哪个就是哪个

parentsUntil()  获取指定标签的祖先节点直到...为止（不包含自己）

children()    获取指定标签的所有子节点

siblings()    获取指定标签的兄弟节点 除了自己以外的所有兄弟

     $(当前元素).find(所有的后代元素)查找获得当前元素集合中每个元素的后代，必须参数

jquery的核心函数方法   

 1、$(this).index()方法 ：

        作用：获取索引，角标

2、get（）方法：和 eq()方法差不多 ，不过get方法返回的是DOM标签

作用:获取指定索引对应的标签返回

如果没有传递参数:获取页面中所有指定的标签存储在数组中返回

001 参数是正数

002 参数是负数 如果是-1,表示获取倒数第一个

3、eq（）方法

作用:获取指定索引对应的标签并且包装成jQuery对象返回

没有参数:返回一个空的jQ对象(不是this)

001 参数是正数

002 参数是负数 如果是-1,表示获取倒数第一个

4、data（）方法 和 removeData()方法 ：

作用：在元素上存取数据和删除数据

1.在一个div上存取数据

$("div").data("blah");  // undefined

$("div").data("blah", "hello");  // blah设置为hello

$("div").data("blah");  // hello

$("div").data("blah", 86);  // 设置为86

$("div").data("blah");  //  86

$("div").removeData("blah");  //移除blah

$("div").data("blah");  // undefined

2.在一个div上存取名/值对数据

$("div").data("test", { first: 16, last: "pizza!" });

$("div").data("test").first  //16;

$("div").data("test").last  //pizza!;

3.在HTML5规范中div中读取预存的data-[key]值

      $("div").data("test"); //this is test!;

jquery动画

动画队列 : 如果某个标签身上被添加了多个动画任务,那么这些任务会被按顺序添加到队列中等待执行

按照队列中任务的顺序一个接着一个的执行队列中的任务

1.显示和隐藏:显示show() ，隐藏hide() ，切换toggle()

        第一个参数:动画时间(速度)

        第二个参数:动画执行完毕之后的回调函数

        本质：显示和隐藏动画:控制标签的宽度和高度(透明度)来实现

2.展开和收起:展开slideDown() ，收起slideUp()， 切换slideToggle()

        第一个参数:动画时间(速度)

        第二个参数:动画执行完毕之后的回调函数

        本质：展开和收起动画:控制标签的高度

3.淡入淡出动画：淡入fadeIn（），淡出fadeOut（）， 切换fadeToggle(timer,callback)  

        第一个参数:动画时间(速度)

        第二个参数:动画执行完毕之后的回调函数

        淡入淡出到指定的值fadeTo （参数1，参数2，参数3）参数1为时间 ，参数2为透明度的值，参数3为回调函数

        本质:操作标签设置标签的透明度

4.自定义动画:animate 

        语法 jQ().animate(optionsObj,timer,callBack)

        第一参数为对象，键值类要做什么动画

        第二参数为时间

        第三参数为回调函数

5.stop():停止任务

第一个参数:控制队列中的任务(是否清空)  true|false

第二个参数:控制是否停止动画   true|false

没有参数: 停止当前的动画, 后面的任务继续执行

true true :立即完成当前的动画,后面的任务不再执行

true false:所有动画任务立刻停止

false false:停止当前的动画,后面的任务继续执行  默认的情况

false true :立即完成当前的动画,后面的任务继续执行

6.delay():延迟执行任务

jquery常见方法

jQ().addBack(); 把当前的jQ实例对象和上一个jQ实例对象合并成一个新的jQ实例对象 ，设置在标签后面

 jQ().end(); 返回上一个jQ实例对象

 jQ().add(); 在当前jQ实例对象的基础上再添加一个jQ对象成为一个新的jQ对象参数为需要设置的标签

 jQ.isArray(); 检查参数是否是数组

 jQ.isFunction(); 检查参数是否是函数 和jQ.isArray方法一样

 jQ.grep(); 过滤数组

第一个参数:要处理的数组对象

第二个参数:过滤函数 要传值

第三个参数:布尔类型的值,控制过滤翻转 默认是false

 jQ.makeArray(); 把类数组的结构转换为数组(伪数组-->数组)

 jQ.each(); 迭代(遍历)

 jQ.map(); 数组映射

         .is(selector) ：判断括号里面的标签或者函数，如果真，为true

 $(selector).next(expr)：获取$()紧邻的同级元素，expr筛选的条件有的话就指定，没有的话就是紧邻的元素

方式一：   $("p").next().css("background-color", "red")  ; 获取p标签后面的第一个元素

方式二：   $("p").next(“.class”).css("background-color", "red")  ; 获取p标签后面的有类名为class标签

 $(selector).nextAll(expr) ：获取$()所有后面的元素，expr为筛选条件，有指定就是指定，

.first() 匹配所有同种元素中的第一个： $("ul li").first().addClass('highlight');第一个li。

.last() 匹配所有同种元素中的最后一个： $("ul li").last().addClass('highlight');最后一个li。

.not() 从匹配元素集合中删除元素。

从包含所有段落的集合中删除 id 为 "selected" 的段落：$("p").not("#selected")

从不是偶数中的li设置为红色  $('li').not(':even').css('background-color', 'red');

遍历 each方法的语法:

[1] jQ.each(target,fn(key,value){//...this}) 遍历数组和对象 this指向value

[2] jQ().each(fn(key,value){//...this}) 遍历jQ实例对象 this指向value

作用:迭代(遍历)对象|数组|jQ实例对象(DOM节点)

each方法使用注意点

在回调函数中提供返回值,如果返回的是false,那么迭代就结束,循环终止.  return false;

回调函数中的this

each方法的回调函数中的this并非指向window,而是指向当前循环的value值(对象)

map方法的使用

jQ.map(arr,fn(index,ele))

遍历数组映射,并且对数组进行处理(过滤|放大|重组)返回新的数组

return ele *2;

 if(ele >3) return ele + "A";

jquery中的事件类型

1.鼠标的移入和移出事件

mouseenter|mouseleave 常用

mouseover|mouseout : 移动到子标签有影响

hover（参数1，参数2）方法:本质上对mouseenter|mouseleave方法封装

               第一个参数（回调函数）:鼠标移入事件

               第二个参数（回调函数）:鼠标移出事件

               只传递一个回调函数作为参数:不管是移入还是移出事件都会执行回调函数。就是移入和移出

2.绑定一个事件 3.0版本已经废弃

$("p").bind("click", function(){

alert( $(this).text() );

});

bind( type, data, fn ) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。可能的事件属性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

当元素获得焦点时，触发 focus 事件。data:focus(Data, fn) 可传入data供函数fn处理。

blur 当输入框失去焦点时使用

 常用在表单中，当输入以后放开时调用

focus( ) 元素获得焦点调用

change 当输入框发生变化时调用

 当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域

keydown() 鼠标按下事件

kyeup 鼠标抬起事件

ready事件，页面加载完成之后调用

mousemove() 鼠标移动事件

resize 窗口发生改变的事件

scroll() 滚动事件

submit 按钮点击表单事件

3.事件处理的两种方法

$("div").click(function(e){...})

e.type : 事件的类型

e.target: 事件作用的对象

jQ().on(事件类型,[obj],function(e){...}

e.data.[对象名]:   传递对象参数给回调函数的对象可以省略

$().data(k,value)获取在标签中的数据()里面也可以是保存数据的名称

注意点：给标签添加多个事件(可以是相同类型的),不会覆盖

4.事件冒泡: 子标签和父标签身上如果注册了相同类型的事件,那么子标签的事件被触发的时候,父标签的事件也会被触发,而且它是层               层向上触发的,我们称为事件冒泡.

5.如何阻止事件冒泡:

          [1] 在对应的标签返回return false;

jQ().on(事件类型,[obj],function(e){...}

          [2] 调用事件对象的e.stopPropagation();方法来阻止 ，e为回调函数参数

6.标签的默认行为

有一些标签它们本身有一些默认行为,比如说a标签，input标签，再给他们注册事件(click...),那么会触发多个操作

取消事件 off

jQ().off(type,function（){.....})

第一个参数:事件的类型type

第二个参数:过滤特定的事件fn

要取消按钮身上特定的某一个点击事件[把回调函数提取出来单独声明]

$("button").off("click"）;   //批量的取消按钮身上所有的点击事件

阻止标签的默认行为:事件对象e.preventDefault()

7.如何自动触发事件

调用方式jQ().trigger(type事件类型)

 ① 作用的对象:jQ实例对象中所有的标签

② 不会阻止事件冒泡

jQ().triggerHandler(type)

① 作用的对象:jQ实例对象中第一个标签

② 默认会阻止事件冒泡

③ 默认会阻止标签的默认行为(部分)

8.事件委托

优点 (1) 可以给尚不存在的标签添加事件

(2) 可以提高性能

$("父或者祖父标签").on(参数1，参数2，function(){...})

第一个参数:事件的类型

第二个参数:给要做事件的子标签注册事件(选择器)

第三个参数:事件发生后的回调函数

9.常用事件类型

blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area

     change( ) 用户改变域的内容 input, textarea, select 

     click( ) 鼠标点击某个对象 几乎所有元素 

     dblclick( ) 鼠标双击某个对象 几乎所有元素 

     error( ) 当加载文档或图像时发生某个错误 window, img 

     focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area

     keydown( ) 某个键盘的键被按下 几乎所有元素 

     keypress( ) 某个键盘的键被按下或按住 几乎所有元素 

     keyup( ) 某个键盘的键被松开 几乎所有元素 

     load( fn ) 某个页面或图像被完成加载 window, img 

     mousedown( fn ) 某个鼠标按键被按下 几乎所有元素 

     mousemove( fn ) 鼠标被移动 几乎所有元素 

     mouseout( fn ) 鼠标从某元素移开 几乎所有元素 

     mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素 

     mouseup( fn ) 某个鼠标按键被松开 几乎所有元素 

     resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame 

     scroll( fn ) 滚动文档的可视部分时 window 

     select( ) 文本被选定 document, input, textarea 

     submit( ) 提交按钮被点击 form 

     unload( fn ) 用户退出页面 window

jQueryDOM文档操作的常见方法

1.html() ==> innerHTML 没有参数表示获取,传递参数表示设置

2.text() ==> innerText

3.removeChild（）删除子元素

4.remove() 删除操作

把选中的指定标签删除掉(删除标签和内容和子标签)

5.removeAttr()方法

所有指定元素删除属性

6.$(selector).removeAttr(attribute)

attribute类型必需。规定从指定元素中移除的属性。

selector 指定要移除属性的标签

没有参数,那么返回实例对象本身

//removeProp == removeAttr

7.detach()方法

删除被选元素

$().detach()和remove（）不一样就是保留事件

8.empty() 清空操作

把选中的指定标签删除掉(删除内容和子标签)不会删除标签

9.clone() 克隆（复制）操作

把已经有的标签再复制一份 ，复制的是标签和里面的所有

注意点:默认情况下,克隆标签的时候,不会包含事件,如果需要连同事件一起复制,那么就传递参数true

10.replaceWith() 替换操作

用一个新的标签和内容来替换当前的标签

11.replaceAll（）替换

用指定的 HTML 内容或元素替换被选元素

参数：$(content).replaceAll(selector)  selector规定要替换的元素

12.after()把内容或者标签插入到标签的后面

 $(selector).after(content)

$(selector).after(function(index))

content必需。规定要插入的内容（可包含 HTML 标签）

selector选择器

13.before()把内容或者标签插入到标签的前面

$("span").before("");

$(selector).before(content)

content必需。规定要插入的内容（可包含 HTML 标签）

14.insertAfter() 把内容或者标签插入到标签的后面

$("").insertAfter("span")

$(content).insertAfter(selector)

content 选择器表达式，HTML 标记

selector必需。规定在何处插入被选元素。

15.insertBefore()把内容或者标签插入到标签的前面

$("").insertBefore("span")

$(content).insertAfter(selector)

content 选择器表达式，HTML 标记

selector必需。规定在何处插入被选元素

16.append()把内容或者标签插入到标签里面内容的后面

$("span").append("$('p')")

$(selector).append(content)

content必需。规定要插入的内容（可包含 HTML 标签）

和有to的区别

(1) 没有传递参数: 返回this

(2) 不支持选择器

（3）可以函数

17.appendTo()把所有的标签和内容插入到标签内容的后面

$(content).appendTo(selector)

content必需规定要插入的内容（可包含 HTML 标签）。

selector必需规定把内容追加到哪个元素上。

返回值:把插入的所有标签都保存到jQ实例对象中返回

18.prepend()

把所有的内容和标签插入到标签里面内容的前面

$("span").prepend("zs")

$(selector).prepend(content)

content必需规定要插入的内容（可包含 HTML 标签）。

和有to的区别

(1) 没有传递参数: 返回this

(2) 不支持选择器

（3）可以函数

19.prependTo()把所有的标签和内容插入到标签内容的前面

$(content).appendTo(selector)

content必需规定要插入的内容（可包含 HTML 标签）。

selector必需规定把内容追加到哪个元素上。

20.attr() 获取和设置指定元素的属性和值

$(selector).attr(attribute) 获取值

$(selector).attr(attribute,value) 设置

jQ().attr({key：value，key：value}) 设置多个属性

attribute 必选规定属性的名称。字符串

value 可选规定属性的值。选了就是设置 参数可以是对象 字符串

语法：jQ().attr(没有参数)   报错 | jQ().attr(key) | jQ().attr(obj) | jQ().attr(key,value)

批量的给标签添加属性

传一个参数是获取属性值，传两个参数是删除指定属性和值

21removeAttr（）

删除属性，传一个参数是删除属性，传两个参数是删除指定属性和值

prop方法

语法:jQ().prop() 操作的是DOM标签的属性

批量的给标签添加属性

22.removeProp 删除属性值

attr和prop的区别

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

23.prev()方法

 获得当前相同元素中前一个相同的元素

 $("p").prev(selector) 有值指定标签，获取p标签之前的指定的前一个标签

selector 指定的类名，id等

$("p").prev()，没值，获取当前p标签之前的前一个p标签

24.prevAll()

 获得当前相同元素中之前所有相同的元素

 $("p").prevA(selector) 有值指定标签，获取p标签之前的指定的所有标签

selector 指定的类名，id等

 $("p").prevAll()，没值，获取当前p标签之前的所有p标签

25val方法

语法：jQ().val()

如果没有传递参数,表示获取第一个input标签的value值

如果传递参数,表示批量的设置所有input标签的value值

val方法操作的是属性不是属性节点

26.unwrap()

删除被选元素的父元素。

$("p").unwrap(); 被选元素是p标签