jQuery基础

jQuery 使我快乐

本文为慕课网学习总结内容大部分来源于：https://www.imooc.com/u/290139/courses?sort=publish

什么是jQuery？

jQuery是一个轻量级的JavaScript库极大地简化了 JavaScript 编程。

下面是我在学习jQuery的时候梳理的知识。

首先jQuery方法包装后的对象，是一个类数组对象它与DOM对象完全不同，唯一相似的是它们都能操作，而DOM对象就只是一个单独的DOM对象

1.jQuery样式

1.0 jQuery,DOM转换

jQuery对象转化为DOM对象

方法一：利用数组下标的方式读取到jQuery中的DOM对象，数组的索引是从0开始的，也就是第一个元素下标是0

方法二：通过jQuery自带的get()方法，jQuery对象自身提供一个.get()方法允许我们直接访问jQuery对象中相关的DOM节点

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
//var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

DOM对象转化为jQuery对象

方法：通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

1.0.1 ready()页面加载完毕

$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码

1.1jQuery选择器

id、class、tag都可以通过原生的方法获取到对应的节点，但是我们还需要考虑一个兼容性的问题，我这里顺便提及一下，比如:

1. IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的
2. getElementById的参数在IE8及较低的版本不区分大小写
3. IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A
4. IE8及较低的版本，浏览器不支持getElementsByClassName

1.1.0id选择器——$(“#id”)

jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取

<div id="box"></div>;
$("#box");

1.1.1class类选择器——$(“.class”)

jQuery使用JavaScript的原生getElementsByClassName()函数来实现

<div class="box"></div>;
$(".box");

1.1.2元素选择器——$(“element”)

搜索指定元素标签名的所有节点，返回的是一个集合。同样的也有原生方法getElementsByTagName()函数支持

var divs = document.getElementsByTagName('div');
$("div");//同上结果一样

1.1.3全选择器——$(“*”)

通配符选中所有DOM元素，没啥好解释的..全部都是被选召的孩子

$("*")

1.1.4层级选择器——$(“>, ,+,~,”)子代，后代，相邻兄弟，一般兄弟

$(“div > p”) 子选择器
匹配div直接的p子元素标签____**找儿子p**

$(“div p”) 后代选择器____**找儿子,孙子,曾孙,所有的后代p**

$(“div + p”) 相邻兄弟选择器____**同一个爹生的后面小一点的兄弟节点p**

$(“div ~ p”) 一般兄弟选择器____**同一个爹生的所有兄弟p**

==注：兄弟选择器所选择的范围都是要在同一个父元素下==

1.1.5基本筛选选择器$(“:first”)……

:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引

$("ul li:eq(3)")   列表中的第四个元素（index 从 0 开始）
$("ul li:gt(3)")   列出 index 大于 3 的元素
$("ul li:lt(3)")   列出 index 小于 3 的元素
$("input:not(:empty)") 所有不为空的 input 元素

gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

1.1.6内容选择器——$(“.contain(text)”)······

$(“:contains(text)”)

查找所有包含指定==文本==的元素

//查找所有class='div'中DOM元素中包含"我爱你"的元素节点;
$(".div:contains('我爱你')")

$(:has)

查找包含指定==选择器==的元素

//查找所有class='div'中DOM元素中的span元素节点;
$(".div:has(span)")
$(".div:has('span')") //都可以是一样的

1.1.7可性见筛选选择器——$(":visible");$(“:hidden”)

$(“:visible”) 选择显式的所有元素

只有元素占据文档中一定的空间，元素才会被认为是可见的
。宽高一定大于0……

$("#div:visible") //如果id=div的元素是可见的就会被选中，接着我们可以给他进一步操作如：slideUp()隐藏

$(“:hidden”) 选择隐藏的所有元素

:hidden选择器，不仅仅包含样式是display=”none”的元素，

$("#div:hidden") //如果id=div的元素是不可见的就会被选中，接着我们可以给他进一步操作如：slideDown()显式

我们有几种方式可以隐藏一个元素：

1. CSS display的值是none。
2. type=”hidden”的表单元素。
3. 宽度和高度都显式设置为0。
4. 一个祖先元素是隐藏的，该元素是不会在页面上显示
5. CSS visibility的值是hidden
6. CSS opacity的指是0

1.1.8属性筛选选择器——$(“[att?=’value’]”) ?=(!,~,*,!,^)

浏览器支持：

• [att=val]、[att]、[att|=val]、[att~=val] 属于CSS 2.1规范
• [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范
• [name!=”value”] 属于jQuery 扩展的选择器

==CSS选择器无论CSS2.1版本还是CSS3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下浏览器才不支持==

$("div[class]")//查找所有div中，有属性class的div元素
$("div[name="hidden"]")//查找所有div中，name属性为“hidden”的元素
//特别是在表单中的运用
$('input[type="text"]'),$('input[type="checkbox"]')等
$('[attr*="value"]')//能在网站中帮助我们匹配不同类型的文件

1.1.9子选择器——$(“:first-child”)……

$(".div p:first-child")//可以一类元素的第一个子元素  这里返回的一组元素
$(".div p:nth-child(2)") //索引为2，是第二个元素

==nth-child(n)和css里的一样索引是从1开始而非0==

1.1.10表单元素选择器——$(“:input”)……

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值；大部分表单类别筛选器可以使用==属性筛选器==替换。比如 $(':password') ==$(‘[type=password]’)

$(":input")//选择所有的input表单元素
$("input:checkbox")//选择所有的input中的checkbox元素

1.1.11对象属性筛选选择器——$(“:disabled”)是否被选中是否可用

注意：选择器适用于==复选框==和==单选框==

对于下拉框元素, 使用 :selected 选择器
在某些浏览器中，选择器:checked可能会错误选取到元素，所以保险起见换用选择器input:checked，确保只会选取元素

1.1.12this选择器——$(this)

通过$()将this转化为jQuery对象

this，表示当前的上下文对象是一个html对象，调用的是html对象的属性和方法。

$(this),代表的上下文对象是一个jquery的上下文对象，调用的是jquery对象的属性和方法。

$('p').click(function(){
    var $this= $(this);//把p元素转化成jQuery的对象
    $this.css('color','red')
})

1.2jQuery的属性与样式

1.2.1添加删除属性——.attr() .removeattr()

1. attr(属性名)：获取属性的值
2. attr(属性名, 属性值)：设置属性的值
3. attr(属性名,函数值)：设置属性的函数值

4. attr(JSON)：给指定元素设置多个属性值，即：{a:1,b:2}

   $(“input:first”).attr(‘value’,’万象天征’) //找到第一个input，通过attr设置属性value的值$(“input:first”).attr(‘value’,function(i, val){return i;})//function有俩参数
   ==???这里还不懂 i为什么传出来是个0==

.removeAttr(attributeName) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

$(".div").removerAttr("value");//移除class为div元素的value属性

1.2.2修改HTML——.html()和.text()

.html() 正对的是整个HTML的内容，不仅仅是文本内容。

1. .html()获取集合中==第一个==匹配元素的HTML内容
2. .html( htmlString )设置==每一个==匹配元素的html内容

3. .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

   //通过.text()的回调，获取原本的内容，修改，在重新赋值
   $(“div”).text(function(index,text){
   return “修改”+ text; //text为原来html内容
   //这里索引index为0
   })

1.2.3 .val()获取元素内容(value)

.val()方法

.val()//无参数，获取匹配的元素集合中第一个元素的当前值
.val( value )//设置匹配的元素集合中每个元素的值
.val( function ) //一个用来返回设置值的函数

• 通过.val()处理select元素， 当没有选择项被选中，它返回null
• .val()方法多用来设置表单的字段的值
• 如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

1.2.3.0.html(),.text()和.val()的差异

• .html()是用来读取元素的html内容（包括html标签）
• .text()用来读取元素的纯文本内容，包括其后代元素
• .val()是用来读取表单元素的”value”值。

使用在表单上
- .html()和.text()方法不能使用在表单元素上
- .val()只能使用在表单元素上

使用在多个元素上
- .html().val()方法使用在多个元素上时，只读取第一个元素的”value”；
- .text()方法使用在多个元素上时，将会读取所有选中元素的文本内容。

• .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
• .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

1.2.4 .addClass()增加样式

在HTML结构中里，当一个节点含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有==空格的字符串==，这就使得多class操作变得很麻烦。同样的jQuery开发者也考虑到这种情况，增加了一个.addClass()方法，用于动态增加class类名

.addClass(className)方法

方法一：直接添加addClass(className)

//直接添加
$("div").addClass("newClass")

方法二：.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

//找到所有的div，然后通过addClass设置颜色，根据返回的className的判断，
        $("div").addClass(function(index,className) {
             //找到类名中包含了imooc的元素
            if(-1 !== className.indexOf('imooc')){
                //this指向匹配元素集合中的当前元素
                $(this).addClass('newClass');
                console.log(index,className);
            }
        });

1.2.5 .removeClass() 属性样式删除

方法一：直接删除类名 removeClass(className)

//直接添加
$("div").addClass("newClass")

方法二：removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

 $('.div').removeClass(function(index,className){
            //className = div
            //把div的className赋给下一个兄弟元素div上作为它的class
            $(this).next().addClass(className)；
            //删除自己本身的myclass
            return 'myclass'；
        })

1.2.6 toggleClass()切换样式

通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass

方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类：==如果存在（不存在）就删除（添加）一个类==

.toggleClass(className)：匹配元素集合的每个元素上来切换的一个或多个（用空格隔开）的样式类名

//给所有的tr元素加一个class="c"的样式
$("#table tr").toggleClass("c");

.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除

//给所有的偶数tr元素切换class="c"的样式
//所有基数的样式保留，偶数的被删除
$("#table tr:odd").toggleClass("c");

.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
==ture：保留;false：删除==

//第二个参数判断样式类是否应该被添加或删除
//true，那么这个样式类将被添加;
//false，那么这个样式类将被移除
//所有的奇数tr元素，应该都保留class="c"样式
$("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的

.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

注意事项：

- toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加

• toggleClass会保留原有的Class名后新增，通过空格隔开

1.2.7 .css() 修改style属性

.css()方法：获取元素样式属性的计算值或者设置元素的CSS属性

获取

1. .css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的==计算值==

   $('p:eq(0)').text($(‘.div’).css(“background-color”) )
   //在第一个p标签上打印背景颜色

2. .css( propertyNames )：传递一组数组，返回一个对象结果

   var value = $(‘.div’).css([“width”,”height”]); //获取尺寸，传入CSS属性组成的一个数组 //{width: “60px”, height: “60px”} //因为获取的是一个对象，取到对应的值$(‘p:eq(2)’).text( ‘widht:’ + value.width + ’ height:’ +value.height)

设置

1. .css(propertyName, value )：设置CSS

   $(‘.div’).css(“background-color”,”red”);//支持两种写法$(‘.div’).css(“backgroundColor”,”yellow”)

2. css( propertyName, function )：传入回调函数，返回取到对应的值进行处理

   $(‘.div’).css(“width”,function(index,value){
   //value带单位，先分解
   value = parseInt(value);
   //返回一个新的值，在原有的值上，增加50px
   return value + 50 + “px”;
   })

   $(‘.div’).css(“width”,function(index,value){
   //value带单位，先分解
   value = value.split(‘px’);
   //返回一个新的值，在原有的值上，增加50px
   return (Number(value[0]) + 50) + value[1];
   })

   这里 return出来的值虽然是一个数字，但是jQuery会将其转化成一个字符串，并且添加px。

3.css( properties )：可以传一个对象，同时设置多个样式

$('.div').css({
        'font-size'        :"15px",
        "background-color" :"#40E0D0",
        "border"           :"1px solid red"
    })

==注意事项==：

• 浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
• .css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理
• 当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css(“width”,50}) 与 .css(“width”,”50px”})一样

1.2.7.1 .css()和.addClass()设置样式区别

.addClass()一般在静态的结构，确定了布局的规则的情况下使用，增加统一的类规则

.css():如果是动态的HTML结构，在不确定规则，或者经常变化的情况下多考虑使用

灵活性：

.css()可以很容易动态的去改变一个样式的属性，一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的

样式值：

.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。

样式的优先级：

==外部样式 < 内部样式 < 内联样式==

.addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候在附加到元素上

.css()方法处理的是内联样式，直接通过元素的style属性附加到元素上的

++所以.css设置样式要高于.addClass++

1.2.9 存储删除数据.data() .removeData()

jQuery提供的存储接口

jQuery.data( element, key, value )   //静态接口,存数据
jQuery.data( element, key )  //静态接口,取数据   
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据 

$('.left').click(function() {
    var ele = $(this);
    //通过$.data方式设置数据
    $.data(ele, "a", "data test")
    $.data(ele, "b", {
        name : "慕课网"
    })
    //通过$.data方式取出数据
    var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
    ele.find('span').append(reset)
})

jQuery提供的是删除接口

jQuery.removeData( element [, name ] )
.removeData( [name ] )

$('.right').click(function() {
    var ele = $(this);
    //通过.data方式设置数据
    ele.data("a", "data test")
    ele.data("b", {
        name: "慕课网"
    })
    //通过.data方式取出数据
    var reset = ele.data("a") + "</br>" + ele.data("b").name
    ele.find('span').append(reset)
})

2.jQuery DOM节点

2.1. 创建节点及其属性

2.1.1 创建节点 $(“

“)

原生JavaScript创建节点

创建流程比较简单，大体如下：

• 创建节点(常见的：元素、属性和文本)
• 添加节点的一些属性
• 加入到文档中

流程中涉及的一点方法：

• 创建元素：document.createElement
• 设置属性：setAttribute
• 添加文本：innerHTML
• 加入文档：appendChild

jQuery创建节点：

创建元素节点：

$("<div></div>")

创建文本节点：

$("<div>我是文本节点</div>")

创建为属性节点：

$("<div id='test' class='aaron'>我是文本节点</div>")

2.2 插入节点

2.2.1内部插入append(),appendTo()在元素之后

append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。

$(A).append(B)//把B插到A里面放在最后
$(A).appendTo(B)//于append相反，把A追加到B上，放在最后

2.2.2内部插入prepend(),prependTo()在元素之前

prepend()向每个匹配的元素内部前置内容

prependTo()把所有匹配的元素前置到另一个指定的元素集合中

$(A).prepend(B)//把B插到A里面放在最前
$(A).prependTo(B)//于append相反，把A追加到B上放在最最前

append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。

$(A).append(B)//把B插到A里面
$(A).appendtO(B)//于append相反，把A追加到B上

2.2.3 外部插入after(),before()

before：在选中的元素外部==之前==添加相邻的兄弟元素
after：在选中的元素外部==之后==添加相邻的兄弟元素

两个方法都支持==多个参数==传递after(div1,div2,….)

$("#bt1").on('click', function() {
    //在匹配test1元素集合中的每个元素前面插入p元素
    $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
})

2.2.4 外部插入insertAfter()与insertBefore()

和after(),before()的参数相反，是要插入的内容放在前面，

$("#bt1").on('click', function() {
    //在test1元素前后插入集合中每个匹配的元素
    //不支持多参数
    $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
})  

2.3 DOM节点删除

2.3.1 empty()删除节点

empty()清空节点:节点中的后代元素文本都会被移除,但是==保留本身元素==没有删除。

//通过empty移除了当前div元素下的所有元素
//但是本身id=test的div元素没有被删除
$("div").empty()

2.3.2 remove()删除节点

remove()删除节点:会将==元素自身移除==，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>慕课网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

remove表达式参数:emove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点

$("p").filter(":contains('3')").remove()

2.3.3 detach()保留数据删除

这个方法不会把匹配的元素从jQuery对象中删除，，所有绑定的事件、附加的数据等都会保留下来。

$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

$("#bt1").click(function() {
    if (!$("p").length) return; //去重
    //通过detach方法删除元素
    //只是页面不可见，但是这个节点还是保存在内存中
    //数据与事件都不会丢失
    p = $("p").detach()
});
$("#bt2").click(function() {
    //把p元素在添加到页面中
    //事件还是存在
    $("body").append(p);
});

==注:相当于回到了JS中没有append()之前的状态。漫游在清空的状态==

2.4 DOM节点复制和替换

2.4.1 clone()复制节点

.clone()： 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

.clone(true)：结构、事件与数据都克隆

HTML部分
<div></div>
JavaScript部分
$("div").on('click', function() {//执行操作})
//clone处理一
$("div").clone()   //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true)
//结构、事件与数据都克隆

2.4.2 replaceWith(),replaceAll()

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')
$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')

==replaceWith(),replaceAll()两者之间只有目标和目标源不一样==

2.4.3 wrap()包裹,unwrap()删除包裹

.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构

$('p').wrap('<div></div>')//元素外面增加一个包裹

.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

$('p').wrap(function() {
    return '<div></div>';   //与第一种类似，只是写法不一样
})

删除外部包裹的元素，保留自身(子元素)

$('p').unwrap();//找到p元素，然后调用unwrap方法，这样只会删除父辈div元素了

2.4.4 warpAll()一个包裹

.wrapAll( wrappingElement )：给集合中匹配的元素增加==一个==外面包裹HTML结构

感觉不太好用，如果里面还有没匹配到的其他元素，会有些不同

给所有p元素增加一个div包裹
$('p').wrapAll('<div></div>')//注意：只有一个

.wrapAll(function) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

$('p').wrapAll(function() {
return '<div><div/>'; 
})//以上的写法的结果如下，等同于warp的处理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

2.4.5 wrapInner()元素内部添加包裹

.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构

<div>p元素</div>
<div>p元素</div>
$('div').wrapInner('<p></p>')
//最后的结构，匹配的div元素的内部元素被p给包裹了
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容

$('div').wrapInner(function() {
return '<p></p>'; 
})//结果和上面一样

2.5 jQuery遍历

2.6.1 .children()遍历子元素

.children() 方法是返回匹配元素集合中每个元素的所有==子==元素 (第一级元素)

   $("div").children()

.children(selector)：支持选择器表达式

$('.div').children(':last')//最后一个子元素

2.6.2 find()查找

find():查找所有后代元素==>儿子，孙子，曾孙……

$("#div").find("li")//查找id=div中的所有li元素，返回一个集合

2.6.3 parent(),parents()

parent(): 查找合集里面的每一个元素的父元素, 因为是父元素，这个方法只会向上查找一级

.parents()无参数

$('.div').parents();//查找所有的父级元素
$(".div").parent().css("border","1px solid red")//所有的父级元素添加样式

.parents()有参数

$('.div').parents(".wrap");//查找类名为wrap的父级元素

注意：
1. .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找
2. $( "html" ).parent()方法返回一个包含document的集合，而$( “html” ).parents()返回一个空集合。

2.6.4 closest()

closest(): 接受一个匹配元素的选择器字符串
==从元素本身开始==，在DOM 树上逐级向上级元素匹配，并返回==最先匹配==的祖先元素(只返回一个或者0个);

  $("button:first").click(function() {
    $(".item-1")
        .closest("ul.level-2")
        .css("border","1px solid red")
})//以.tem-b元素开始向上查找，一直找到一个类名为level-2的ul标签，改变他的样式

.parents()和.closest()两者区别

• 起始位置:.closest开始于当前元素 .parents开始于父元素
• 遍历的目标：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
• 结果:.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

2.6.5 .next() prev()上,下一个兄弟元素siblings()同辈元素

.next 查找紧跟在元素后一个同辈元素的集合(jQuery是个集合对象)

$("li-1").next().css('border', '1px solid red')//所有li-1元素后面一个元素都改变css样式。

.nexr(:frist)传入一个选择器表达式

$("li-1").next(:last).css('border', '1px solid red')//(所有li-1元素后面一个元素)这个集合中最后一个元素改变样式。

2.6.6 add()添加(和)

.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。

$('li').css('background', 'red');//所有的li添加样式
$('li').add('p').css('background', 'red')//把所有的p加入到li的集合里一起改变样式

处理一：传递选择器

$('li').add('p')

处理二：传递dom元素

$('li').add(document.getElementsByTagName('p')[0])

还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了

 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

2.6.7 each()

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数

看一个简单的案例

<ul>
    <li>慕课网</li>
    <li>Aaron</li>
</ul>

开始迭代li，循环2次

$("li").each(function(index, element) {
     index 索引 0,1
     element是对应的li节点 li,li
     this 指向的是li
})

$("button:last").click(function() {
    //遍历所有的li
    //修改偶数li内的字体颜色
    $("li").each(function(index, element) {
        if (index % 2) {
            $(this).css('color','blue')
        }
    })
})

2.6.7 .has().is() 检测含有(是)

has():包含特定元素的后代的集合

$('li').has('ul').css('background-color', 'red');

is():检查当前匹配元素集合，如果存在至少一个匹配元素,返回ture

$('li').is('ul').css('background-color', 'red');

3.jQuery事件

3.1 鼠标事件

3.1.1 $ele.click(),$ele.dbclick()单击,双击

click监听用户单击操作

click事件其实是由==mousedown==与==mouseup== 2个动作构成，所以点击的动作只有在==松手后才触发==

方法一:不带参参数$ele.click()

<div id="test">点击触发<div>
$("ele").click(function(){
    alert(this); //this指向 "ele"
})
$("#test").click(function(){
     $("ele").click();  //手动指定触发事件 
});

方法二：$ele.click(handler(eventObject))

handler 回调函数的意思 eventObject 事件对象的意思

    $('p').click(function(e) {
        alert(e.target.textContent)
        }) //console.log(e);和JS一样返回event对象

方法三:$ele.click([eventData]handler(eventObject))向不同函数传递数据

<div id="test">点击触发<div>
$("#test").click("<div id="test">点击触发<div>",function(e) {
    //this指向 div元素
    //e.data  => <div id="test">点击触发<div> 传递数据
    this.innerHTML = e.data; 
});

可以传数据进去，最后放在了e.data 里面。之后就可以做一些奇奇怪怪的事情

dbclick监听用户双击操作

具体和上面类似 但是在同一元素上==同时绑定== click 和 dblclick 事件是不可取的

dblclick由2个click叠加而来，dblclick事件满足以下条件的情况下才能被触发

• 鼠标指针在元素里面时点击。
• 鼠标指针在元素里面时释放。
• 鼠标指针在元素里面时再次点击，点击间隔时间，是系统而定。
• 鼠标指针在元素里面时再次释放。

3.1.2 mousedown,mouseup鼠标按下抬起

没什么好说得方法和上面一样

mousedown事件触发需要以下几点：

• mousedown强调是按下触发
• 如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件
• ==任何鼠标按钮被按下==时都能触发mousedown事件
• 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

mouseup事件触发需要以下几点：

• mouseup强调是松手触发
• mouseup与mousedown组合起来就是click事件
• 如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这仍然是算作mouseup事件
• ==任何鼠标按钮松手==时都能触发mouseup事件
• 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

3.1.3 mousemove鼠标移动

没什么好说得方法和上面一样

mousemove事件触发需要以下几点：

• mousemove事件是当鼠标指针移动时触发的，即使是一个像素
• 如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题

3.1.4 mouseover与mouseout鼠标移入移出

没什么好说得方法和上面一样三种方法

3.1.5 mouseenter与mouseleave事件

没什么好说得方法和上面一样三种方法

mouseenter事件和mouseover的区别

==关键点就是：冒泡的方式处理问题==

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

小案例

3.1.6 hover事件进出元素

传递2个回调函数就可以了，不需要显示的绑定2个事件

$(selector).hover(handlerIn, handlerOut)

$("p").hover(
    function() {
        $(this).css("background", 'red');},
    function() {
        $(this).css("background", '#bbffaa');}
);

• handlerIn(eventObject)：鼠标指针进入元素时触发执行的事件函数
• handlerOut(eventObject)：鼠标指针离开元素时触发执行的事件函数

3.1.7 focusin 焦点 focusout 失去焦点

没什么好说得方法和上上上上面一样三种方法

<div id="test">点击触发<div>
$("#test").focusin(function() {
    //this指向 div元素
});……………………

3.2 表单事件

3.2.1 focus 焦点 blur 失去焦点

同样是失去焦点和焦点和==focusin focusout== 本质区别是
==是否支持冒泡处理==

<div class="div">
    点击触发焦点(无反应)：
    <input type="text" />
</div>
<div class="div1">
    点击触发焦点并冒泡：
    <input type="text" />
</div>
$(".div").focus(function() {
        $(this).css('border', '2px solid red')
    })//没有反应
    $(".div1").focusin(function() {
        $(this).find('input').val('冒泡捕获了focusin事件')
    })//有反应

==focus()在元素本身产生，focusin()在元素包含的元素中产生==

blur与focusout也亦是如此

3.2.2 change事件

<input class="value" type="text" value="1" />
<div id="result"></div>
$("input.value").change(function(e){
    $("#result").html(e.target.value);
})

input元素

监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

select元素

对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

textarea元素

多行文本输入框，当有改变时，失去焦点后触发change事件

3.2.3 select事件 默认选中

没什么好说得方法和上面一样

注意:==select事件只能用于元素与元素==
选中文字触发事件

3.2.4 表单submit事件

没什么好说得方法和上面一样

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个==默认行为==
传统的方式是调用事件对象e.preventDefault() 来处理

jQuery中可以直接在函数中最后结尾return false即可

//回车键或者点击提交表单
$('#target1').submit(function(e) {
    alert('捕获提交表达动作,不阻止页面跳转')
});
//回车键或者点击提交表单,禁止浏览器默认跳转：
$('#target2').submit(function() {
    alert('捕获提交表达动作,阻止页面跳转')
    return false;
});

3.3键盘事件

3.3.1 keydown与keyup 键盘按下 松开

没什么好说得方法和上面一样

//直接绑定事件
$(elem).keydown( handler(eventObject) )
//传递参数
$(elem).keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$(elem).keydown()

3.3.2 keypress

KeyPress主要用来接收字母、数字等ANSI字符

keypress事件与keydown和keyup的主要区别

• 只能捕获单个字符，不能捕获==组合键==(比方说打中文就不会捕捉)
• 无法响应系统功能键（如delete，backspace）==空格键啊删除键啊等==
• 不区分小键盘和主键盘的数字字符

3.4 事件的绑定和解绑

3.4.1.1 .on()绑定事件

类似于js中的addEventLister()事件监听
用法.on( events ,[ selector ] ,[ data ] )

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式
 $("#elem").on("mouseover mouseout",function(){ });//通过空格分离，传递不同的事件名，可以同时绑定多个事件

将数据传递到处理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
  name: "慕课网"
}, greet );

3.4.1.2 on事件委托

$("div").on("click","p",fn)//事件绑定在div上 但是click触发在p上

事件绑定在最上层div元素上，当用户触发在a元素上，事件会一直往上冒泡直到div元素上。

如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

==适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。==

JS的事件委托：
JS事件委托

3.4.2 off()卸载事件

和on绑定事件的特性一样，绑定事件传参数，解绑事件也要传一样的参数，处理函数才会被移除

绑定2个事件
$("elem").on("mousedown mouseup",fn)
删除一个事件
$("elem").off("mousedown")
删除所有事件
$("elem").off("mousedown mouseup")
快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁
$("elem").off()

3.5 事件对象event

3.5.1 event的作用

$(elem).on("click",function(event){
   event //事件对象
   console.log(e);//打开控制台F12可以看到返回了event对象,
   //他有一个属性target指向了DOM节点对象，但不是真正操作DOM对象
})

所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象

如何运用event对象？

https://www.imooc.com/code/10047 先放着

3.5.1 event对象的属性和方法

事件对象的属于与方法有很多，但是我们经常用的只有那么几个

event.type：获取事件的类型

$("a").click(function(event) {
  alert(event.type); // "click"事件
});

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标(坐标的参照点为页面左上角开始)

event.preventDefault() ：阻止默认行为

这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

event.stopPropagation() ：阻止事件冒泡

事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

==???等会试试==

event.which：获取在鼠标单击时，单击的是鼠标的哪个键

event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3

event.currentTarget : 在事件冒泡过程中的当前DOM元素

冒泡前的当前触发事件的DOM对象, 等同于this.

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

3.6 自定义事件trigger

3.6.1 自定义事件trigger

.trigger ：简单来讲就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

类似mousedown、click、keydown都是浏览器提供的，这些时间必须要有交互才能被触发

$('#elem').on('click', function() {
    alert("触发系统事件")
 });

alert需要执行的条件：必须有用户点击才可以。如果不同用户交互是否能在某一时刻自动触发该事件呢？ 正常来说是不可以的，但是jQuery解决了这个问题，提供了一个trigger方法来触发浏览器事件

$('#elem').trigger('click');

在绑定on的事件元素上，通过trigger方法就可以调用到alert了，挺简单！

trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数

$('#elem').on('Aaron', function(event,arg1,arg2) {
alert("自触自定义时间")
 });
$('#elem').trigger('Aaron',['参数1','参数2'])

==晚点试试==

3.6.2 自定义事件triggerHandler

trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡

trigger事件是具有触发原生与自定义能力的，但是存在： 事件对象event无法完美的实现，毕竟一个是浏览器给的，一个是自己模拟的。尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替

triggerHandler与trigger的用法是一样的，重点看不同之处：

• triggerHandler不会触发浏览器的默认行为，.triggerHandler( “submit” )将不会调用表单上的.submit()
• .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
• 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
• 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined

4.0 jQuery 动画

4.1 动画的显示和隐藏

4.1.1 hide()隐藏元素

$ele.hide()

当提供hide方法一个参数时，.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作

快捷参数：
.hide(“fast / slow”)
这是一个动画设置的快捷方式，’fast’ 和 ‘slow’ 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏

注意：jquery在做hide操作的时候，是会保存本身的元素的原始属性值，再之后通过对应的方法还原的时候还是初始值

4.1.2 show显示元素

$sle.hide().show() 和hide的使用方法一致

用hide和show方法比较少一般都直接修改disolay：none display：block就可以饿了

注意：
- show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置
- 如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css(‘display’, ‘block !important’)重写样式
- 如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

4.1.3 toggle()显示隐藏切换

$ele.toggle()

提供参数：.toggle( [duration ] [, complete ] )

同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会发生显示/隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。这个元素其实就是show与hide的方法

直接定位：.toggle(display)

直接提供一个参数，指定要改变的元素的最终效果

其实就是确定是使用show还是hide方法

if ( display === true ) {
  $( "elem" ).show();
} else if ( display === false ) {
  $( "elem" ).hide();
}

4.2.1 slideDown 下拉动画

.slideDown()匹配元素高度的动画

.slideDown( [duration ] [, complete ] )

duration 持续时间
complete 回调函数

$("ele").slideDown(1000, function() {
//等待动画执行1秒后,执行别的动作....
});

注意事项：

• 下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none
• 如 果提供回调函数参数，callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数，但是 this会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组 动画整体才执行一次

4.2.2 slideUp上卷动画

不带参数$(“elem”).slideUp();
这个使用的含义就是：找到元素的高度，下滑动画让元素一直滑到隐藏，当高度为0后修改元素display为none。

这样就能确保这个元素不会影响页面布局了

带参数：.slideUp( [duration ] [, easing ] [, complete ] )
同样可以提供一个时间，然后可以使用一种过渡使用哪种缓动函数，jQuery默认就2种，可以通过下载插件支持。最后一个动画结束的回调方法。

4.2.3 slideToggle上卷下啦切换

.slideToggle( [duration ] ,[ complete ] )

无参数的时候有一个默认的切换时间。

有参数：提供了时间、还有动画结束的回调

同时也提供了时间的快速定义，字符串 ‘fast’ 和 ‘slow’ 分别代表200和600毫秒的延时

slideToggle("fast") 
slideToggle("slow") 

4.3 淡入淡出效果

4.3.1 淡入淡出fadeOut() fadeIn() fadeToggle;

所谓”淡出”隐藏的，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏。

.fadeOut( [duration ], [ complete ] )

duration 持续时间
complete 回调函数

字符串 ‘fast’ 和 ‘slow’ 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400毫秒的延时

淡入淡出的动画原理：操作元素的不透明度从0%逐渐增加到100%，操作元素的不透明度从1000%逐渐降低到0%

如果元素本身是可见的，不对其作任何改变。

如果元素是隐藏的，则使其可见；

4.3.2 可选透明度fadeTo();

可以让元素的opecity透明度变为想要的值

.fadeTo( duration, opacity ,callback)

duration时长。它可以取以下值：”slow”、”fast” 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）

可选的 callback 参数是该函数完成后所执行的函数名称。

4.4 toggle与slideToggle以及fadeToggle的比较

操作元素的显示和隐藏可以有几种方法。
例如：

• 改变样式display为none
• 设置位置高度为0
• 设置透明度为0

都能达到这个目的，并且针对这样的处理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，还引入了toggle、sildeToggle以及fadeToggle切换方法

toggle、sildeToggle以及fadeToggle的区别：

• toggle：切换显示与隐藏效果
• sildeToggle：切换上下拉卷滚效果
• fadeToggle：切换淡入淡出效果

当然细节上还是有更多的不同点:

• toggle与slideToggle细节区别：
• toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性
• slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法

• fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
• 元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
• 元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。
• 注释：隐藏的元素不会被完全显示（不再影响页面的布局）

4.5 自定义动画

4.5.1 animate

animate方法更加灵活了，可以精确的控制样式属性从而执行动画

.animate( properties ,[ duration ], [ easing ], [ complete ] )

.animate( properties, options )

properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，

注意：CSS 样式使用 DOM 名称（比如 “fontSize”）来设置，而非 CSS 名称（比如 “font-size”）

• duration:时间
• easing动画运动的算法

• complete回调

  animate({
  left: 50,
  width: ‘50px’
  opacity: ‘show’,
  fontSize: “10em”,
  }, 500);

4.5.1 animaie方法二

animate在执行中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，我们可以通过animate提供的第二种设置语法，传递一个对象参数，可以拿到动画执行状态一些通知

.animate( properties, options )
options参数

• duration - 设置动画执行的时间
• easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
• step：规定每个动画的每一步完成之后要执行的函数
• progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念

• complete：动画完成回调

  //观察每一次动画的改变
  $aaron.animate({ height: ‘50’ }, { duration :2000, //每一个动画都会调用 step: function(now, fx) {$aaron.text(‘高度的改变值:’+now)
  }
  })

4.5.2 停止动画stop

语法：

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
stop还有几个可选的参数，简单来说可以这3种情况

• .stop(); 停止当前动画，点击在暂停处继续开始
• .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行

• .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

  $(“#aaron”).animate({ height: 300 }, 5000)$(“#aaron”).animate({
  width: 300
  }, 5000)
  $(“#aaron”).animate({
  opacity: 0.6
  }, 2000)

  1. stop()：只会停止第一个动画，第二个第三个继续
  2. stop(true)：停止第一个、第二个和第三个动画
  3. stop(true ture)：停止动画，直接跳到第一个动画的最终状态

4.6 jquery 核心

4.6.1 each方法

jQuery的大部分方法都是针元素合集的操作，所以jQuery会提供$(selector).each()来遍历jQuery对象

语法

jQuery.each(array, callback )
jQuery.each(object, callback )

each就是for循环方法的一个包装，内部就是通过for遍历数组与对象，
第一个参数传递的就是一个对象或者数组，第二个是回调函数

$.each(["Aaron", "慕课网"], function(index, value) {
   //index是索引,也就是数组的索引
   //value就是数组中的值了
   return false //停止循环，如果返回其他则继续执行下一个循环
});

4.6.2 inArray方法查找数组中的索引

js中没有判断元素是否存在数组的方法,es5有了indexOf的方法，但jquery保持低版本向下兼容，所有封装了一个方法。

如果元素不存在数组中则返回-1。

语法：jQuery.inArray( value, array ,[ fromIndex ] )

$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引：4
//第一位是

4.6.3 去空格trim方法

jQquery.trim()去掉字符串两端的空白字符
只能去掉两端的，中间的不会去掉

4.6.4 获取DOM中元素get()

.get([index ])
注意2点

get方法是获取的dom对象，也就是通过document.getElementById获取的对象

get方法是从0开始索引
所以第二个a元素的查找： $(a).get(1)

负索引值参数

get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1

4.6.5 DOM元素的index获取方法

.index()//返回jquery对象第一个元相对于他同辈的位置
.index( selector )//如果在一组元素上调用 参数是DOM或者jQuery对象，index()返回传入元素相对与原先集合的位置
.index( element )//如果是个 选择器 则返回原想元素相对于选择器匹配元素的位置 匹配不到返回-1

$("li").index($("#li2") //在所有的li元素中寻找一个id为li2的元素，如果存在返回li2的索引值，不存在就返回-1

4.6.1 each方法