jQuery

1.jQuery概述

jQuery是在JS基础上进行的封装,基础语言还是JS,简化JS语法。

2.jQuery对象和DOM对象

1.jQuery对象:
(1)jQuery对象是通过jQuery()或 $()包装DOM对象后产生的对象;
(2)jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法,eg: $("#id").html();
(3)jQuery对象无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的任何方法。
2.jQuery对象转成DOM对象:
(1)jQuery对象是一个数组对象,可以通过[index]的方法得到对应的DOM对象。
(2)使用jQuery中的get(index)方法得到相应的DOM对象。

		//jquery语法
		//var jobj = jquery("#txtid")
		var jobj = $("#txtid")//jquery对象
		console.log(jobj.val())
		
		//jquery对象转doom
		//var t = jobj[0]
		var t = jobj.get(0)
		console.log(t.value)

3.DOM对象转成jQuery对象:
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象。转换以后就可以使用jQuery中的方法了。

//dom转为jquery对象
var j = $(t);
console.log(j.val())

3.选择器

1.选择器是jQuery的根基,在jQuery中对事件处理,遍历DOM操作都依赖于选择器;
2.jQuery选择器的优点:简洁的写法;
3.基本选择器:
基本选择器是jQuery中最常用的选择器,也是最简单的选择器。
(1)id选择器:
$("#id")

var jobj = $("#txtid")//jquery对象
			console.log(jobj.val())

(2)标签选择器:
$(“标签名”)

//标签选择器
var j = $("input")
j.val("aaa")
console.log(j.val())

(3)类选择器
$(".class")

//类选择器
var j = $(".btn")
console.log(j.length)

(4)通配选择器
$("*")

//通配选择器
var j = $("*")
console.log(j.length)

(5)选择器组合
$("#id,.class,标签名")

//选择器组合
var j = $("#txtid,.btn")
console.log(j.length)

4.层次选择器
如果想通过DOM标签之间的层次关系来获取特定标签,则需要使用层次选择器:
(1)后代选择器(获得标签1所有的标签名为标签2的后代标签)
标签名1 标签名2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				var jobj = $("div ul")
				console.log(jobj.length)
			}
		</script>
	</head>
	<body>
		<div>
			<ul>第一个ul
				<ul>
					<li>第一个ul的第一个孙子</li>
					<li>第一个ul的第二个孙子</li>
				</ul>
			</ul>
			<ul>第二个ul
				<ul>
					<li>第二个ul的第一个孙子</li>
					<li>第二个ul的第二个孙子</li>
				</ul>
			</ul>
			<ul>第三个ul
				<ul>
					<li>第三个ul的第一个孙子</li>
					<li>第三个ul的第二个孙子</li>
				</ul>
			</ul>
		</div>
		<input type="button" value="操作" id="btn" onclick="test()" />
	</body>
</html>


在这里插入图片描述

(2)只考虑子节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				var jobj = $("div>ul")
				console.log(jobj.length)
			}
		</script>
	</head>
	<body>
		<div>
			<ul>第一个ul
				<ul>
					<li>第一个ul的第一个孙子</li>
					<li>第一个ul的第二个孙子</li>
				</ul>
			</ul>
			<ul>第二个ul
				<ul>
					<li>第二个ul的第一个孙子</li>
					<li>第二个ul的第二个孙子</li>
				</ul>
			</ul>
			<ul>第三个ul
				<ul>
					<li>第三个ul的第一个孙子</li>
					<li>第三个ul的第二个孙子</li>
				</ul>
			</ul>
		</div>
		<input type="button" value="操作" id="btn" onclick="test()" />
	</body>
</html>


在这里插入图片描述

(3)下一个兄弟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				var jobj = $("div+ul")
				console.log(jobj.length)
			}
		</script>
	</head>
	<body>
		<div>
			<ul>第一个ul
				<ul>
					<li>第一个ul的第一个孙子</li>
					<li>第一个ul的第二个孙子</li>
				</ul>
			</ul>
			<ul>第二个ul
				<ul>
					<li>第二个ul的第一个孙子</li>
					<li>第二个ul的第二个孙子</li>
				</ul>
			</ul>
			<ul>第三个ul
				<ul>
					<li>第三个ul的第一个孙子</li>
					<li>第三个ul的第二个孙子</li>
				</ul>
			</ul>
		</div>
		<ul>1</ul>
		<ul>2</ul>
		<input type="button" value="操作" id="btn" onclick="test()" />
	</body>
</html>

在这里插入图片描述
(4)表示下面所有的兄弟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				var jobj = $("div~ul")
				console.log(jobj.length)
			}
		</script>
	</head>
	<body>
		<div>
			<ul>第一个ul
				<ul>
					<li>第一个ul的第一个孙子</li>
					<li>第一个ul的第二个孙子</li>
				</ul>
			</ul>
			<ul>第二个ul
				<ul>
					<li>第二个ul的第一个孙子</li>
					<li>第二个ul的第二个孙子</li>
				</ul>
			</ul>
			<ul>第三个ul
				<ul>
					<li>第三个ul的第一个孙子</li>
					<li>第三个ul的第二个孙子</li>
				</ul>
			</ul>
		</div>
		<ul>1</ul>
		<ul>2</ul>
		<input type="button" value="操作" id="btn" onclick="test()" />
	</body>
</html>

在这里插入图片描述
5.过滤选择器
(1)基本过滤
:first 匹配获取第一个

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				var jobj = $("ul:first")
				console.log(jobj.html())
			}
		</script>
	</head>
	<body>
		<div>
			<ul id="ul1">第一个ul
				<ul id="ul1_1">
					<li>第一个ul的第一个孙子</li>
					<li>第一个ul的第二个孙子</li>
				</ul>
			</ul>
			<ul id="ul2">第二个ul
				<ul id="ul2_1">
					<li>第二个ul的第一个孙子</li>
					<li>第二个ul的第二个孙子</li>
				</ul>
			</ul>
			<ul id="ul3">第三个ul
				<ul id="ul3_1">
					<li>第三个ul的第一个孙子</li>
					<li>第三个ul的第二个孙子</li>
				</ul>
			</ul>
		</div>
		<ul>1</ul>
		<ul>2</ul>
		<input type="button" value="操作" id="btn" onclick="test()" />
	</body>
</html>

在这里插入图片描述
:last 匹配获取最后一个

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				var jobj = $("ul:last")
				console.log(jobj.html())
			}
		</script>
	</head>
	<body>
		<div>
			<ul id="ul1">第一个ul
				<ul id="ul1_1">
					<li>第一个ul的第一个孙子</li>
					<li>第一个ul的第二个孙子</li>
				</ul>
			</ul>
			<ul id="ul2">第二个ul
				<ul id="ul2_1">
					<li>第二个ul的第一个孙子</li>
					<li>第二个ul的第二个孙子</li>
				</ul>
			</ul>
			<ul id="ul3">第三个ul
				<ul id="ul3_1">
					<li>第三个ul的第一个孙子</li>
					<li>第三个ul的第二个孙子</li>
				</ul>
			</ul>
		</div>
		<ul>1</ul>
		<ul>2</ul>
		<input type="button" value="操作" id="btn" onclick="test()" />
	</body>
</html>

在这里插入图片描述
:even 索引为偶数的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				var jobj = $("ul:even")
				console.log(jobj.length)
			}
		</script>
	</head>
	<body>
		<div>
			<ul id="ul1">第一个ul
				<ol id="ul1_1">
					<li>第一个ul的第一个孙子</li>
					<li>第一个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul id="ul2">第二个ul
				<ol id="ul2_1">
					<li>第二个ul的第一个孙子</li>
					<li>第二个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul id="ul3">第三个ul
				<ol id="ul3_1">
					<li>第三个ul的第一个孙子</li>
					<li>第三个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul>1</ul>
			<ul>2</ul>
		</div>
		
		<input type="button" value="操作" id="btn" onclick="test()" />
	</body>
</html>

在这里插入图片描述
:odd 匹配索引为奇数的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				var jobj = $("ul:odd")
				console.log(jobj.length)
			}
		</script>
	</head>
	<body>
		<div>
			<ul id="ul1">第一个ul
				<ol id="ul1_1">
					<li>第一个ul的第一个孙子</li>
					<li>第一个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul id="ul2">第二个ul
				<ol id="ul2_1">
					<li>第二个ul的第一个孙子</li>
					<li>第二个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul id="ul3">第三个ul
				<ol id="ul3_1">
					<li>第三个ul的第一个孙子</li>
					<li>第三个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul>1</ul>
			<ul>2</ul>
		</div>
		
		<input type="button" value="操作" id="btn" onclick="test()" />
	</body>
</html>

在这里插入图片描述
:eq(index) 匹配指定索引

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				var jobj = $("ul:eq(1)")
				console.log(jobj.html())
			}
		</script>
	</head>
	<body>
		<div>
			<ul id="ul1">第一个ul
				<ol id="ul1_1">
					<li>第一个ul的第一个孙子</li>
					<li>第一个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul id="ul2">第二个ul
				<ol id="ul2_1">
					<li>第二个ul的第一个孙子</li>
					<li>第二个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul id="ul3">第三个ul
				<ol id="ul3_1">
					<li>第三个ul的第一个孙子</li>
					<li>第三个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul>1</ul>
			<ul>2</ul>
		</div>
		
		<input type="button" value="操作" id="btn" onclick="test()" />
	</body>
</html>

在这里插入图片描述
:lt(index) 匹配小于指定下标的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				var jobj = $("ul:lt(2)")
				console.log(jobj.length)
			}
		</script>
	</head>
	<body>
		<div>
			<ul id="ul1">第一个ul
				<ol id="ul1_1">
					<li>第一个ul的第一个孙子</li>
					<li>第一个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul id="ul2">第二个ul
				<ol id="ul2_1">
					<li>第二个ul的第一个孙子</li>
					<li>第二个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul id="ul3">第三个ul
				<ol id="ul3_1">
					<li>第三个ul的第一个孙子</li>
					<li>第三个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul>1</ul>
			<ul>2</ul>
		</div>
		
		<input type="button" value="操作" id="btn" onclick="test()" />
	</body>
</html>

在这里插入图片描述
:gt(index) 匹配大于指定下标的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				var jobj = $("ul:gt(2)")
				console.log(jobj.length)
			}
		</script>
	</head>
	<body>
		<div>
			<ul id="ul1">第一个ul
				<ol id="ul1_1">
					<li>第一个ul的第一个孙子</li>
					<li>第一个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul id="ul2">第二个ul
				<ol id="ul2_1">
					<li>第二个ul的第一个孙子</li>
					<li>第二个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul id="ul3">第三个ul
				<ol id="ul3_1">
					<li>第三个ul的第一个孙子</li>
					<li>第三个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul>1</ul>
			<ul>2</ul>
		</div>
		
		<input type="button" value="操作" id="btn" onclick="test()" />
	</body>
</html>

在这里插入图片描述
:empty 是否为空(0-不为空,1-为空)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function test(){
				var jobj = $("#ulE:empty")
				console.log(jobj.length)
			}
		</script>
	</head>
	<body>
		<div>
			<ul id="ul1">第一个ul
				<ol id="ul1_1">
					<li>第一个ul的第一个孙子</li>
					<li>第一个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul id="ul2">第二个ul
				<ol id="ul2_1">
					<li>第二个ul的第一个孙子</li>
					<li>第二个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul id="ul3">第三个ul
				<ol id="ul3_1">
					<li>第三个ul的第一个孙子</li>
					<li>第三个ul的第二个孙子</li>
				</ol>
			</ul>
			<ul>1</ul>
			<ul>2</ul>
			<ul id="ulE"></ul>
		</div>
		
		<input type="button" value="操作" id="btn" onclick="test()" />
	</body>
</html>

在这里插入图片描述
6.表单选择器
(1):input 匹配所有 input, textarea, select 和 button 元素
(2):text 查找所有的文本框
(3):password 匹配所有的密码框
(4):radio 匹配所有的单选按钮
(5):button 匹配所有的按钮
(6):submit 匹配所有的提交按钮
(7):reset 匹配所有的重置按钮
(8):image 匹配所有的图像域
(9):checkbox 匹配所有的选择框
(10):file 匹配所有的文件域
(11):hidden 匹配所有的不可见元素

4.jQuery操作标签属性

1.val()获得匹配的标签中第一个的值;
2.val(111)为所有匹配标签设置值;
3.attr(“属性”)获得匹配的标签中第一个指定属性的值,可以拿到自定义属性的值;
4.attr(“属性”,“属性值”)为匹配到的所有标签中的指定属性设置值;
5.prop(“属性”)只能获得标签中本身有的属性,操作一些true、false建议使用prop;
6.removeAttr(“属性”)删除属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<!-- jqurey搭建 -->	
	<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		function test(){
			var j = $("#txtid");
			j.val("aaa")//为所有匹配标签设置值  只能操作文本框的value属性
			console.log(j.val())//获得匹配的标签中第一个的值  只能操作文本框的value属性
			
			console.log(j.attr("aaa"))//获得标签指定属性的值,可以获得自定义的属性值
			j.attr("type","button");
			
			
			console.log(j.prop("type"))
			j.removeAttr("aaa")
			console.log(j)
			var c = $("#che")
			c.removeAttr("checked")
		}
		function add(){
			var d = $("#div")
			d.prop("style","background-color: red;")
		}
	</script>
	</head>
	<body>
		<input type="text" id="txtid" aaa="aa" />
		<input type="button" value="测试" onclick="test()" />
		<input type="checkbox" checked="checked" id="che" />
		<div id="div" >
			aaa
		</div>
		<input type="button" id="btn1" onclick="add()" />
	</body>
</html>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值