jQuery

1.jQuery简介

Dom元素不能使用jQuery的方法

jQuery在2.0版本后不再兼容ie浏览器

选择器的功能很强大，且选择器支持链式编程

2.jQuery的选择器

选择器分为两个部分，一个是选择器，一个是筛选器

选择器

• 基本选择器
  
  按照css的方式来选择元素

	<div id='box'>
	</div>
	<div class='one'></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        console.log($('div'))
        console.log($('#box'))
    </script>

• 特殊选择器
  

    <script>
        console.log($())
        console.log($('div:eq(0)'))
        console.log($('div:eq(1)'))
    </script>

可以在https://jquery.cuishifeng.cn/index.html这里找到一些其他的特殊选择器的使用方法

筛选器

可以配合选择器进行链式编程，例如使用选择器给所有的元素一个css的样式，再利用筛选器进行另一次样式的赋予。

与选择器的使用方法类似只不过又加上了一层函数。

        console.log($('#one').next())

        console.log($('#one').nextAll())
        console.log($('#one').nextAll('.box'))

nextUntil()是获取集合后所有元素，与nextAll一样，而nextUntil(选择器)则是获取集合后所有元素直到选择器为止(不包括选择器元素)。

        console.log($('#one').nextUntil())
        console.log($('#one').nextUntil('.box'))

prev()与next同理，只不过改成了元素集合的上一个元素

parent()与next同理，只不过改成了元素集合的父元素

parent(选择器)
例如：

        console.log($('#one').parents('body'))

chlidren（）同理

只要符合选择器条件，可以拿到符合条件的所有元素



获取的是索引值，在其父元素里的

	    <ul>
            <li class="a">1</li>
            <li id="one">2</li>
            <span>0000</span>
            <li class="box">3</li>
            <li>4</li>
        </ul>
        <ul>
            <li class="a"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        console.log($('.a').first().index())
        console.log($('.a').last().index())

3.jQuery操作文本

在获取时只能拿一个超文本内容，即获取第一个

语法的具体写法

设置时是全覆盖，与.Classname类似

与html()类似，但是，获取的是文本可以获取到标签内的所有文本
且设置文本时也会把所有的都打印上去

    <script>
        $('div').text('<span>one</span>')
    </script>

也有隐式迭代

获取时有多个值也是只能获取一个值

    <input type="text" value="111">
    <input type="text" value="222">
    <input type="text" value="333">
    <script>
        console.log($('input').val())
    </script>

4.jQuery操作元素类名（class）

与js中的类似
hasClass()的返回值只有false和true

• 语法
  

5.jQuery操作元素样式（css）

只有这一个语句，但是有很多语法

所有的css属性都可以拿到
这里的width指css属性中的一种，也可以是height等
语法

用.css()设置时，元素集合内有多少元素就会设置多少元素

语法

与上同理，只不过是批量设置样式

6.jQuery的基础绑定事件

语法

this获取的是dom元素，不能使用jQuery的方法

第一种不能用，因为他是dom元素
第二种用 $()抱起来的可以用

• 选项卡的jQuery代码
  

jQuery的事件绑定

• on()方法
  

语法

只有点击li才有效果

在原生js里也能使用，但是点击后会出现整个ul

这里的复杂数据类型要用到{}来表示，这里的e就是函数的形参，利用这一语法，就可以将你想要的参数传递进来


语法

看data数据，在中间偏下

语法

这种形式没办法进行传参的操作

• one()方法
  与on()的使用一样，但是只能执行一次
  
  不用事件委托时，所有的后代元素都可以执行一次点击事件
  
  
  上图中的所有li都有一次点击函数
  而使用事件委托时，后代元素只有一次点击事件
  
  绑定完成后，是ul的click事件只能触发一次
  
  其他的使用方法与on一样，只不过把on换成one

• off()
  

  
  
  这两种事件的绑定都可以，因为他是链式编程
  
  

• trigger()
  
  用js代码来实现事件，下面的代码浏览器打开时就执行
  

jQuery的事件函数

语法

• jQuery唯一的特殊事件
  hover（）
  
  语法
  

7.jQuery的节点操作

• 创建节点
  
  
  
  原有的文本被替换

• 插入节点

这里的p不是标签，而是一个已经定义的节点

与appendTo()效果一样



同理
当执行多次插入同一节点的操作时，以最后一次为准

• 外部插入
  
  
  

• 删除节点
  （元素集合）
  
  
  
  
• 替换节点
  
  功能一样，主语不一样
  
• 克隆节点
  
  
  

8.jQuery操作元素属性

• attr（）和removeattr（）
  
  在button上就不能用
  
  不推荐把id 和class删除
  

• prop和removeprop
  
  

即用prop设置的元素不会在标签上显示，而是作为对象中的属性存储在标签内

图中的aa和abc在标签上是没有的

同理

9.jQuery获取元素尺寸

语法的写法

获取元素尺寸时不受disabled的影响

10.jQuery操作元素位置关系

与js的类似，注意，是页面而不是父元素

需要x值就是

console.log($('div').offest().x)

需要y值就是

console.log($('div').offest().y)

绝对设置，优先级高

若子元素先动，父元素可能会带着子元素动
例如

橙色是子元素，蓝色是父元素

获取的就是元素的定位的值

11.jQuery的基础动画

jQuery的动画都可以通过经典js来实现

操作的是display属性的none和block值

语法

时间与js一样，也是毫秒，运动方式也是一样的值，除了最后的函数，当动画结束后触发

12.jQuery的折叠动画

与上面的基础动画一样

利用绝对定位设置buttom：0可以实现从下往上的动画

13.jQuery的渐隐渐显动画

14.jQuery的综合动画

与css的动画（animation）属性类似

语法实例

15.jQuery的停止动画

这是一段只执行一次的代码。

但是jQuery提供了两个方法来停止

16.animatecss动画插件

大部分动画效果都可以在https://animate.style/实现
需要先下载一个库

17.jQuery发送ajax请求

jQuery发送一个get请求

这种是原型上的方法，需要依赖元素集合去用
而$.get()就把 $看作一个对象，进而向对象内添加get(){}的函数

数据可以写成’key=value&key=value’的形式，也可以写成对象的形式
默认返回的数据类型是string，可以通过期望返回的数据类型来改变数据类型


写给后端的数据有多种写法

jQuery发送一个post请求

与$.get()一样，只不过后端的部分内容要修改一下
后端部分

前端部分

jQuery发送一个ajax请求的综合方法

这章知识若有不理解的地方，回看https://www.bilibili.com/video/BV1QA411W7s7/?spm_id_from=333.999.0.0的23集，从第14分钟开始

jQuery发送一个ajax请求的promise形式

回调函数

promise的形式


两种形式都会执行，因为都是回调

注：选择一种形式就行，不要两种都使用

ajax发送跨域请求

• jQuery发送jsonp请求
  
  

后端返回jsonp数据的方法

返回一个函数调用，为对象的形式

18.ajax的全局钩子函数

每一个请求发送出去之前，都会执行一下a函数，请求完成之后会执行b函数，每次创建ajax对象之前会执行c函数

所以，abcd这几种函数就被称作钩子函数

即在同一作用域下有多个ajax请求发生之前会发生ajaxStart()函数

可以看到，ajaxStart()函数先运行，在运行ajax的请求



显示为

只要有请求发送就会响应一次ajaxSend（）函数


显示为

只要成功发送一次请求，就会执行一次ajaxSuccess（）函数

同理


也与上同理

不论成功还是失败，都会发送请求

19.jQuery的多库并存

所以，jQuery提供了一种方法来把变量名的所有权交出去
使用方法

语法

第三个有点类似于变量的赋值

20.深浅拷贝

赋值的语法，这里是把o1与o2空间共享，使用同一属性

浅拷贝还是具有一定的局限性

• 方案一：
  使用递归的思想来实现方便的深拷贝
  
  利用这样一个函数就可以实现深拷贝了，但是，这个函数严格意义上不是递归

• 方案二：
  使用json
  
  只需一行！wc

jQuery的深浅拷贝

语法

21.jQuery的插件扩展

方法一：

相当于自己写函数扩展到jQuery中去使用
示例代码

jquery没有操作cookie的方法

方法二：

就相当于写一个函数添加到jQuery的原型$中去
具体实例

22.jQuery的入口函数

即$().ready(function(){})与window.onload功能相同

但是很明显，$().ready(function(){})的速度快于window.onload