初识jQuery-CSDN博客

本文链接：https://blog.csdn.net/whisper49/article/details/119977586

一、jQuery的概念

jQuery是一个快速的、简介的JS库；其封装了js常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。

二、jQuery的优点

轻量级：一个文件几十kb左右，不会影响页面加载速度
强大的选择器：jQuery包含从CSS1到CSS3几乎所有的选择器，开发者也可独创其他的选择器
DOM操作的封装：jQuery封装了大量常用的DOM操作，操作更简便
可靠的事件处理机制
完善的Ajax
跨浏览器兼容，基本兼容了现在主流的浏览器
链式操作和隐式迭代，不需要大量的循环结构，从而减少了代码量
行为层和结构层的分离
丰富的插件支持，如树形菜单、日期控件、轮播图等
有完善的文档，其免费、开源（任何人都可以自由地使用）

三、jQuery代码的编写

1.引入jQuery

在官方网站下载最新的jQuery库文件，将下载好的jquery.js放在script目录下，在<head>标签内引用即可

2.jQuery库类型的说明

名称	特点
jquery.js（开发版）	大小约为229KB ，完整无压缩，主要用于测试、学习和开发
jquery.min.js（生产版）	约31KB，压缩版，主要用于产品和压缩

3.jQuery的入口函数

在这里插入图片描述

四、jQuery对象和DOM对象

1.jQuery的顶级对象`$`

$是jQuery的别称，$可以用jQuery代替；
$是jQuery的顶级对象，相当于原生js中的window；把元素利用$包装成jQuery对象，就可以调用jQuery的方法

2.jQuery对象和DOM对象

（1）用原生JS获取来的对象就是DOM对象；其使用原生的JS属性和方法
（2））用jQuery方法获取的元素就是jQuery对象；jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）；其使用jQuery方法； jQuery对象：$('元素')
（3）jQuery对象和DOM对象的互换
原生js比jQuery更大，原生的一些属性和方法jQuery并没有封装，故需要调用这些属性和方法需要把jQuery对象转换为DOM对象才能使用
- DOM对象转换为jQuery对象：直接获取：$('元素')；已经用原生js获取了DOM对象，则通过$(DOM对象)
- jQuery对象转换为DOM对象：
（4）如果获取的是jQuery对象，则在变量名前面加上$符号，如var $a = jQuery对象
（5）jQuery常用插件

五、jQuery常用API（Application Programming Interface，应用程序接口）

1、jQuery选择器

（1）比较CSS选择器和jQuery选择器

CSS选择器是找到元素后添加样式
jQuery选择器是找到元素后添加行为，其功能更强大

（2）jQuery选择器的优点

写法简单：$()函数是一个选择器函数，如$("#id")相当于document.getElementById()函数
支持CSS1到CSS3选择器
机制完善：用jQuery判断某个元素在网页上是否存在时，用获取到的元素长度来判断或者转换为DOM对象判断，因为即使网页上没有该元素，但$('#id)获取的永远是对象。

在这里插入图片描述

（3）jQuery选择器

jQuery选择器（常用）

jQuery选择器

注意事项：

选择器中含有#、.等特殊字符，要用转义字符转义获取
选择器中带有空格
var $a = $('.test :hidden')，带有空格的选择器，其是后代选择器；选取的是类名为test的元素里面的隐藏元素
var $b=$('.test:hidden')，不带空格的选择器，其是过滤选择器；选取的是隐藏的类名为test的元素

2.隐式迭代

隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加这个方法，如
在这里插入图片描述

六、jQuery中的DOM操作

1.DOM操作的分类

DOM Core：js中的getElmentById()等方法都是其组成部分，任何支持DOM的程序设计语言都可使用它
HTML-DOM：处理web文档
CSS-DOM：获取和设置style对象的属性

2.jQuery中的DOM操作

1.查找节点（用选择器完成）

（1）查找元素节点：$('div')
（2）查找属性节点：查找到元素后可以attr()方法获取它的各种属性值
在这里插入图片描述

2.创建节点

（1）创建元素节点：var $li_1 = $("<li></li>")
（2）创建文本节点：直接在元素节点中添加文本内容即可：var $li_1 = $("<li>苹果</li>")
（3）创建属性节点：同上：var $li_1 = $("<li title='苹果'>苹果</li>")

3.插入节点

在这里插入图片描述

4.删除节点

（1）remove()方法：

从DOM中删除所有匹配的元素，删除某个节点后，该节点所包含的所有后代节点也被删除
可选择性删除元素：$("ul li").remove("li[title!=苹果]");将<li>元素中属性title不等于“苹果”的<li>元素删除掉
remove()方法并没有将元素从jQuery对象中删除，其返回值是一个指向已被删除的节点的引用，故之后可再使用这些元素

（2）detach()方法：

该方法同remove方法，但与remove不同的是，使用detach方法删除元素，所有绑定的事件、附加的数据等都会保留下来；而remove方法删除元素，该元素之前绑定的事件将失效

（3）empty()方法：

该方法是清空节点（清空元素里的内容），其能清空元素中的所有后代节点

5.复制节点

clone()方法，但被复制的新元素并不具有任何行为
让新元素也具有复制功能（如某些行为、事件），可给该方法传递一个参数true，表示复制元素的同时复制元素中所绑定的事件。如$(this).clone(true).appendTo("body")

6.替换节点

（1）replaceWith()方法
将所有匹配的元素都替换成指定的HTML或DOM元素，$("a").replaceWith("b")，用b替换a
（2）replaceAll()方法
同上，只是颠倒了操作，即$("a").replaceWith("b")，用a替换b

ps：若替换前该元素绑定了事件，替换后原先绑定的事件将与被替换的元素一起消失，需要在新元素上重新绑定事件

7.包裹节点

主要用于在文档外插入额外的结构化标记，其不会破坏原来文档的语义

（1）wrap(）方法

将所有的元素进行单独的包裹
$("a").wrap("b")，用b标签把a元素包裹起来，即bab bab

（2）wrapAll()方法

将所有匹配的元素用一个元素来包裹
$("a").wrap("b")，用b标签把所有的a元素包裹起来，即b a a a a a b

（3）wrapInner()方法

该方法将每一个匹配的元素的字内容（包括文本节点）用其他标记包裹起来
$("a").wrap("b")，即a标签内的内容被b标签包裹了，即<a>苹果<b>梨子</b></a>

8.属性操作

（1）获取属性：attr()方法，括号里传递一个参数，即属性名称，如var p=$("p").attr("title")，获取了p元素的节点属性title
（2）设置属性：attr()方法，传递两个参数，属性名称和对应的值，，如var p=$("p").attr("title","a")，var p = $("p").attr({"title":"a","name":"test"})
（3）删除属性：removeAttr()方法

在这里插入图片描述