jQuery基础

jQuery基础

• 宗旨：写得更少，做得更多
• 主要的功能 ：
  1. 优化HTML文档操作（增，删，改，查，class样式处理）
  2. 事件处理
  3. 动画设计
  4. Ajax交互

所以请注意，jQuery是一个专注于DOM的框架 ，不针对ES与BOM

jQuery的语法格式

jQuery主要包含三部分

1. 起始标志符$
2. 选择器
3. 封装的方法(只有一个属性length属性)

jQuery需要通过第三方JS库来实现，所以我们需要从网络上面下载jQuery的库以后才能使用，可以在官网下载，也可以通过npm去下载

下载完成以后，请在需要的页面进行导入

 <script src="./js/jquery.js" type="text/javascript"></script>

文档就绪函数

jQuery主要的操作集中在DOM操作里面，所以它必须等到当前的网页加载完毕以后才能进行，在以前的时候，我们需要通过window.onload才能进行

window.onload=function(){
    //要执行的代码
}

如果有了jQuery，里面有一个专门的方法ready代表当前文档已经加载完毕了

$(document).ready(function(){
    //要执行的代码
});

上面的代码代表选中了document当前文档，ready是一个是一个事件方法，代表文档加载完毕以后的方法，里面接收一个回调函数！

请注意，在写jQuery代码之前，一定要注意写文档就绪函数

因为文档就绪函数是经常使用的一个函数，所以它在这里有一种简化的写法

$(function(){
    //要执行的代码      
    //这就是简化的文档就绪函数
});

可以直接在选择器里面放一个function 回调

思考：window.onload与jQuery里面的$(document).ready()有什么区别？

onload后执行,ready先执行,一个是 jQuery里面的方法,一个是window里面的事件

jQuery选择器

jQuery的选择器在原有的CSS选择器上面做了一些扩展，我们主要是对这些扩展再重新的做一次记忆就行了

参考手册

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	class="intro" 的所有元素
.class,.class	$(".intro,.demo")	class 为 "intro" 或 "demo" 的所有元素
element	$("p")	所有 <p>元素
el1,el2,el3	$("h1,div,p")	所有<h1>、<div> 和 <p>元素
:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数<tr>元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:odd	$("tr:odd")	所有奇数<tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:first-child	$("p:first-child")	属于其父元素的第一个子元素的所有 <p> 元素
:first-of-type	$("p:first-of-type")	属于其父元素的第一个 <p> 元素的所有<p>元素
:last-child	$("p:last-child")	属于其父元素的最后一个子元素的所有 <p> 元素
:last-of-type	$("p:last-of-type")	属于其父元素的最后一个<p>元素的所有 <p>元素
:nth-child(n)	$("p:nth-child(2)")	属于其父元素的第二个子元素的所有 <p> 元素
:nth-last-child(n)	$("p:nth-last-child(2)")	属于其父元素的第二个子元素的所有 <p>元素，从最后一个子元素开始计数
:nth-of-type(n)	$("p:nth-of-type(2)")	属于其父元素的第二个 <p> 元素的所有<p>元素
:nth-last-of-type(n)	$("p:nth-last-of-type(2)")	属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数
:only-child	$("p:only-child")	属于其父元素的唯一子元素的所有 <p> 元素
:only-of-type	$("p:only-of-type")	属于其父元素的特定类型的唯一子元素的所有 <p> 元素
parent > child	$("div > p")	<div> 元素的直接子元素的所有 <p>元素
parent descendant	$("div p")	<div> 元素的后代的所有 <p> 元素
element + next	$("div + p")	每个 <div> 元素相邻的下一个<p> 元素
element ~ siblings	$("div ~ p")	<div>元素同级的所有 <p>元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 值从 0 开始）
:gt(no)	$("ul li:gt(3)")	列举 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列举 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的输入元素
:header	$(":header")	所有标题元素 <h1>, <h2>...
:animated	$(":animated")	所有动画元素
:focus	$(":focus")	当前具有焦点的元素
:contains(text)	$(":contains('Hello')")	所有包含文本 "Hello" 的元素
:has(selector)	$("div:has(p)")	所有包含有 <p>元素在其内的 <div>元素
:empty	$(":empty")	所有空元素
:parent	$(":parent")	匹配所有含有子元素或者文本的父元素。
:hidden	$("p:hidden")	所有隐藏的 <p>元素
:visible	$("table:visible")	所有可见的表格
:root	$(":root")	文档的根元素
:lang(language)	$("p:lang(de)")	所有 lang 属性值为 "de" 的<p> 元素
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='default.htm']")	所有带有 href 属性且值等于 "default.htm" 的元素
[attribute!=value]	$("[href!='default.htm']")	所有带有 href 属性且值不等于 "default.htm" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有带有 href 属性且值以 ".jpg" 结尾的元素
[attribute|=value]	$("[title|='Tomorrow']")	所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
[attribute^=value]	$("[title^='Tom']")	所有带有 title 属性且值以 "Tom" 开头的元素
[attribute~=value]	$("[title~='hello']")	所有带有 title 属性且值包含单词 "hello" 的元素
[attribute*=value]	$("[title*='hello']")	所有带有 title 属性且值包含字符串 "hello" 的元素
[name=value][*name2*=*value2*]	$( "input[id][name$='man']" )	带有 id 属性，并且 name 属性以 man 结尾的输入框
:input	$(":input")	所有 input 元素
:text	$(":text")	所有带有 type="text" 的 input 元素
:password	$(":password")	所有带有 type="password" 的 input 元素
:radio	$(":radio")	所有带有 type="radio" 的 input 元素
:checkbox	$(":checkbox")	所有带有 type="checkbox" 的 input 元素
:submit	$(":submit")	所有带有 type="submit" 的 input 元素
:reset	$(":reset")	所有带有 type="reset" 的 input 元素
:button	$(":button")	所有带有 type="button" 的 input 元素
:image	$(":image")	所有带有 type="image" 的 input 元素
:file	$(":file")	所有带有 type="file" 的 input 元素
:enabled	$(":enabled")	所有启用的元素
:disabled	$(":disabled")	所有禁用的元素
:selected	$(":selected")	所有选定的下拉列表元素
:checked	$(":checked")	所有选中的复选框选项
.selector	$(selector).selector	在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
:target	$( "p:target" )	选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素

上面的jQuery选择器，jQuery通过上面的选择器，可以快递的选择元素，但请注意它的返回类型

它返回的是一个jQuery.fn.init这个东西，它是一个数组

<ul class="ul1">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
<ul class="ul2">
    <li>第四项</li>
    <li>第五项</li>
    <li>第六项</li>
</ul>

在上面的网页文档里面，我们用jQuery选择器去操作

$(选择器，区域);   //默认情况下为document
$(selector,context);
//context代表你在哪个区域里面在选择，默认是document整个文档

$("li")； //在整个document里面去找li
document.querySelectorAll("li")

如果仅仅只是想选择ul1下面的li

document.querySelectorAll(".ul1>li");
//-------------------
$(".ul1>li");
//---------------------
//如果非要使用两个参数
var ul1=document.querySelector(".ul1");   //首先拿到ul1
ul1.querySelectorAll("li");
//或
$("li",ul1);

选中ul1里面的第1个li怎么办？

$(".ul1>li:first-child");
$(".ul1>li")[0];
$(".ul1>li:nth-child(1)");
$(".ul1.li:nth-of-type(1)");
$(".ul1>li:eq(0)");  //这是jQuery新增的选择器

选中ul1里面的前2个li怎么办

$(".ul1>li:nth-child(-n+2)");
$(".ul1>li:lt(2)");   //这是jQuery新增的选择器

选中ul1里面的索引大于1的li怎么办

$(".ul1>li+li+li");
$(".ul1>li:gt(1)");  //jQuery新增的

总结：

eq代表当前索引 ，lt代表小于这个索引，gt代表大于这个索引，它是jQuery里面新增的选择器，css里面不具备

案例

请将下面表格当中的“旷工”与"缺卡"标记出来

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
       .table1{
           width: 500px;
           border: 1px solid black;
           border-collapse: collapse;
           text-align: center;
       }
       .table1 tr th,.table1 tr td{
           border: 1px solid black;
       }
   </style>
</head>
<body>
   <table class="table1">
       <tr>
           <th>日期</th>
           <th>星期一</th>
           <th>星期二</th>
           <th>星期三</th>
           <th>星期四</th>
           <th>星期五</th>
       </tr>
       <tr>
           <td>张力</td>
           <td>正常</td>
           <td>上班1缺卡</td>
           <td>正常</td>
           <td>旷工</td>
           <td>正常</td>
       </tr>
       <tr>
           <td>王五</td>
           <td>正常</td>
           <td>正常</td>
           <td>旷工</td>
           <td>正常</td>
           <td>下班1缺卡</td>
       </tr>
       <tr>
           <td>李四</td>
           <td>上班2缺卡</td>
           <td>正常</td>
           <td>正常</td>
           <td>正常</td>
           <td>旷工</td>
       </tr>
       <tr>
           <td>张力</td>
           <td>旷工</td>
           <td>正常</td>
           <td>正常</td>
           <td>正常</td>
           <td>正常</td>
       </tr>
   </table>
</body>
<script src="./js/jquery.js"></script>
<script>
   //假设没有jQuery
   /*
   var tds=document.querySelectorAll(".table1 td");
   tds.forEach(function(item,index,a){
       if(item.innerText.trim()=="旷工"){
           item.style.backgroundColor="red";
       }
       else if(item.innerText.trim().includes("缺卡")){
           item.style.backgroundColor="blue";
       }
   })
   */
   $(".table1 td:contains('旷工')").css("backgroundColor","red");
   $(".table1 td:contains('缺卡')").css("backgroundColor","blue");
</script>
</html>

jQuery里面的方法

jQuery的本质就是把DOM里面的常用操作封装成了一些方法，提供给用户使用，这些方法我们可以大致分为以下几类

事件方法

jQuery将一些常用的事件绑定封装成了方法，方便用户能够快速的进行事件绑定

• click方法，它用来绑定选中元素的单击事件

  $("#btn1,#btn2,#btn3").click(function (event) {
      console.log("hello world", new Date());
  })
  

• dblclick方法，它用来绑定选中元素的单击事件

  $("#btn1,#btn2,#btn3").dblclick(function (event) {
      console.log("hello world", new Date());
  })
  

• keydown方法键盘按下去

• keyup键盘松开

• keypress键盘敲击

• mousedown鼠标按下

• mouseup鼠标松开

• mouseenter鼠标进行

• mouseleave离开

• hover本身不是一个事件，它是把我们的mouseenter与mouseleave结合在了一起

  $(".div1").hover(function(){
      console.log("我hover进去了",new Date());
  },function(){
      console.log("我hover出来了",new Date());
  })
  

  第一个回调代表鼠标进入 ，第二个回调代表鼠标离开

上面的方法把常用二级DOM事件都做成了事件方法

鼠标事件	键盘事件	表单事件	文档/窗体事件
click	keydown	submit	load
dblclick	keyup	change	resize
mouseenter	keypress	focus	scroll
mouseleave		blur	unload

jQuery的事件方法只是把一些方法的事件封装成了方法，但是对于一些不常用的，怎么办呢？

这个时候jQuery就提供了一个on的通用方法

on方法的参数可以是2个，也可以3个

如果是2个，则如下所示，代表常规的事件绑定

$(".div1").on("touchstart",function(event){
    console.log("我触摸了");
})

上面的代码就是绑定了touchstart的事件

如果是3个，则代表事件委托方式的绑定，案例如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .ul1{
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <ul class="ul1">
        <li>第一项</li>
        <li>第二项</li>
        <li class="active">第三项</li>
        <li>第四项</li>
    </ul>
</body>
<script src="./js/jquery.js"></script>
<script>
    var newli=document.createElement("li");
    newli.className="active";
    newli.innerText="插入项";

    $(function(){
        //对ul1下面的所有li绑定了一个单击事件
        /*
        $(".ul1>li").on("click",function(){
            console.log("我点击了",new Date());
        })    
        */

        //事件绑定在.ul1上面，但是事件的触发者li.active
        $(".ul1").on("click",".active",function(event){
            //this指向了是.active这个DOM元素
            console.log("我点击了",new Date());
        });
        //第一个参数代表事件名称，第二个参数代表触发者判断条件，第三个代表事件要调用的方法
    })
</script>
</html>

注意事件方法里面的this指向问题

1. 在jQuery的事件方法里面，它的this应该和普通的事件绑定一样指向当前事件绑定的对象【常规方式绑定】
2. 在jQuery的事件委托绑定里面，它的this指向了是on的第二个参数

注意事件对象的变化

jQuery当中默认会接收一个事件对象，可以在回调方法里面用参数的形式接收到。这一个事件对象不同于之学习的DOM里面的事件对象

在DOM的事件对象里面，它最终是继承自Event这个对象，而在jQuery的事件里面，它是单独的封装成了一个对象，继承了object

在阻止事件传递的方法，原生的DOM里面，它需要设置属性cancelBubble 与调用方法stopPropagation(),现在在jQuery里面，则只需要调用event.stopPropagation();就可以了

在阻止事件的默认行为方法，如果是0级DOM，可以直接return false 如果是2级DOM可以直接调用preventDefault()方法，现在在jQuery里面则两种都可以用

注意事件的移除

在jQuery里面，我们的on相当于addEventListener添加事件监听 ，但是同时还有一个方法off 相当于移除事件监听

$(function () {
    $(".ul1>li").on("click",function(event){
        console.log(this);
    });
})

上面的代码是对ul1下面的li绑定了事件

$(".ul1>li").off("click");

这一段代码相当于把ul1下面的li的click事件监听移除掉

注意一次性事件绑定方法

jQuery提供one的方法，能够让元素在绑定事件以后只执行一次，执行一次以后这个事件自动移除掉

$(".ul1>li").one("click",function(event){
    console.log(this);
})

? 扩展：在很早期的时候，jQuery提供给用户绑定事件的方法不是on,如果只是普通绑定使用的是bind的方法，如果是委托的绑定使用的是delegate，如下代码所示

普通绑定

$(".ul1>li").bind("click",function(event){
    console.log(this);
})

委托绑定

$(".ul1").delegate("li","click",function(event){
    //它的参数顺序与on是不一样的
    console.log(this);
});

在老的版本里面是通过这两种方式来进行事件绑定的，但是用起来不太友好 ，所以后期就使用了on 一个方法来解决两个问题

更老的版本里面有还有一个live()是绑定方法，然后对应的移除是die()

---

DOM选取方法

jQuery已经有选择器的情况之下为什么还需要DOM取选的方法？

因为jQuery的选择器选取的元素只能够操作后代子代以及后面的兄弟，不能操作父级和前面的哥哥，所以必须有一套完整DOM选取方法去弥补这样的一个区别

<div class="div1">
    <ul class="ul1">
        <li class="li0">
            <span>大家好</span>
            <span>我叫杨标</span>
        </li>
        <li class="li1">
            <p>你们好</p>
            <p>这是jQuery</p>
        </li>
        <li>
        	第三项
        </li>
    </ul>
</div>
<h2 >天气非常不错</h2>

jQuery选取子级元素children(selector)

jQuery可以通过选择器选取子级元素，同时也可以通过DOM自带的方法去获取子级元素

$(".ul1>li");  //直接通过选择器选取
$(".ul1").children();

上面的两各方法都可以获取到ul1下面所有的li元素

如果我们需要获取ul1下面class为li1的原素呢？

$(".ul1>.li1");  //直接通过选择器获取
$(".ul1").children(".li1");

上面的jQuery方法里面，我们可以看到children方法在这里可以接收一个参数，这个参数是选择器，相当于在所有的子级元素里面用选择器过滤一次

jQuery获取后代元素

jQuery可以通过选择器空格来获取后代元素，同时也有DOM方法去获取后代元素

如果我现在仅仅只是想获取ul1下面的 p标签

$(".ul1 p");
$(".ul1").find("p");

find方法相当于在后代去找元素，它不一定停留在子代，find后面必须接一个选择器，如果想找到所有的，请给一个*的选择器

jQuery去找父级元素parent()

jQuery不能够通过选择器去找父亲，但是DOM的方法可以

如果我们现在希望找到ul1的父亲

$(".ul1").parent();

jQuery找所有的父级元素parents()

$(".ul1").parents();  

它会一直往上找，直到找到html

jQuery找父级元素，截止到某一个点parentsUntil()

$(".ul1").parentsUntil("html")

从.ul1开始向父级找，找到html结果，但是不包含html(找到它，但是不包含它)

jQuery找后面相邻兄弟next()

现在找li0后面的一个li元素

$(".li0+li");      //通过选择器获取
$(".li0").next();   //通过jQuery方法的DOM操作来获取

jQuery找后面所有的兄弟nextAll()

现在找li0后面的所有li元素

$(".li0~li");
$(".li0").nextAll();

jQuery找后面兄弟，直接某个结束nextUntil()

$(".li0").nextUntil(".li1");

在后面的兄弟里面去找，找到它，但不包含它

jQuery找前面的兄弟prev ()

$(".li1").prev()

jQuery找前面所有的兄弟prevAll()

$(".li1").prevAll()

jQuery找后面兄弟，直接某个结束prevUntil()

$(".li1").prevUntil(".li0");  
//找到它，但是不包含它

jQuery找到前面的和后面的兄弟siblings()

$(".li1").siblings()

扩展: 现在我们学习的方法总结如下

选取位置	选择器	DOM方法	jQuery方法
子代选取	>	children属性	**children()**方法
后代选取	空格	无	**find()**方法
父级选取	无	parentElement	parent()/parents()/parentsUntil()方法
相邻弟弟	+	nextElementSibling	**next()**方法
普通弟弟	~	无	**nextAll()**方法/nextUntil()方法
相邻的哥哥	无	previousElementSibling	**prev()**方法
普通的哥哥	无	无	**prevAll()**方法/prevUntil()方法
前后兄弟	无	无	**siblings()**方法
第一个	:first-child	firstElementChild	first()
最后一个	:last-child	lastElementChild	last()
符合条件过滤	选择器过滤	无	filter()
排除	:not	无	not()

在上面加粗的方法里面，还可以接收一个选择择做为参数，将选择的结果做一更为严谨的过滤

注意：DOM的选取方法与$(选择器)返回的结果是一个类型，在进行事件绑定的时候，this以最后一次选取的结果为主

$(".ul1").children().click(function(){
    console.log(this);  //this指向 thchilcren()选取的元素
})

//委托的this指向第二个参数
$(".ul1").children().on("click","span",function(){
    console.log(this);  //this指向 span
})

jQuery选中指定索引的子元素eq(index)

在之前的时候，我们的CSS选择器完成

$(".ul1>li:nth-child(2)");
$(".ul1>li:nth-of-type(2)");
$(".ul1>li:eq(1)")   //通过jQuery的选择器来完成
$(".ul1>li")[1];      //通过索引来的
$(".ul1>li").eq(1);   //通过jQuery的方法来选取的

jQuery选中第一个子元素first()

$(".ul1>li:first-child");
$(".ul1>li").first()

jQuery选中最后一个子元素last()

$(".ul1>li:last-child");
$(".ul1>li").last();   //jQuery的方法

jQuery选中ul1下面li的class为li1的filter()

$(".ul1>li.li1");
$(".ul1").children("li.li1");
$(".ul1>li").filter("li.li1");

filter()方法是过滤指定符号条件的结果

jQuery选中ul1下面li的class不为li1的not()

$(".ul1>li:not(.li1)");
$(".ul1>li").not(".li1")

filter()方法与not()是相对的

---

DOM操作方法

添加的方法

jQuery里面添加的方法全部都是基于DOM里面的三个方法来完成的insertAdjacentElement， insertAdjacentHTML,insertAdjacentText

1. append()该方法在元素的内部的最后去添加内容，它相当于beforeEnd结束之前
2. after()该方法在元素的后面去添加内容，相当于afterEnd结束之后
3. before()该方法在元素的前面去添加内容 ，相当于beforeBegin开始之前
4. prepend()该方法在元素的里面的最前面去添加内容，它相当于 afterBegin开始之后

DOM位置	jQuery方法	说明
beforeBegin	before()	开始之前
afterBegin	prepend()	开始之后
beforeEnd	append()	结束之前
afterEnd	after()	结束之后

上面的四个方法会根据你插入的内容自动的去调用*Element或*HTML或 *Text这三个方法

删除的方法

在jQuery里面，删除的方法主要是两个情况

1. remove() 它删除自身，同时也删除了自己的子元素
2. empty() 它只清空自己的子元素，保留当前自身

属性方法

jQuery将对DOM的常用属性操作封装成了方法，我们可以直接使用这些方法进行DOM的常用属性操作

1. html()

   该方法主要是对DOM元素的innerHTML这个属性进行操作，这个操作分为取值与赋值过程

   如果html有参数，则是赋值，如果没有参数则是取值

   但要注意，如果是取值，返回的是第一个，如果是赋值则可以批量进行

   $(".ul1>li").html();  //取值第一个
   $(".ul1>li").html("我在赋值");   //批量赋值
   

2. text()

   该方法主要对DOM元素的innerText这个属性进行操作，与html() 一样，取单个值，批量赋值。如果没有参数则是取值，如果有参数则是赋值

3. val()

   该方法主要是对表单元素进行DOM操作，因为表单元素有一个特殊的属性value，这个操作也分为取值与赋值过程，有参数就赋值，没参数就取值

---

1. attr()

   该方法用于对DOM元素的属性进行操作，它接收一个参数或两个参数，一个参数代表取这个属性的值，二个参数代表对这个属性进行赋值， 它对应的是DOM里面的getAttribute()和setAttribute()

   $("#userName").attr("placeholer");
   $("#userName").attr("type");
   $("#userName").attr("placeholder","请输入密码");   //对placeholder这个属性进行赋值
   

2. removeAttr()

   该方法是对DOM元素的属性进行删除，相当于DOM里面的removeAttribute()

   $("#userName").removeAttr("placeholder");
   //删除placeholder这个属性
   

3. prop()

   该方法是对DOM的单属性进行操作

   //禁用disabled=false;
   $("#userName").prop("disabled",false);
   //只读readonly=true;
   $("#userName").prop("readonly",true);
   

4. data()

   该方法主要对DOM的以data-开头的自定属性进行获取

   <input type="text" id="userName" data-age="18" data-sex="男" data-user-pwd="123456" disabled placeholder="请输入用户名">
   

   现在我们通过jQuery的方法去获取里面的自定义属性

   $("#userName").data("age");
   $("#userName").data("sex");
   $("#userName").data("userPWd");
   $("#userName").data("user-pwd");
   $("#userName").attr("data-sex");
   //赋值
   $("#userName").attr("data-age",50);
   

   data的方法仅仅只能用于获取，不要用于赋值，如果要赋值了还是调用attr()方法进行赋值

---

1. addClass()

   该方法主要是对DOM元素的classList 进行add()操作

   $(".div1").addClass("active")
   

2. removeClass()

   该方法主要是对DOM元素的classList 进行remove()操作

   $(".div1").removeClass("active")
   

3. toggleClass()

   该方法主要是对DOM元素的classList 进行toggle()操作

   $(".div1").toggleClass("active");
   

---

1. css()

   该方法主要用于对CSS样式的取值与赋值，它取值是通过DOM的window.getComputedStyle()这个方法来获取，它的赋值主要是通过style这个属性来完成

   这个方法的使用场景与使用方法多种多样

   $(".div1").css("width");  // 获取CSS width
   $(".div1").css("border");  //获取CSS border
   $(".div1").css("width","200px");   //  它的赋值操作是基于style来进行的
   

   到目前为止，我们都发现一个参数是取值，两个参数是赋值，其实并不是的

   第一种情况

   现在需要将div1的宽度设置为200px，高度设置200px

   $(".div1").css("width","200px");
   $(".div1").css("height","200px");
   $(".div1").css("backgroundColor","blue");
   

   因为jQuery是支持链式语法，所以上面的选择是一样的，我们可以使用链式语法去完成

   $(".div1").css("width","200px").css("height","200px").css("backgroundColor","blue")
   

   还可以像这样即操作CSS也操作属性

   $(".div1").css("width","200px").css("height","200px").css("backgroundColor","blue").text("我改变了你的样式").css("color","red")
   

   第二种情况

   这一种赋值方式是直接通过对象去完成的

   $(".div1").css({width:"200px",height:"200px",backgroundColor:"blue",color:"red"}).text("我用另一种方式再完成")
   

   注意：请注意上面的backgroundColor,如果碰到CSS属性名有-则去掉-后面的首字母大写

   如果你不想转，你就加个引号把它包含起来"background-color"

动画方法

1. 显示隐藏

   • show()显示
   • hide()隐藏
   • toggle()在隐藏与显示之间在进行切换

   上面的三个方法接收参数，如果有参数则会实现一个过渡的效果，这个参数可以是三个枚举值slow/normal/fast，由慢到快，也可以接收一个具体的时间值，这个值以毫秒为单位

   $(".div1").toggle(5000);
   $(".div1").toggle("fast");
   

2. 淡入淡出

   • fadeIn()淡入
   • fadeout()淡出
   • fadeToggle()在淡入和淡出之间进行切换
   • fadeTo(j时间,透明度)切换到指定透明度

   上面的前三个方法也可以接收参数，与“显示隐藏”保持一致，可以接收枚举参数，也接收具体时间值

3. 上拉下滑

   • slideUp()上拉
   • slideDown()下滑
   • slideToggle()在上拉下滑之间进行切换

   上面的三个方法也接收参数

4. 自定义动画

   上面的三个动画是jQuery提供给我们的常用的三个动画 ，但是我们还可以定义自己的动画效果,它使用的方法是animate

   $(".div1").animate({marginLeft:"500px"},2000).animate({marginTop:"200px"},2000);
   

动画方法的回调

在调用jQuery的动画的时候，执行动画是需要时间的，如果我们希望某一段代码是在动画 结束以后去进行的，那么，我们则需要使用回调，如下代码所示

$("#btn1").click(function(){
    $(".div1").slideUp(5000);
    alert("我在上拉");
});

如果我们仅仅只是以上面的代码去运行，会发现，动画还没有完成，下面的弹窗就出来了，这不行

解决方法一

 $("#btn1").click(function(){
     $(".div1").slideUp("5000");
     setTimeout(function(){
         alert("我在上拉");
     },5000);
 });

使用定时器这种方式局限性非常大，不推荐使用

解决方法二

$("#btn1").click(function(){
    $(".div1").slideUp(5000,function(){
        alert("hello world");
    })
});

这种方法是jQuery提供给用户的，所以我们可以在这个里面直接使用，同时上面讲的四种动画有回调

 $(".div1").animate({
     marginLeft:"500px"
 },2000,function(){
     alert("我结束了");
 })

解决方法三

利用jQuery的排队等待方法

$("#btn1").click(function(){
    //queue是排队
    $(".div1").slideUp(5000).queue(function(){
        alert("hello world");
        $(this).dequeue();   //出队
    }).queue(function(){
        alert("你好，世界");
        $(this).dequeue();  //出队
    }).slideDown();
});

jQuery的链式语法

jQuery支持链式语法，本质就是在选取元素结束以后可以在后面多次调用方法

jQuery获取元素大小

jQuery提供了四个方法用于获取元素的大小

• width()/height()

  指元素content的大小

• innerWidth()/innerHeight()

  指元素的content+padding的大小

• outerWidth()/outerHeight()

  指元素的content+padding+border

• outerWidth(true)/outerHeight(true)

  指元素的content+padding+border+margin

jQuery的其它方法

在之前，我们在学习jQuery的方法的时候，都是通过一个选择器选中元素以后再去调用jQuery的方法，但是jQuery本身也提供一些方法，可以直接使用

1. each()方法

   这个方法是jQuery提供给用户进行遍历的方法，当用户选取一组元素可以以后可以直接调用each方法进行遍历

    //each是遍历的方法
   $(".ul1>li").each(function(index,ele){
       console.log(index);
       console.log(ele);
       //在这里要注意一点，它的this指向当前遍历的元素
       console.log(this);
   })
   

   注意：回调方法里面的参数不要与数组forEach回调用三个参数弄混了

---

接下来就是jQuery对象方法，因为方法既是方法也是对象

1. each()方法

   这个each和上面的each是不一样的，虽然方法名相同，但是调用的对象不一样

    var li1=$(".ul1>li"); 
   //第一个参数代表你要遍历的数组或类数组，第二个代表回调函数
   $.each(li1,function(index,ele){
       console.log(index);
       console.log(ele);
   });
   

   这个时候是把jQuery当成对象在进行调用，它不仅可以遍历jQuery得到的DOM集合，还可以遍历类数组

    var lis=document.querySelectorAll(".ul1>li");
   //返回一人NodeList   它是一个类数组
   $.each(lis,function(index,ele){
       console.log(index);
       console.log(ele);
   })
   

   它还可以遍历数组

   var arr=["a","b","c","d","e"];
   $.each(arr,function(index,ele){
       console.log(index);
       console.log(ele);  
   }); 
   

2. makeArray()

   在以前的时候，我们可以使用Array.prototype.slice.call(类数组)

   jQuery提供这个方法将类数组转换成数组,语法格式如下

   $.makeArray(类数组,数组结果)
   

   var resultArray=[];
   $(function(){
       var lis=document.querySelectorAll(".ul1>li");
       $.makeArray(lis,resultArray);
   });
   

   经过上面的运算以后，resultArray它就是一个数组，这个数组里面的元素就是lis里面的元素

3. toArray()

   jQuery提供该方法直接将选中的结果转为数组

   $(".ul1>li").toArray();
   

4. ajax方法

   该方法会出专题讲解