jQuery

最新推荐文章于 2023-07-07 14:28:52 发布
最新推荐文章于 2023-07-07 14:28:52 发布
阅读量308 收藏 2
点赞数 2
分类专栏： Java Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43907332/article/details/86768016
版权

文章目录

write less,do more

在这里插入图片描述
解决了浏览器兼容性的问题

  1. 首先要引入他的包在这里插入图片描述
    然后和要编程的代码放在同一文件夹下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//ready方法的作用是当页面中的dom加载完毕后执行参数中的函数
$(document).ready(function() {
	alert("Hello World");
});

</script>
</head>
<body>

</body>
</html>
  1. 我们看一下window的onload的方法和jQuery的ready方法之间的差别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function test1() {
	alert("hello");
}

function test2() {
	alert("world");
}

window.onload = test1;
window.onload = test2;
</script>
</head>
<body>

</body>
</html>

结果为world

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	alert("hello");
});

$(document).ready(function() {
	alert("world");
});
</script>
</head>
<body>

</body>
</html>

结果为hello，world

Dom对象与jQuery对象之间的转换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function () {
	var myLinks = document.getElementsByTagName("a");
	
	for(var i = 0; i < myLinks.length; i++){
		myLinks[i].onclick = function () {
			alert("Hello world");//给每一个超链接对象附加onclick属性
		}
	}
}
</script>
</head>
<body>

<a href="#">test1</a><br>
<a href="#">test2</a><br>
<a href="#">test3</a><br>
<a href="#">test4</a><br>
<a href="#">test5</a><br>

</body>
</html>

DOM转jQuery

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("a").click(function () {
		alert("Hello world");
	});
});
</script>
</head>
<body>

<a href="#">test1</a><br>
<a href="#">test2</a><br>
<a href="#">test3</a><br>
<a href="#">test4</a><br>
<a href="#">test5</a><br>

</body>
</html>

$(“a”);a为标签名
$("#clickme");clickme为id，必须加#
jQuery转DOM

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var pElement = document.getElementsByTagName("p")[0];
	//将DOM对象转换为jQuery对象
	var pElementjQuery = $(pElement);
	
	//alert("DOM对象结果：" + pElement.innerHTML);
	//alert("jQuery对象结果：" + pElementjQuery.html());
	
	var cm = $("#clickMe");//获得的是jQuery对象
	//jQuery对象转换为DOM对象(第一种方式)
	var t = cm[0];//t是DOM对象
	alert(t.innerHTML);
	//jQuery对象转换为DOM对象(第二种方式)
	var s = cm.get(0);
	alert(s.innerHTML);//s是DOM对象
	
});
</script>
</head>
<body>
<p id="clickMe">点击我</p>
</body>
</html>

jQuery基本选择器深度解析

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

</script>
</head>
<body>
<a id="hello" href="http://www.baidu.com" style="color:blue;">click me</a>

<script type="text/javascript">
//读是一个参数，写是两个参数
alert($("#hello").css("color"));
$("#hello").css("color", "red");

</script>

</body>
</html>

如果属性不存在，不会报错，只是把它忽略

复习CSS选择器

选择器语法描述示例
标签选择器E{CSS规则}以文档元素作为选择符 td{font-size:14px;
width:120px;}
a{text-decoration:none;}
ID选择器#ID{CSS规则}以文档元素的唯一标识符ID作为选择符 #note{font-size:14px;
width:120px;}
类选择器E.className{CSS规则}以文档元素的class作为选择符 div.note{font-size:14px;}
.dream{font-size:14px;}
群组选择器E1,E2,E3{CSS规则}多个选择符应用同样的样式规则td,p,div.a{font-size:14px}
后代选择器E F{CSS规则}元素E的任意后代元素F#links a{color:red;}
通配选择符*{CSS规则}以文档的所有元素作为选择符*{font-size:14px}

jQuery选择器

  1. $ ()函数在很多JavaScript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。其中，$("#ID")用来代替document.gerElementById()函数，即通过ID获取元素： $ (“tagName”)用来代替document.getElementsByTagName（）函数，即通过标签名获取HTML元素；其他选择。

  2. jQuery选择器的分类
    – 基本选择器 （basic）
    – 层次选择器 （level）
    – 过滤选择器 （filter）
    – 表单选择器 （form）

基本选择器（basic）

jQuery 基本选择器
1）$ (“#id”)，根据 id 值找到匹配的元素，最多只返回一个元素（如果该元素存在），如果不存在，则返回一个空的 jQuery对象。
2）$ (“.class”)，根据 css 的 class 属性来返回一个集合，无论该 css 类是否真的存在，只要定义在元素中就能被 jQuery 查询到。

选择器描述返回示例
#id根据给定的id匹配一个元素单个元素$ ("#test")选取id为test的元素
.class根据给定的类名匹配元素集合元素$ (".test")选取所有class为test的元素
element根据给定的元素名匹配元素集合元素$ ("p")选取所有的< p>元素
*匹配所有元素集合元素$ ("*")选取所有的元素
selector,selector2,......,selectorN将每一个选择器匹配到的元素合并后一起返回集合元素$ ("div,span,p.myClass")选取所有< div>,< span>和拥有class为myClass的< p>标签的一组元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	alert($("#test1").html());
	alert($(".test").length);
});
</script>
</head>
<body>

<a id="test1" class = "test" href="http://www.baidu.com">baidu</a>
<a id="test1" class = "test" href="http://www.yahoo.com">yahoo</a>

</body>
</html>

结果为百度，说明尽管有两个id为test1的标签，但是只能获取第一个，原因是，js规定id是唯一标识，但我们命名为两个也不会报错。
结果为2说明，jQuery不会看css是否真正定义test这个class只是看class是否为test。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
	//基本选择器
	$(document).ready(function () {
		//找到所有id为one的组件将背景变为红色
		$("#button1").click(function() {
			$("#one").css("background", "red");
		});
		//找到所有class为mini的组件将背景变为绿色
		$("#button2").click(function () {
			$(".mini").css("background", "green");
		});
		//找到所有div将背景变为黄色
		$("#button3").click(function () {
			$("div").css("background", "yellow");
		});
		//找到所有组件将背景变为蓝色
		$("#button4").click(function () {
			$("*").css("background", "blue");
		});
		//找到span组件，id为two的组件，和class为mini的组件，将背景变为粉色
		$("#button5").click(function () {
			$("span, #two, .mini").css("background", "pink");
		});
	});
	
</script>
</head>
<body>
<h3>基本选择器</h3>

<input type="button" value="test1" id="button1">
<input type="button" value="test2" id="button2">
<input type="button" value="test3" id="button3">
<input type="button" value="test4" id="button4">
<input type="button" value="test5" id="button5">

<div class="one" id="one">
	id为one，class为one的div。
	<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
	id为two，class为one，title为test的div。
	<div class="mini" title="other">class为mini，title为other</div>
	<div class="mini" title="test">class为mini，title为test</div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini"></div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini，title为tesst</div>
</div>

<div class="none" style="display: none;">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>

<div>包含input的type为"hidden"的div
	<input type="hidden" size="8">
</div>
</body>
</html>

div,span,p{
	width:140px;
	height:140px;
	margin:5px;
	background:#aaa;
	border:#000 1px solid;
	float:left;
	font-size:17px;
	font-family:Verdana;
}
div.mini{
	width:55px;
	height:55px;
	background-color:#aaa;
	font-size:12px;
}
div.hide{
	display:none;
}

在这里插入图片描述

层次选择器（level）

选择器描述返回示例
$ ("ancestor descendant")选取ancestor元素里的所有descendant（后代）元素集合元素$ ("div span")选取< div>里的所有的< span>元素
$ ("parent > child")选取parent元素下的child（子）元素，与$ ("ancestor descendant")有区别，$ ("ancestor descendant")选择的是后代元素集合元素$ ("div > span")选取< div>元素下元素名是< span>的子元素
$ ('prev + next')选取紧接在prev元素的next元素集合元素$ ('.one + div')选取class为one的下一个< div>元素
$ ('prev~siblings')选取prev元素之后的所有siblings元素集合元素$ ('#two~div')选取id为two的元素后面的所有< div>兄弟元素

等价关系

选择器方法
等价关系$ (".one + div");$ (".one").next("div");>
等价关系$ ("#prev~div");$ ("#prev").nextAll("div");
$ ("#prev~div")选择器只能选择"#prev"元素后面的同辈< div>元素。而siblings（）方法与前后位置无关，只要是同辈节点就都能匹配。 
	$('#prev~div').css("background", "#bbffaa");//选取#prev之后的所有同辈div元素
	$('#prev').nextAll("div").css("background", #bbffaa);//同上
	$("#prev").siblings("div").css("background", "bbffaa");//选取#prev所有的同辈div元素，无论前后位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
	//层次选择器
	$(document).ready(function () {
		//找到body组件下的后代div（包括直接div和间接的div），将背景变为红色
		$("#button1").click(function() {
			$('body div').css("background", "red");
		});
		//找到body的儿子（直接div），将背景变为蓝色
		$("#button2").click(function () {
			$('body > div').css("background","blue");
		});
		//找到所有class为one的下一个div（找结束符的下一个组件），将背景变为绿色
		$("#button3").click(function () {
			//$('.one + div').css("background", "green");
			$(".one").next('div').css("background", "green");
		});
		//找到id为two的后面的所有兄弟节点，将背景变为橘黄色。
		$("#button4").click(function() {
			//$('#two ~ div').css("background", "orange");
			$('#two').nextAll('div').css("background", "orange");
		});
		//找到id为three的所有兄弟div节点，将背景变为粉色
		$("#button5").click(function () {
			$("#four").siblings("div").css("background", "pink");
		});
	});
</script>
</head>
<body>
<h3>层次选择器</h3>

<input type="button" value="test1" id="button1">
<input type="button" value="test2" id="button2">
<input type="button" value="test3" id="button3">
<input type="button" value="test4" id="button4">
<input type="button" value="test5" id="button5">

<div class="one" id="one">
	id为one，class为one的div。
	<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
	id为two，class为one，title为test的div。
	<div class="mini" title="other" id="three">class为mini，title为other</div>
	<div class="mini" title="test">class为mini，title为test</div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini" id="four">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini"></div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini，title为tesst</div>
</div>

<div class="none" style="display: none;">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>

<div>包含input的type为"hidden"的div
	<input type="hidden" size="8">
</div>
</body>
</html>

在这里插入图片描述

过滤选择器 （filter）

– 基本过滤
– 内容过滤
– 可见性过滤
– 属性过滤
– 子元素过滤
– 表单对象属性过滤

基本过滤

选择器描述返回示例
:first选取第一个元素单个元素$ ("div: first")选取所有< div>元素中第1个< div>元素
:last选取最后一个元素单个元素$ ("div: last")选取所有< div>元素中最后一个< div>元素
:not(selector)去除所有与给定选择器匹配的元素集合元素$ ('input:not(.myClass)")选取class不是myClass的< input>元素
:even选取索引是偶数的所有元素，索引从0开始集合元素$ ('input:even")选取索引是偶数的< input>元素
:odd选取索引是奇数的所有元素，索引从0开始集合元素$ ('input:odd")选取索引是奇数的< input>元素
:eq(index)选取索引等于index的元素（index从0开始）单个元素$ ('input:eq(1)")选取索引等于1的< input>元素
:gt(index)选取索引大于index的元素（index从0开始）集合元素$ ('input:gt(1)")选取索引大于1的< input>元素（注：大于1，而不包括1）
:lt(index)选取索引小于index的元素（index从0开始）集合元素$ ('input:lt(1)")选取索引小于1的< input>元素（注：小于1，而不包括1）
:head选取所有的标题元素，例如h1,h2,h3等等集合元素$ (':header")选取网页中所有的< h1>,< h2>,< h3>......
:animated选取当前正在执行动画的所有元素集合元素$ ('div:animated")选取正在执行动画的< div>元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
	$(document).ready(function () {
		//选取第一个div元素将背景变为红色
		$("#button1").click(function () {
			$("div:first").css("background","red");
		});
		//选取最后一个div元素将背景变为蓝色
		$("#button2").click(function () {
			$("div:last").css("background","blue");
		});
		//选取偶数div元素将背景变为蓝色
		$("#button3").click(function () {
			$("div:even").css("background","green");
		});
		//选取奇数div元素将背景变为蓝色
		$("#button4").click(function () {
			$("div:odd").css("background","yellow");
		});
		//选取索引为3div元素将背景变为蓝色
		$("#button5").click(function () {
			$("div:eq(3)").css("background","pink");
		});
		//选取索引不为1div元素将背景变为紫色
		$("#button6").click(function () {
			$("div:not(.one)").css("background","purple");
		});
		//选取索引大于3div元素将背景变为橄榄色
		$("#button7").click(function () {
			$("div:gt(3)").css("background","olive");
		});
		//选取索引小于3div元素将背景变为深蓝色
		$("#button8").click(function () {
			$("div:lt(3)").css("background","navy");
		});
		//选取标题元素将背景变为#cdefab色
		$("#button9").click(function () {
			$(":header").css("background","#cdefab");
		});
	});
</script>
</head>
<body>
<h3>基本过滤选择器</h3>

<input type="button" value="test1" id="button1">
<input type="button" value="test2" id="button2">
<input type="button" value="test3" id="button3">
<input type="button" value="test4" id="button4">
<input type="button" value="test5" id="button5">
<input type="button" value="test6" id="button6">
<input type="button" value="test7" id="button7">
<input type="button" value="test8" id="button8">
<input type="button" value="test9" id="button9">


<div class="one" id="one">
	id为one，class为one的div。
	<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
	id为two，class为one，title为test的div。
	<div class="mini" title="other">class为mini，title为other</div>
	<div class="mini" title="test">class为mini，title为test</div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini"></div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini，title为tesst</div>
</div>

<div class="none" style="display: none;">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>

<div>包含input的type为"hidden"的div
	<input type="hidden" size="8">
</div>
</body>
</html>

在这里插入图片描述

内容过滤

选择器描述返回示例
:contains(test)选取含有文本内容为"text"的元素集合元素$ ("div:contains('我')")选取含有文本'我'的< div>元素
:empty选取不包含子元素或文本的空元素集合元素$ ("div:empty")选取不包含子元素（包括文本元素）的< div>空元素
:has(selector)选取含有选择器所匹配的元素的元素集合元素$ ("div:has(p)")选取含有< p>元素的< div>元素
:parent选取含有子元素或者文本的元素集合元素$ ("div:parent")选取拥有子元素（包括文本元素）的< div>元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
	//没有参数默认为document
	$().ready(function () {
		//筛选出包含test的div将背景变红
		$("#button1").click(function () {
			$("div:contains('test')").css("background", "red");
		});
	});
	//简化版也可以
	$(function () {
		//选取所有不包含子元素或文本的div将背景变蓝
		$("#button2").click(function () {
			$("div:empty").css("background", "blue");
		});
		//选取所有包含class为迷你的div将背景变绿
		$("#button3").click(function () {
			$("div:has(.mini)").css("background", "green");
		});
		//选取所有包含子元素或文本元素的div将背景变#abcdef
		$("#button4").click(function () {
			$("div:parent").css("background", "#abcdef");
		});
	});
</script>
</head>
<body>
<h3>内容过滤选择器</h3>

<input type="button" value="test1" id="button1">
<input type="button" value="test2" id="button2">
<input type="button" value="test3" id="button3">
<input type="button" value="test4" id="button4">


<div class="one" id="one">
	id为one，class为one的div。
	<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
	id为two，class为one，title为test的div。
	<div class="mini" title="other">class为mini，title为other</div>
	<div class="mini" title="test">class为mini，title为test</div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini"></div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini，title为test</div>
</div>

<div class="none" style="display: none;">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>

<div>包含input的type为"hidden"的div
	<input type="hidden" size="8">
</div>
</body>
</html>

在这里插入图片描述

可见性过滤

选择器描述返回示例
:hidden选取所有不可见的元素集合元素$ (":hidden")选取所有不可见的元素。包括< input type="hidden"/>, < div style"display:none;">和< div style="visiblity:hidden;">等元素。如果只想选取< input>元素，可以使用$ ("input:hidden")
:visible选取所有可见的元素集合元素$ ("div:visible")选取所有可见的< div>元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
	$(function () {
		//提示不可见的div的数量和input的数量
		$("#button1").click(function () {
			alert($('div:hidden').length);
			alert($('input:hidden').length);
			
			$('div:hidden').show(5000).css("background", "#cdefab")
		});
		//将可见的div的的背景变为#cdefab色
		$("#button2").click(function () {
			$('div:visible').css("background", "#cdefab")
		});
	});
</script>
</head>
<body>
<h3>可见性过滤选择器</h3>

<input type="button" value="test1" id="button1">
<input type="button" value="test2" id="button2">

<div class="one" id="one">
	id为one，class为one的div。
	<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
	id为two，class为one，title为test的div。
	<div class="mini" title="other">class为mini，title为other</div>
	<div class="mini" title="test">class为mini，title为test</div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini"></div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini，title为tesst</div>
</div>

<div class="none" style="display: none;">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>

<div>包含input的type为"hidden"的div
	<input type="hidden" size="8">
</div>
</body>
</html>

在这里插入图片描述

属性过滤

选择器描述返回示例
[attribute]选取拥有此属性的元素集合元素$ ("div[id]")选取拥有属性id的元素
[attribute=value]选取属性的值为value的元素集合元素$ ("div[title=test]")选取属性title为"test"的< div>元素
[attribute!=value]选取属性的值不等于value的元素集合元素$ ("div[title!=test]")选取属性title不等于"test"的< div>元素（注意：没有属性title的< div>元素也会被选取）
[attribute^=value]选取属性的值以value开始的元素集合元素$ ("div[title^=test]")选取属性title以"test"开始的< div>元素
[attribute$ =value]选取属性的值以value结束的元素集合元素$ ("div[title$ =test]")选取属性title以"test"结束的< div>元素
[attribute*=value]选取属性的值含有value的元素集合元素$ ("div[title*=test]")选取属性title含有"test"的< div>元素
[selector1][selector2][selectorN]用属性选择器合并成一个复合选择器，满足多个条件，每选择一次，缩小一次范围集合元素$ ("div[id][title$ =test]")选取拥有属性id，并且属性title以"test"结束的< div>元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
$(function () {
	//将有title的div背景变为红色
	$("#button1").click(function () {
		$('div[title]').css("background", "red");
	});
	//将title=test的div背景变为绿色
	$("#button2").click(function () {
		$("div[title=test]").css("background", "green");
	});
	//将title！=test的div变为粉色
	$("#button3").click(function () {
		$("div[title!=test]").css("background", "pink");
	});
	//将title以test为开头的div变为粉色
	$("#button4").click(function () {
		$("div[title^=test]").css("background", "blue");
	});
	//将title以st为开头的div变为粉色
	$("#button5").click(function () {
		$("div[title$=st]").css("background", "yellow");
	});
	//将title包含s的div变为#cbadff色
	$("#button6").click(function () {
		$("div[title*=s]").css("background", "#cbadff");
	});
	//将包含id且title以t开头以t结尾的div变为#accdfd色
	$("#button7").click(function () {
		$("div[id][title^=t][title$=t]").css("background", "#accdfd");
	});
});
</script>
</head>
<body>
<h3>属性过滤选择器</h3>

<input type="button" value="test1" id="button1">
<input type="button" value="test2" id="button2">
<input type="button" value="test3" id="button3">
<input type="button" value="test4" id="button4">
<input type="button" value="test5" id="button5">
<input type="button" value="test6" id="button6">
<input type="button" value="test7" id="button7">

<div class="one" id="one">
	id为one，class为one的div。
	<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
	id为two，class为one，title为test的div。
	<div class="mini" title="other">class为mini，title为other</div>
	<div class="mini" title="test">class为mini，title为test</div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini" title="testhaha"></div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini" title="tesst">class为mini，title为tesst</div>
</div>

<div class="none" style="display: none;">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>

<div>包含input的type为"hidden"的div
	<input type="hidden" size="8">
</div>
</body>
</html>

在这里插入图片描述

子元素过滤

选择器描述返回示例
:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素.(index从1算起）集合元素:eq(index)只匹配一个元素。而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的
:first-child选取每个父元素的第一个子元素集合元素:first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。例如$ ("ul li:first-child");选取每个< ul>中第一个< li>元素
:last-child选取每个父元素的最后一个子元素集合元素同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素。例如$ ("ul li:first-child");选择每个< ul>中最后一个< li>元素
:only-child如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配集合元素$ ("ul li:only-child")在< ul>中选取是唯一子元素的< li>元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
$(function () {
	//将class为one的div下的第2个子元素背景变为红色（index从1开始）
	$("#button1").click(function () {
		$("div.one :nth-child(2)").css("background", "red");
	});
	//将class为one的div下的第1个子元素背景变为绿色
	$("#button2").click(function () {
		$("div.one :first-child").css("background", "green");
	});
	//将class为one的div下的最后1个子元素背景变为粉色
	$("#button3").click(function () {
		$("div.one :last-child").css("background", "pink");
	});
	//将class为one的div下的只有1个子元素的子元素背景变为蓝色
	$("#button4").click(function () {
		$("div.one :only-child").css("background", "blue");
	});
});
</script>
</head>
<body>
<h3>属性过滤选择器</h3>

<input type="button" value="test1" id="button1">
<input type="button" value="test2" id="button2">
<input type="button" value="test3" id="button3">
<input type="button" value="test4" id="button4">


<div class="one" id="one">
	id为one，class为one的div。
	<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
	id为two，class为one，title为test的div。
	<div class="mini" title="other">class为mini，title为other</div>
	<div class="mini" title="test">class为mini，title为test</div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini" title="testhaha"></div>
</div>

<div class="one">
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini">class为mini</div>
	<div class="mini" title="tesst">class为mini，title为tesst</div>
</div>

<div class="none" style="display: none;">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>

<div>包含input的type为"hidden"的div
	<input type="hidden" size="8">
</div>
</body>
</html>

在这里插入图片描述

表单对象属性过滤

选择器描述返回示例
:enabled选取所有可用元素集合元素$ ("#form1 :enabled");选取id为"form1"的表单内的所有可用元素
:disabled选取所有不可用元素集合元素$ ("#form2 :disabled")选取id为"form2"的表单内的所有不可用元素
:checked选取所有被选中的元素（单选框，复选框）集合元素$ ("input:checked");选取所有被选中的< input>元素
:selected选取所有被选中的选项元素（下拉列表）集合元素$ ("select :selected");选取所有被选中的选项元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
	//将form1中的可用的input元素除了type为button的元素的值变为hello world
	$("#button1").click(function() {
		$("#form1 input:not([type=button]):enabled").val("hello world");
	});
	//将form1中的不可用的input元素的值变为welcome
	$("#button2").click(function() {
		$("#form1 input:disabled").val("welcome");
	});
	//将复选框中选中的数量显式出来b为粗体
	$("input:checkbox").click(function() {
		$("b:eq(0)").text($("input:checked").length);
	});
	//change是只有改变的时候才执行，
	$("select:eq(0)").change(function() {
		var str = "";
		
		$("select:eq(0) option:selected").each(function() {
			str += $(this).text() + ",";
		});
		
		$("div:eq(1)").html("<b>" + str + "</b>");
	});
});
</script>
</head>
<body>
  <h3> 表单对象属性过滤选择器.</h3>
   <form id="form1" action="#">
<input type="button" value="对表单内可用input赋值操作" id="button1" class='test'>
<input type="button" value="对表单内不可用input赋值操作" id="button2" class='test'>

<br /><br />
	
     可用元素：<input name="add" value="可用文本框"/>  <br/>
     不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
     可用元素： <input name="che" value="可用文本框" /><br/>
	 不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
	 <br/>
     多选框：<br/>
	 <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
     <input type="checkbox" name="newsletter" value="test2" />test2
     <input type="checkbox" name="newsletter" value="test3" />test3
     <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
     <input type="checkbox" name="newsletter" value="test5" />test5
	 <div><font color='blue'><b>2</b></font></div>

	 <br/><br/>
     下拉列表1：<br/>
	<select name="test" multiple="multiple" style="height:100px">
		<option>上海</option>
		<option selected="selected">香港</option>
		<option>北京</option>
		<option selected="selected">河北</option>
		<option>广东</option>
		<option>重庆</option>
    </select>
    
     <br/><br/>
     下拉列表2：<br/>
	 <select name="test2" >
    <option>海南</option>
    <option>上海</option>
    <option selected="selected">北京</option>
    <option>云南</option>
    <option>广州</option>
    <option>贵州</option>
    </select>
	<br/><br/>

     <div></div>
	 <div></div>
  </form>

</body>
</html>

在这里插入图片描述

表单选择器
选择器描述返回示例
:input选取所有的< input>、< textarea>、< select>和< button>元素集合元素$ (":input")选取所有< input>、< textarea>、< select>和< button>元素
:text选取所有的单行文本框集合元素$ (":text")选取所有的单行文本框
:password选取所有的密码框集合元素$ (":password")选取所有的密码框
:radio选取所有的单选框集合元素$ (":radio")选取所有的单选框
:checkbox选取所有的多选框集合元素$ (":checkbox")选取所有的复选框
:submit选取所有的提交按钮集合元素$ (":submit")选取所有的提交按钮
:image选取所有的图像按钮集合元素$ (":image")选取所有的图像按钮
:reset选取所有的重置按钮集合元素$ (":reset")选取所有的重置按钮
:button选取所有的按钮集合元素$ (":button")选取所有的按钮
:file选取所有的上传域集合元素$ (":file")选取所有的上传域
:hidden选取所有不可见元素集合元素$ (":hidden")选取所有的不可见元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
	//空格别忘加
	//文本框的个数
	//alert($("#form1 :text").length);
	//单选按钮的个数
	//alert($("#form1 :radio").length);
	//复选框的个数
	//alert($("#form1 :checkbox").length);
	//提交按钮的个数
	//alert($("#form1 :submit").length);
	//总共15个button也算，并且复选框一个选项算一个，
	//找的是所有的<input>、<textarea>、<select>和<button>元素
	alert($("#form1 :input").length);
	//总共12个找的是所有的input元素，层次选择器
	alert($("#form1 input").length);
});
</script>
</head>
<body>
<body>
  <form id="form1" action="#">
    <input type="button" value="Button"/><br/>
    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
    <input type="file" /><br/>
    <input type="hidden" /><div style="display:none">test</div><br/>
    <input type="password" /><br/>
    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
    <input type="reset" /><br/>
    <input type="submit" value="提交"/><br/>
    <input type="text" /><br/>
    <select><option>Option</option></select><br/>
    <textarea rows="5" cols="20"></textarea><br/>
    <button>Button</button><br/>
  </form>
 
  <div></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

问题

$(“#myForm :input”)与 $(“#myForm input”)的区别是什么？

• $(“#myForm :input”)会获取到所有input,textarea,select及button元素
• $(“#myForm input”)或获取到所有的input元素（层次选择器）

我们把之前的表单在用jQuery重写一遍，发现简化很多。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
	$("#table1 tbody tr:odd").css("background", "red");
	$("#table1 tbody tr:even").css("background", "blue");
});
</script>
</head>
<body>
<table id="table1" border="1" align="center" width="80%">
<tbody>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>

<tr>
<td>world</td>
<td>world</td>
<td>world</td>
</tr>

<tr>
<td>welcome</td>
<td>welcome</td>
<td>welcome</td>
</tr>

<tr>
<td>aaaaa</td>
<td>aaaaa</td>
<td>aaaaa</td>
</tr>

<tr>
<td>bbbbb</td>
<td>bbbbb</td>
<td>bbbbb</td>
</tr>

<tr>
<td>ccccc</td>
<td>ccccc</td>
<td>ccccc</td>
</tr>

<tr>
<td>ccccc</td>
<td>ccccc</td>
<td>ccccc</td>
</tr>

<tr>
<td>ddddd</td>
<td>ddddd</td>
<td>ddddd</td>
</tr>

</tbody>
</table>
</body>
</html>
我一定要成为架构师
关注
专栏目录
jQuery选择器
m0_57774967的博客
06-16 4713
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
JQuery的引用
zwjl1017的博客
04-01 4084
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3476
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery 遍历对象
m0_67458498的博客
03-28 4277
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3745
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jquery在线引用
jiufu_的博客
07-15 5104
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 5374
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jQuery-3.4.1下载
cheng1a的博客
02-11 5513
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery引入方式
m0_67388537的博客
07-07 3285
jQuery的两种引入方式
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
Java Web Jquery表单验证
最新发布
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
JavaBean
张议的博客
01-30 3897
文章目录JavaBean的概念JSP与JavaBean搭配使用的优点JavaBean的特征JSP访问JavaBean的语法导入JavaBean类声明JavaBean对象属性以及用法访问JavaBean属性&lt; jsp:getProperty&gt;&lt; jsp:setProperty&gt;属性JavaBean的范围JavaBean在page范围内JavaBean在request范围内Ja...
Java Web 前端知识了解
张议的博客
01-26 1269
文章目录HTMLCSS（层叠样式表）当多于一种的样式指定一HTML元素时使用怎样的样式CSS语法The class Selevtor（选择器类）The id Selevtor（id选择器）CSS注释怎么样使用CSS外部样式表内嵌样式表行内样式Http协议Http协议介绍浏览器与服务器通信的过程（Http 1.0）持续链接（Persistent Connections）HTTP URLURL 与UR...
JavaScript
张议的博客
02-05 1203
文章目录学习运用JavaScript脚本语言JavaScript脚本程序的几种基本格式：使用JavaScript协议：声明变量：变量作用域：（方式、位置）对象日期对象的方法：数组对象数组对象的属性：数组对象的方法：字符串对象；建立字符串对象：字符串对象的属性：字符串对象的方法：自定义对象事件处理程序定时器：setTimeout()：setInterval()：clearInterval()：终止定...
Servlet技术
张议的博客
01-31 821
文章目录Servlet简介Servlet API源码面前，了无秘密ServletRequest接口ServletRequest接口中常用的方法ServletResponse接口ServletResponse接口的主要方法Servlet的生命周期Servlet的初始化阶段Servlet的响应客户请求阶段Servlet的终止阶段Tomcat请求参数源代码深度解析Web应用何时会被启动ServletCo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值