JavaWEB-（三十六）JQuery入门二

本文最后更新于：December 4, 2021 pm

JQuery是一个快速、简洁的JavaScript框架。JQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

目录

1.DOM对象与JQuery对象相互转化

JQuery确实能给我们带来很多方便，但毕竟JQuery是封装了原生JS的，所以在一定程度上，原生JS有的JQuery却没有。比如：video中的自动播放play()属性。

1.1 DOM对象转JQuery对象

这个比较简单。两种用法。

1
2
3
4
5
6
7
8
<body>
	<video width="800" height="" src="moo.mp4" muted></video>
	<script type="text/javascript">
		$('video') // 方法1
		var myvi = document.querySelector('video');
		$(myvi)  //方法2
	</script>
</body>

1.2 JQuery对象转DOM对象

JQuery获取到的是一个伪数组。两种方式。

1
2
3
4
5
6
7
<body>
		<video width="800" height="" src="moo.mp4" muted></video>
		<script type="text/javascript">
			$('video')[0].play() //方法1
			$('video').get(0).play()  //方法2
		</script>
	</body>

2.JQuery常用API

关系选择器：

    1. 后代选择器：选择所有合乎规则的后代元素。空格连接。（ul li）
    1. 相邻后代选择器（子选择器）：仅仅选择合乎规则的直系儿子元素，孙子、重孙元素忽略。（ul>li）
    1. 兄弟选择器：选择当前元素后面的所有合乎规则的兄弟元素。（ul~div）
    1. 相邻兄弟选择器：仅仅选择当前元素相邻的那个合乎规则的兄弟元素。（ul+div）

2.1 基本和层次选择器

用法：$(“选择器”) ：写CSS选择器即可。

名称 用法 描述
ID选择器 $(“#id”) 获取指定id的元素
全选选择器 $(“*“)（单、双引号均可） 匹配所有元素
类选择器 $(“.class”) 获取同类元素
标签选择器 $(“div”) 获取同标签元素
并集选择器 $(“div,p,li”) 获取多个元素
交集选择器 $(“li.current”) 交集元素

2.2 筛选选择器

语法 用法 描述
:first $(‘li:first’) 获取第一个li元素
:last $(‘li:last’) 获取最后一个li元素
:eq(index) $(“li:eq(2)”) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd $(“li:odd”) 获取到的li元素中，选择索引号为奇数的元素
:even $(“li:even”) 获取到的li元素中，选择索引号为偶数的元素

2.3 筛选方法

语法 用法 描述
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]) $(“.last”).prevAll() 查找当前元素之前所有的同辈元素
hasClass(class) $(‘div’).hasClass(“protected”) 检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index) $(“li”).eq(2) 相当于$(“li:eq(2)”),index从0开始

3.JQuery样式操作

3.1 操作CSS方法

JQuery可以使用CSS方法来修改简单元素样式；也可以操作类，修改多个样式。

  1. 参数只写属性名，则是返回属性值。
1
$(this).css("height");

如：

1
2
3
4
<div style="width: 200px;height: 300px;"></div>
		<script type="text/javascript">
		console.log($('div').css("height")) //300px
		</script>
  1. 设置一组样式。参数是属性名，属性值，用逗号分割。属性必须加引号，值如果是数字可以不用跟单位和引号。
1
2
3
4
5
6
7
8
<body>
	<div style="width: 200px;height: 300px;"></div>
	<script type="text/javascript">
	console.log($('div').css("height")) //300px
	$('div').css("height",200)
	console.log($('div').css("height")) //200px 就是输出的200px，不是200
	</script>
</body>
  1. 设置多组样式。参数是对象形式，属性名和属性值用冒号隔开，属性与属性之间用逗号分割。属性可以不加引号。如果属性是复合属性，则必须采取驼峰命名法，如：background-color 要写成：backgroundColor，例如：$(‘div’).css({height:200,width:100,backgroundColor:”red”})
1
2
3
4
5
6
7
8
9
10
11
12
<body>
		<div style="width: 200px;height: 300px;"></div>
		<script type="text/javascript">
		console.log($('div').css("height")) //300px
		console.log($('div').css("width")) //200px
		$('div').css({"height":"200px","width":"100px"})
// $('div').css({"height":200,"width":100})
// $('div').css({height:200,width:100})
		console.log($('div').css("height")) //200px
		console.log($('div').css("width")) //100px
		</script>
	</body>

3.2 设置类样式方法

  1. 添加类
1
$("div").addClass("current");
  1. 移除类
1
$("div").removeClass("current");
  1. 切换类

有则移除，无则加上。

1
$("div").toggleClass("current");

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css">
			div{
				width: 200px;
				height: 300px;
				background-color: green;
			}
			.current{
				background-color: red;
			}
		</style>

<body>
		<div></div>
		<script type="text/javascript">
		$("div").click(function(){
			$(this).addClass("current");
		});
		
		</script>
	</body>

其他同理。