jQuery01

jQuery

1. jQuery的基本概念。。选择器。。。DOM操作。。动画。。事件及扩展。。
2. 学习jQuery的一大堆api（就是方法）
3. 方法调用的时候，都带小括号()..

4. javascript与jQuery对比

   1. 入口函数：js只能有一个入口函数（window.onload=function(){}）（如果写多个，后面的会覆盖前面的）。。jquery可以有多个入口函数，并且不会发生覆盖的情况。
   2. 代码容错性：js代码容错性差，代码出现错误会影响后面的代码运行。。。而jQuery代码容错性好，会屏蔽错误，并且不会影响后面代码的运行。（找错比较难找，只能打断点）。
   3. 浏览器兼容性：js兼容性差。。。jQuery对浏览器兼容性做了封装，因此不存在兼容性问题。
   4. 操作复杂性：js DOM操作复杂，对于一些简单动画效果，实现起来比较麻烦。。。jQuery DOM操作简单，支持隐式迭代，实现动画效果非常简单。

5. JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。

jQuery的引入

    <script src="jquery-1.14.1.js"></script>

jQuery版本

大版本分类

1. 大版本分为1.x 2.x 3.x

2. 区别：2.x 3.x版本不再支持IE6/7/8

同一版本分类

1. jQuery每个版本分为压缩版和为压缩版。

   1. jQuery.js是未压缩版。代码可读性高，在开发和学习时使用。方便查看源码。

   2. jQuery.min.js是压缩版本。除去了注释，换行，空格，并将一些变量替换成了a，b，c之类的简单字符。基本没有可读性。（一般都在生产环境下使用，减少流量的使用，增加效率）

2. 这些版本基本上没有什么区别，只是2.3.不兼容IE6/7/8了。如果需要兼容IE6/7/8，可以继续使用1.x版本。

入口函数

1. 对比javascript的入口函数和jQuery的入口函数的执行时机。

   1. javascript的入口函数要等到页面中所有的资源（图片，文件）加载完成后才开始执行。
   2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片，文件的加载。

2. 有两种写法：
   第一种写法：、
   $(document).ready(function(){

   });

   第二种写法：

   $(function(){});

3. 补充：===jQuery，就是说能用的地方，全部可以用jQuery，$只是简写形式。

jQuery对象和DOM对象

1. 使用javascript中的方法获取到页面中的元素的返回对象就是DOM对象。比如使用document.getElement*系列的方法返回的对象就是DOM对象

   var btn = document.getElementById(“btnShowDiv”);var divs = document.getElementsByTagName(“div”);

2. DOM对象只能使用DOM对象的方法和属性。

   domObject.innerHTML = “dom对象设置文本”;domObject.style.display= “block”;//dom对象显示对象domObject.onclick = function() {}//dom对象绑定事件

3. jQuery对象就是使用jQuery的方法获取页面中的元素返回的对象就是jQuery对象。比如使用$()方法返回的对象都是jQuery对象。

   $(“div”);//标签选择器返回的jquery对象。$(“#btnShowDiv”);//id选择器返回的jquery对象。

4. jQuery对象只能使用jQuery对象的方法

   var $obj = $(“div”);$obj.html(“jquery对象设置文本的方法”);$obj.show();//jquery对象显示文本$obj.click(function() {});//jquery对象绑定事件

5. 错误的用法：

   $(“div”).innerHTML;//jquery对象不能调用dom方法document.getElementById(“btnShowDiv”).show();//dom对象不能调用jquery方法。

jQuery对象转DOM对象

    var $li = $(“li”);    //第一种方法（推荐使用）    $li[0]    //第二种方法    $li.get(0)    //其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。

DOM对象转jQuery对象

1. 这个直接用$(domObj)也可以。

   var $obj = $(domObj);// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery选择器（重点）

1. js可以通过id或者标签名获取页面中的元素，但是返回的是DOM对象，而且方法很单一，我们学习了jQuery，jQuery给我们提供了更简单的方法获取到页面中的元素。注意：（jQuery选择器返回的是jQuery对象）。

选择器

1.基本选择器

1. ID选择器：获取指定id的元素

   $("#id");

2. 类选择器：获取同一类class的元素

   $(".class");

3. 标签选择器：获取同一类标签所有的元素

   $("div");

4. 并集选择器：使用逗号分开，只要符合条件之一就可，

   $("div,p,li");

5. 交集选择器（标签指定值选择器）:注意选择器a和选择器b之间没有空格，class为redClass的div元素，注意区分后代选择器

   $("div.redClass");

2.层级选择器

1. 子代选择器：使用>号，获取儿子层级的元素，注意并不会获取孙子层级的元素，

   $("ul>li");

2. 后代选择器：使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等。

   $("ul li");

3.过滤选择器

这类选择器都带冒号：；

1. ：eq(index) 获取li元素中选择索引号为2的元素，索引号index从0开始。

   $("li:eq(2)").css("color","red");

2. :odd 获取到的li元素中，选择索引号为奇数的元素

   $("li:odd").css("color","red");

3. :even 获取到li元素中，选择索引号为偶数的元素

   $("li:even").css("color","red");

4.筛选选择器（方法）

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

1. children(selector) 相当于$("ul>li"),子类选择器

   $("ul").children("li");

2. find(selector) 相当于$("ul li"),后代选择器

   $("ul").find("li");

3. siblings(selector) 查找兄弟节点，不包括自己本身。

   $("#first").siblings("li");

4. parent() 查找父亲

   $("#first").parent();

5. eq(index) 相当于 $("li:eq(2)") ，index从0开始

jQuery操作样式

css操作

功能：设置或者修改样式，操作的是style属性

1. 设置单个样式：

   $("#one").css("background","gray");//将背景色修改为灰色

2. 设置多个样式：参数是一个对象，对象包含了需要设置的样式名和样式值

   $("#one").css({    "background":"red",    "width":"400px",    "height":"200px"});

3. 获取样式，jQuery对象是一个伪数组(获取样式只会返回第一个元素对应的样式的值)

   $("div").css("backgroundColor");

class操作

1. 添加类样式

   addClass(name);//name：需要添加的样式类名，注意参数不要带点.$(“div”).addClass(“one”);//例子,给所有的div添加one的样式。

2. 移除所有的样式类

   removeClass()//不带参数，移除所有的样式类$(“div”).removeClass();//例子，移除div所有的样式类

3. 移除单个样式类

   removeClass(“name”);//name:需要移除的样式类名$(“div”).removeClass(“one”);//例子，移除div中one的样式类名

4. 判断是否有样式类

   hasClass(name)//name:用于判断的样式类名，返回值为true false$(“div”).hasClass(“one”);//例子，判断第一个div是否有one的样式类

5. 切换样式类

   toggleClass(name);//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。//例子$(“div”).toggleClass(“one”);

6.经验总结

1. 如果操作到的样式非常少，可以考虑css方法
2. 如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
3. 如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。

jQuery动画

jQuery提供了三组基本动画，这些动画都是标准的，有规律的效果，jQuery还提供了自定义动画的功能。

1.显示与隐藏

1. show();显示
2. hide();隐藏

3. toggle();显示隐藏切换，如果显示状态执行隐藏操作，否则执行显示操作。

   show([speed], [callback]);//speed(可选)：动画的执行时间1.如果不传，就没有动画效果。2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。//callback(可选):执行完动画后执行的回调函数

2.滑入滑出

1. slideDown():滑入
2. slideUp():滑出

3. slidToggle()滑入滑出切换

   slideUp(speed, callback);//speed(可选)：动画的执行时间1.如果不传，默认为normal，注意区分show/hide。2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)3.固定字符串，slow(200)、normal(400)、fast(600)//callback(可选):执行完动画后执行的回调函数

3.淡入淡出

1. fadeIn():淡入
2. fadeOut():淡出

3. fadeToggle():淡入淡出切换

   fadeIn(speed, callback);//speed(可选)：动画的执行时间1.如果不传，默认是normal。2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)3.固定字符串，slow(200)、normal(400)、fast(600)//callback(可选):执行完动画后执行的回调函数

4.动画小结

1. jQuery给我们提供了三组动画，show/hide、slideDown/slideUp、fadeIn/fadeOut

2. show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。

3. show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。

自定义动画(animate)

    $(selector).animate(json,[speed],[easing]，[callback]);    // json：要执行动画的CSS属性，带数字（必选）    // speed：执行动画时长（必选，默认normal）    //easing：控制动画的效果            //1.swing：摇摆、秋千(默认)         //2.linear:匀速    // callback：动画执行完后立即执行的回调函数（可选）

动画队列问题

在同一个元素上执行多个动画，对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完了才会执行。（这时候就会有bug，所以要解决，有个停止动画的方法，）

停止动画

1. stop(); 停止当前正在执行的动画效果。

   stop(clearQueue, jumpToEnd);//第一个参数：是否清除队列(true/false)//第二个参数：是否跳转到最终效果(true/false)

2. stop();里面也可以指定某一个对象的动画，

   <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#box {    width: 400px;    height: 400px;    background-color: pink;    display: none;}</style><script src="jquery-1.12.4.js"></script><script>$(function () {    $("#btn1").click(function () {        $("#box").slideDown(4000).slideUp(4000);    });    $("#btn2").click(function () {        //$("#box").stop();        //stop(clearQueue, jumpToEnd)        //是否清除动画队列  true, false        //是否跳转到当前动画的最终效果 true, false        //$("#box").stop(false, false);//stop()        //$("#box").stop(true, false);        //$("#box").stop(false, true);        $("#box").stop(true, true);    });});</script></head><body><input type="button" value="开始动画" id="btn1"><input type="button" value="停止动画" id="btn2"><div id="box"></div></body></html>

jQuery操作DOM节点

1.创建元素

    //$(htmlStr)    //htmlStr：html格式的字符串    $(“<span>这是一个span元素</span>”);

2.添加元素

1. 添加新建的元素：

   //方法一：将jQuery对象添加到调用者内部的最后面。 var $span = $(“<span>这是一个span元素</span>”);$(“div”).append($span);//方法二：参数传字符串，会自动创建成jquery对象$(“div”).append(“<span>这是一个span元素</span>”);

2. 添加已经存在的元素：（就是之前div外面有一个p，相当于把这个p剪切到了div里面）

3. 类似的有：append 、prepend 、after 、before

   var $p = $(“p”);$(“div”).append($p);//注意：如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。

4. 使用html方法创建元素；text方法与DOM对象的方法一样

   //设置内容$(“div”).html(“<span>这是一段内容</span>”);//获取内容$(“div”).html()

3.清空元素

1. empty();清空指定节点的所有元素，自身保留。

   $(“div”).empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码，事件）

2. 第二种方法：

   $(“div”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

4.删除元素

1. remove(); 相比于empty，自身也删除

   $("div").remove();

5.克隆元素

1. 作用：复制匹配的元素

2. 深度复制就是包括里面绑定的事件也都复制（参数传true）

   // 复制$(selector)所匹配到的元素（深度复制）// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。$(selector).clone();