复习jQuery？看这个就够了

最新推荐文章于 2022-11-16 13:17:36 发布

VGtime

最新推荐文章于 2022-11-16 13:17:36 发布

阅读量629

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/JKR10000/article/details/108090444

版权

这篇博客详尽地介绍了jQuery的使用，包括jQuery的顶级对象$、DOM对象与jQuery对象的区别与转换，以及选择器、API接口、动画效果、属性与内容操作、元素操作和事件处理。此外，还探讨了jQuery对象的拷贝和多库共存的解决方案，是学习jQuery不可多得的资源。

摘要由CSDN通过智能技术生成

1 jQuery的基本使用

1.1 jQuery的顶级对象$

1.$是jQuery的别称，在代码中可以使用jQuery代替 $，但一般为了方便，通常都直接使用$。
2.$是jQuery的顶级对象，相当于原生js中的windows，把元素包装成jQuery对象，就可以调用jQuery的方法

1.2 jQuery对象和DOM对象区别

1.用原生js获取的对象就是DOM对象
2.jQuery方法获取的元素就是jQuery对象
3.jQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组形势储存）

1.3 jQuery对象和DOM对象转换

1.DOM对象转化为jQuery对象：$(DOM对象)

var div = document.querySelector("div");
$("div");

2.jQuery对象转化为DOM对象（两种方式）

$("div")[index]; //方式一，index是伪数组索引号

$("div").get(index); //方式二，index是伪数组索引号

2 jQuery的选择器

2.1 jQuery的基础选择器

名称	用法	描述
ID选择器	$("#id")	获取所以指定ID的元素
全选选择器	$("*")	获取所有元素
类选择器	$(".class")	获取该类名的所有元素
标签选择器	$(“div”)	获取该标签的所有元素
并集选择器	$(“div,p,li”)	获取多个元素
交集选择器	$(“li.currect”)	获取带有current类的li标签

2.2 jQuery的筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	选择索引号为2的元素，也就是获取3个li元素
:odd	$("#li:odd")	选取索引号为奇数的元素
:even	$(“li:even”)	选取索引号为偶数的元素

3 jQuery的常用的API接口

3.1jQuery的筛选方法

语法	用法	说明
parent	$(“li:”).parent()	获取父级元素
children(selector)	$(“ul”).children(“li”)	相当于子代选择器$(“ul>li”)
find(selector)	$(“ul”).find(“li”)	相当于后代选择器$(“ul li”)
siblings(selector)	$(".first").siblings(“li”)	查找兄弟节点，不包括自己
nextAll([expr])	$(".first").nextAll()	查找当前元素之前的兄弟节点
prevtAll([expr])	$(".first").prevtAll()	查找当前元素之后的兄弟节点
hasClass(class)	$(“div”).hasClass(“current”)	查找当前元素是否含有某个特定的类，如果有返回true
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”),index从0开始

3.2 操作css方法

jQuery可以使用css方法来修改元素样式，也可以操作类，修改多个样式
1.参数只写属性名，则返回属性值

$(this).css("color");

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css("height","500px");
//相当于
$(this).css("height",500px);
//相当于
$(this).css("height",500);

3.参数可以是对象形式，方便设置多组样式，属性名和属性值用逗号隔开，不带有‘-’的属性可以不用加引号

$(this).css({
   "color":"white","font-size":"20px"});
//相当于
$(this).css({
   
	"color":"white",
	"font-size":"20px"
});
//相当于
$(this).css({
   
	 color:"white",
	"font-size":"20px"  //注意如果属性带有-，则必须加上引号
});
//如下的做法是错误的
/*
$(this).css({
	 color:"white",
	font-size:"20px" //报错
});
*/