JQuery（选择器重点）

最新推荐文章于 2022-08-03 13:52:55 发布

Bug_marker

最新推荐文章于 2022-08-03 13:52:55 发布

阅读量687

点赞数

分类专栏： Web 文章标签： maven spring xml

本文链接：https://blog.csdn.net/Bug_marker/article/details/121545617

版权

Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、什么是jquery

John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作

二、jquery 的优点

写少代码,做多事情【write less do more】
免费，开源且轻量级的js库，容量很小

注意：项目中，提倡引用min版的js库

兼容市面上主流浏览器，例如 IE，Firefox，Chrome

注意：jQuery不是将所有JS全部封装，只是有选择的封装

能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
文档手册很全，很详细
成熟的插件可供选择
提倡对主要的html标签提供一个id属性，但不是必须的
出错后，有一定的提示信息
不用再在html里面通过<script>标签插入一大堆js来调用命令了

三、jquery开发步骤

①引用第三方js库文件

<script type="text/javascript" src="js/jquery-3.6.0.js"></script>

②查阅并使用api手册

$("#divID").html()/val()/text()/css("color","red")/....

//var divElement = document.getElementById("divID");
var $div = $("#divID");
//var html = divElement.innerHTML;
var html = $div.html();
alert(html);

四、js（Java Script）和 jquery 对象相互转换

（1）什么是js对象及代码规则

就是使用js-API，即Node接口中的API或是传统JS语法定义的对象，叫做js对象
js代码规则----divElement
var divElement = document.getElementById("divID");
var nameArray = new Array(3);

（2）什么是jQuery对象及代码规则

就是使用jQuery-API，返回的对象就叫做jQuery对象
jQuery代码规则----$div
var $div = $("#divID")

（3）js对象转成jQuery对象【重点】

语法：$(js对象)---->jQuery对象
例如：$(divElement)---->$div
例如：$(this)---->$this
注意：jQuery对象将js对象做了封装，js对象二边无引号

var inputElement = document.getElementById("inputID");//js对象 
var $input = $(inputElement);//jquery对象
var txt = $input.val();
alert(txt);

（4）jQuery对象转成js对象

语法1：jQuery对象[下标，从0开始]
语法2：jQuery对象.get(下标，从0开始)
例如：$div[0]---->divElement
注意：不同的对象只能调用对应的api方法，即jQuery对象不能调用js对象的api，反之亦然
$div.innerHTML（错）
divElement.html(错)

var $div = $("#divID");//jquery对象
var divElement = $div[0];//js对象(方式一)
//var divElement = $div.get(0);//js对象(方式二)
var txt = divElement.innerHTML;		  
alert(txt);

五、js对象和jQuery对象的区别

（1）js对象的三种基本定位方式

       （A）通过ID属性：document.getElementById()

       （B）通过NAME属性：document.getElementsByName()

       （C）通过标签名：document.getElementsByTagName()

（2）jQuery对象的三种基本定位方式

       （A）通过ID属性：$("#id属性值")

       （B）通过标签名：$("标签名")

       （C）通过CLASS属性：$(".样式名")

（3）js对象出错的显示

没有合理的提示信息
例如：alert(document.getElementById("usernameIDD").value)

（4）jQuery对象出错的显示

有合理的提示信息，例如：undefined
例如：alert($("#usernameIDD").val())

六、jQuery九类选择器【参见jQueryAPI.chm手册】

目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签

基本选择器【参见01_selector.html】

①标签选择器（元素选择器）

②类选择器

③多选择器

④id选择器

⑤通配符选择器

⑥后代选择器

⑦子选择器

⑧相邻兄弟选择器

⑨通用兄弟选择器

⑩并集选择器

⑪交集选择器

层次选择器【参见02_selector.html】
增强基本选择器【参见03_selector.html】
内容选择器【参见04_selector.html】
可见性选择器【参见05_selector.html】：hidden|visible
属性选择器【参见06_selector.html】
子元素选择器【参见07_selector.html】
表单选择器【参见08_selector.html】
表单对象属性选择器【参见09_selector.html】

<!--01_selector.html-->
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>
  	
  	<div id="div1ID">div1</div>
  	<div id="div2ID">div2</div>
  	<span class="myClass">span</span>
  	<p>p</p>
  	
  	<script type="text/javascript">
  	
   	//1)查找ID为"div1ID"的元素个数——id选择器
    console.log($("#div1ID").length)
   	
  	//2)查找DIV元素的个数——标签选择器
    console.log($("div").length)
  	
  	//3)查找所有样式是"myClass"的元素的个数——类名选择器
    console.log($(".myClass").length)
  	
  	//4)查找所有DIV,SPAN,P元素的个数——多选择器
    console.log($("div,span,p").length)
  	
  	//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
    console.log($("#div1ID,.myClass,p").length)
  	
  	</script>
  </body>
</html>

 <!--02_selector.html-->
 <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>
     
    <input type="radio" value="z"/>
	<input type="radio" value="e"/>
	<input type="radio" value="y"/>
	
	<form>
		<input type="text" value="a"/>		
		<table>
			<tr>
				<td>
					<input type="checkbox" value="b"/>
				</td>
			</tr>			
		</table>
	</form>
	<input type="radio" value="ccccccccc"/>
	<input type="radio" value="d"/>
	<input type="radio" value="e"/>
	<script type="text/javascript">
	
	//1)找到表单form里所有的input元素的个数——后代选择器
	console.log($("form input").length)
	
  	//2)找到表单form里所有的子级input元素个数——子选择器
  	console.log($("form>input").length)
  	
  	//3)找到表单form同级第一个input元素的value属性值——相邻兄弟选择器
  	console.log($("form + input").val())
  	
  	//4)找到所有与表单form同级后面的input元素个数——通用兄弟选择器
  	console.log($("form~input").length)
  	
	</script>
  </body>
</html>

<!--03_selector.html-->
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>
	
	<ul>
	    <li>list item 1</li>
	    <li>list item 2</li>
	    <li>list item 3</li>
	    <li>list item 4</li>
	    <li>list item 5</li>
	</ul>
	
	<input type="checkbox" checked/>
	<input type="checkbox" checked/>
	<input type="checkbox"/>
	
	<table border="1">
	  <tr><td>line1[0]</td></tr>
	  <tr><td>line2[1]</td></tr>
	  <tr><td>line3[2]</td></tr>
	  <tr><td>line4[3]</td></tr>
	  <tr><td>line5[4]</td></tr>
	  <tr><td>line6[5]</td></tr>
	</table>	
	
	<h1>h1</h1>
	<h2>h2</h2> 
	<h3>h3</h3>
	
	<p>p</p>
	
	<script type="text/javascript">
		//1)查找UL中第一个LI元素的内容——后代选择器
		console.log($("ul li:first").html())
		//console.log($("ul li:first").text())
	  	//2)查找UL中最后个li元素的内容
	  	console.log($("ul li:last").html())
	  	
	  	//4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
	  	console.log($("table tr:odd").length)
	  	
	  	//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
	  	console.log($("table tr:even").length)
	  	
	  	//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
	  	console.log($("table tr:eq(1)").text())
	  	
	  	//7)查找表格中复合条件的个数，即索引值比2大
	  	console.log($("table tr:gt(2)").length)
	  	
	  	//8)查找表格复合条件的个数，即索引值比2小
	  	console.log($("table tr:lt(2)").length)
	  	
	  	//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
	  	$(":header").css("background-color","red").css("color","blue");
	  	
	  	//3)查找所有[未]选中的input为checkbox的元素个数
	  	console.log($(":checkbox:not([checked])").length)
			
	</script>
	
  </body>
</html>

<!--04_selector.html-->
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
    <style type="text/css">
    	.myClass{
    		font-size:44px;
    		color:blue
    	}
    </style>
  </head>
  <body>
	
	<div><p>John Resig</p></div>
	<div><p>George Martin</p></div>
	<div>Malcom John Sinclair</div>
	<div>J. Ohn</div>
	<div></div>

	<p></p>
	<p></p>
	
	<script type="text/javascript">
	
		//1)查找所有包含文本"John"的div元素的个数
		console.log($("div:contains('John')").length)
		
	  	//2)查找所有p元素为空的元素个数
	  	console.log($("p:empty").length)
	  	
	  	//3)给所有包含p元素的div元素添加一个myClass样式
	  	//$("div:has(p)").attr("class","myClass");
	  	//$("div:has(p)").addClass('myClass');
	  	//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
	  	console.log($("p:parent").length)
	  		
	</script>

  </body>
</html>

<!--05_selector.html-->
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>
	
	<table border="1" align="center">
	  <tr style="display:none">
	  	<td>Value 1</td>
	  </tr>
	  <tr>
	  	<td>Value 2</td>
	  </tr>
	  <tr>
	  	<td>Value 3</td>
	  </tr>
	</table>
	
	<script type="text/javascript">
		//1)查找隐藏的tr元素的个数
		console.log($("tr:hidden").length)
		
  		//2)查找所有可见的tr元素的个数
  		console.log($("tr:visible").length)
	</script>
	
  </body>
</html>

<!--06_selector.html-->
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>
	
	<div>
	  <p>Hello!</p>
	</div>
	<div id="test2"></div>
	
	<input type="checkbox" name="newsletter" value="Hot Fuzz"/>
	<input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
	<input type="checkbox" name="newsaccept" value="Evil Plans" />
	
	 
	<!-- <input type="checkbox" name="letternews" value="Hot Fuzz"/>
	<input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" />
	<input type="checkbox" name="accNEWSept" value="Evil Plans" /> -->
	
	
	<script type="text/javascript">
	
		//1)查找所有含有id属性的div元素个数
		console.log($("div[id]").length)
			
	 	//2)查找所有name属性是newsletter的input元素，并将其选中
	 	//$("input[name='newsletter']").attr("checked","checked")
	 	
	  	//3)查找所有name属性不是newsletter的input元素，并将其选中
	  	//$("input[name!='newsletter']").attr("checked","checked")
	  	//4)查找所有name属性以'news'开头的input元素，并将其选中
	  	//$("input[name^='news']").attr("checked","checked")
			  	
	  	//5)查找所有name属性以'letter'结尾的input元素，并将其选中
	  	//$("input[name$='letter']").attr("checked","checked")
	  	
	  	//6)查找所有name属性包含'news'的input元素，并将其选中
	  	//$("input[name*='news']").attr("checked","checked")
	  	
	  	//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
	  	$("input[id][name$='letter']").attr("checked","checked")
	  	
	</script>
	
  </body>
</html>

<!--07_selector.html-->
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>
	
	<ul>
	  <li>John</li>
	  <li>Karl</li>
	  <li>Brandon</li>
	</ul>
	
	<ul>
	  <li>Glen</li>
	  <li>Tane</li>
	  <li>Ralph</li>
	</ul>
	
	<ul>
	  <li>Marry</li>
	</ul>

    <ul>
	  <li>Jack</li>
	</ul>
	
	
	<script type="text/javascript">
	
		/*1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始*/
		// $("ul li:first-child").each(function (i,e) {
		// 	console.log($(e).html())
		// })
			
	 	/*2)迭代每个ul中最后1个li元素中的内容,索引从1开始*/
	 // 	$("ul li:last-child").each(function (i,e) {
		// 	console.log($(e).html())
		// })
	 	
		/*4)迭代每个ul中第2个li元素中的内容,索引从1开始*/
		// $("ul li:nth-child(2)").each(function (i,e) {
		// 	console.log($(e).html())
		// })
	
	 	//3)在ul中查找是唯一子元素的li元素的内容
	 	$("ul li:only-child").each(function (i,e) {
			console.log($(e).html())
		})
		
		
		
	</script>
  </body>
</html>

<!--08_selector.html-->
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>
	<form>
	    <input type="button" value="Input Button"/><br/>
	    <input type="checkbox" /><br/>
	    <input type="file" /><br/>
	    <input type="hidden" name="id" value="123"/><br/>
	    <input type="image" src="../images/lb.jpg" width="25px" height="25px"/><br/>
	    <input type="password" /><br/>
	    <input type="radio" /><br/>
	    <input type="reset" /><br/>
	    <input type="submit" /><br/>
	    <input type="text" /><br/>
	    <select><option>Option</option></select><br/>
	    <textarea></textarea><br/>
	    <button>Button</button><br/>
	</form>
	
	<script type="text/javascript">
	
		//1)查找所有input元素的个数
		console.log($(":input"))	
			
	  	//2)查找所有文本框的个数
	  	console.log($(":text"))
	  	
	  	//3)查找所有密码框的个数
	  	console.log($(":password"))
	  	
	  	//4)查找所有单选按钮的个数
	  	console.log($(":radio"))
	  	
	  	//5)查找所有复选框的个数
	  	console.log($(":checkbox"))
	  	
	  	//6)查找所有提交按钮的个数
	  	console.log($(":submit"))
	  	
	  	//7)匹配所有图像域的个数
	  	console.log($(":image"))
	  	
	  	//8)查找所有重置按钮的个数
	  	console.log($(":reset"))
	  	
	  	//9)查找所有普通按钮的个数
	  	console.log($(":button"))
	  	
	 	//10)查找所有文件域的个数
	 	console.log($(":file"))
	 	
	 	//11)查找所有input元素为隐藏域的个数
	 	console.log($(":hidden"))
	 	
	</script>
  </body>
</html>

<!--09_selector.html-->
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>
	
	<form>

	  <input type="text" name="email" disabled="disabled" />
	  <input type="text" name="password" disabled="disabled" />
	  <input type="text" name="id" />

	  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
	  <input type="checkbox" name="newsletter" value="Weekly" />
	  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
	
      <select id="provinceID">
		  <option value="1">广东</option>
		  <option value="2" selected="selected">湖南</option>
		  <option value="3">湖北</option>
	  </select>
		
	</form>
	
	
	
	<script type="text/javascript">
	
		//1)查找所有可用的input元素的个数
		console.log($("input:enabled"))
		
	 	//2)查找所有不可用的input元素的个数
	 	console.log($("input:disabled"))
	 	
	 	//3)查找所有选中的复选框元素的个数
	 	console.log($(":checkbox:checked"))
		 	
	 	//4)查找所有未选中的复选框元素的个数
	 	console.log($(":checkbox:not(:checked)"))
	 	
	 	//5)查找所有选中的选项元素的个数
	 	console.log($("select option:selected"))
	 	
	</script>
	
  </body> 
</html>

Bug_marker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery（选择器重点）

一、什么是jqueryJohn Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作二、jquery 的优点写少代码,做多事情【write less do more】免费，开源且轻量级的js库，容量很小注意：项目中，提倡引用min版的js库兼容市面上主流浏览器，例如 IE，Firefox，Chrome注意：jQuery不是将所有JS全部封装，只是有选择的封装能够处理HTML/JSP/...
复制链接

扫一扫