jquery相关知识点总结

朴灿烈づ我的快乐病毒、 2021-12-22 22:43 320阅读 0赞

## 1、jquery概念 ##

是js的一个类库 （对js中某些功能的封装）  
用jq实现的功能一定能用js实现 反过来 不一定，js实现的功能jq不一定能实现。

## 2、jquery好处 ##

a、代码简洁 b、兼容性好 c、最少的代码做多的事情 d、性能支持比较好  
e、节约学习成本 f、让DOM操作变的简单

jQuery框架支持链式写法  
jQuery框架实现了跨浏览器的兼容包括IE低版本  
jQuery1.x版本支持低版本IE浏览器  
可以操作css3样式  
jquery可以和原生js结合一起使用setTimeout( function()\{ jq代码 \},1000 )  
注意 ： 原生DOM对象不能使用jquery对象 操作方法 document.getElementById("").dom的操作方式  
jquery的对象不能使用原生dom操作方法  
用jq实现的用js一定能实现 反过来不一定  
选择器、属性操作、样式操作、内容操作、文档操作(dom)、 动画 、事件处理 、 ajax 、jq插件

## 3、jquery选择器 ##

$是jQuery的简写 含义一样  
$ 符号 是一个函数 function  
$() 返回值是对象object类型 同 jQuery()  
也就是 $() 等价 jQuery()  
注意 ： 通过jquery方式查找到的元素 不能使用js的方式操作 样式、属性、内容… $("").style.color = “” 错  
通过js方式查找到的元素 不能使用jq的各种方法操作 样式、属性、内容… document.getElementById().css() 错  
![在这里插入图片描述][20190629222036300.png]  
基本选择器 ：  
id选择器 $("\#id名")  
类选择器 $(".class名")  
标签选择器 $(“html标签”)  
组合选择器 $(“id,class”)  
通用选择器 $("\*") 查找所有的标签  
层级选择器 :  
空格 查找当前元素里面的所有后代元素

>        查找当前元素里面的所有子代元素
    +        查找当前元素下面的紧邻的兄弟节点
    ~        查找当前元素下面的所有的兄弟节点

![层级选择器][20190629223202302.png]  
查找过滤选择器(都是方法) ：  
first() $(“li”).first() ：first  
last() :last  
eq(下标) 下标从0开始 等价 :eq(下标)  
find() $(“div.box”).find(“span”) 查找给定元素的后代  
children() 查找给定元素的子代 $().children(“span”) $().children()  
next() $(“p”).next() $(“p”).next(“span”)指定的下一个元素  
prev() 前一个 用法同next()  
nextAll() 下面所有的 可以指定参数 也可以不指定  
prevAll() 前一个所有  
siblings() 除了自身之外的所有兄弟元素（也可以指定参数）  
parent() 查找某个元素的父元素  
filter() 参数可以是一个回调函数  
$(“p”).filter(function()\{  
return 条件；返回满足某个条件的p元素  
\})  
not() 除了…之外 :not

![查找过滤选择器具体用法][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]

## 4、jquery中的样式操作 ##

css() 获取样式 $().css(“color”)  
用法 ： .css(“样式”,“值”)  
.css(\{ “样式”:“值” ，“样式”:“值”,…\})  
.addClass(“类名”) 添加样式类 .removeClass() 删除样式类  
hasClass()判断一个元素是否含有某个样式类 返回布尔值 toggleClass(切换样式类)

![jq样式获取][jq]

## 5、jquery中查找元素下标 ##

index() 查找该元素在同辈元素中的位置

## 6、jquery对象和dom对象的互换问题 ##

dom对象转成jq对象 ： $( dom对象 )  
var obj = document.getElementById(“box”)  
$( obj )  
jq对象转化成dom对象 ：  
$().get(下标)—dom对象  
$()\[下标\] —dom对象  
var $list = $(“li”);  
$list.get(2)  
$list\[2\]  
![在这里插入图片描述][20190629223438217.png]  
7、属性操作  
attr() 获取或设置标签元素的属性 (该方法不能操作属性值是布尔类型的属性 比如 ： checked 操作布尔类型属性 用 prop() )  
获取 ： 对象.attr()  
设置 ： 对象.attr(“属性”,“值”)  
对象.attr(\{  
属性 ： 值,  
…  
\})  
![属性操作][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]  
8、jquery中的样式操作  
css() 获取样式  
用法 ： .css(“样式”,“值”)  
.css(\{ “样式”:“值” ，“样式”:“值”,…\})  
.addClass(“类名”) 添加样式类 .removeClass() 删除样式类 判断样式类 hasClass

9、jquery中的内容操作  
标签 ：  
html() 获取或设置 非表单元素的内容 设置内容html()方法会识别标记 获取时只获取第一个  
text() 纯文本操作 获取时获取所有的元素内容  
表单 ：  
val() 获取或设置表单元素的内 获取：无参数 设置 ：有参数  
![jquery中的内容操作][jquery]  
10、jquery的文档操作  
append() 向指定的父元素后添加新子元素  
appendTo() 将某个子元素添加到指定的父元素后面  
prepend() 前置新内容  
prependTo()  
after()  
insertAfter()  
before()  
insertBefore()  
![jquery的文档操作位置详解][jquery 1]  
empty() 清空  
remove() 删除所有  
detach() 删除某个指定的元素  
clone() 克隆  
wrap() 把所有的元素用新创建的元素包裹起来  
replaceWith() 将所有的元素替换成指定的元素 移动不是复制  
replaceAll() 用匹配的元素替换掉所有 selector匹配到的元素  
![动态创建][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]![动态创建][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 3]

//三级联动  
![三级联动详解][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 4]

[20190629222036300.png]: /images/20211220/9256fb744cb142edafbebf082b10f2a4.png
[20190629223202302.png]: /images/20211220/41d0585c2e964cefa38ac2d661dd45bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20211220/eb6d6a4cc0204ecda16009fddcb4078c.png
[jq]: /images/20211220/4d72bdec13f5495c8693972f457d2bd9.png
[20190629223438217.png]: /images/20211220/0444ccf9f1834315b0837f1d99bb2f0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]: /images/20211220/6fd73c20f8dd477fb001667eafda9b26.png
[jquery]: /images/20211220/7bd9ba1972e7486eb701518c47e8a8ee.png
[jquery 1]: /images/20211220/cbb9405c1a114e28ac296bbb3b56e5c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190629224237766.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 3]: /images/20211220/4de8a0a4913e415bb9b3c188061ac449.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 4]: /images/20211220/1afd03b70e9a4a829474bfa9392ea78b.png