Jquery选择器（一）

最新推荐文章于 2021-11-28 14:34:43 发布
最新推荐文章于 2021-11-28 14:34:43 发布
阅读量263 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/erchouchou/article/details/81537073
版权

基础选择器和层次选择器省略

基本选择器：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<script type="text/javascript" src="js/jquery-1.8.2.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元素的内容
			//html()要用于html/jsp，不能用在xml
			//text()既能用于html/jsp，且能用于xml
			//alert( $("ul li:first").text() );
		
	  	//2)查找UL中最后个元素的内容
	  	    //alert( $("ul li:last").text() );
	  	
	  	//4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
	  		//alert($("table tr:odd").size());
	  	
	  	//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
	  		//alert($("table tr:even").size());
	  	
	  	//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
	  		//html()：强调的是标签中的内容，即便标签中的子标签，也会显示出来
	  		//text()：强调的是标签中的文本内容，即便标签中的子标签，也只会显示出文本内容，不会显示子标签
	  		//alert($("table tr:eq(1)").text());
	  	    //alert($("table tr:odd:first").text());
	  	//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
	  		//alert($("table tr:gt(0)").size());
	  	
	  	//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
	  		//alert($("table tr:lt(4)").size());
	  	
	  	//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
	  		//$(":header").css("background-color","red").css("color","blue");
	  	
	  	//10)查找所有[未]选中的input为checkbox的元素个数
			//alert($(":checkbox:not(:checked)").size());
			
	</script>
	
  </body>
</html>

内容选择器：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.8.2.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元素的个数
		    //alert($("div:contains('John')").size());
	  	//2)查找所有p元素为空的元素个数
	  		//alert( $("p:empty").size() );
	  	
	  	//3)给所有包含p元素的div元素添加一个myClass样式
	  		$("div:has(p)").addClass("myClass");
	  	
	  	//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
	  		//alert( $("p:parent").size() );
	  		
	</script>

  </body>
</html>

 

eRRRchou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jq的选择器
KingRH的博客
11-19 918
jq选择器 文章目录jq选择器选择器1基本选择器2层次选择器3过滤选择器 选择器 我们先复习一下js的选择器都有些什么 常见的有 id选择器，类选择器，属性选择器，标签名选择器 随便一个id选择器 <script> var p=document.getElementById("id") p.onclick=function(){ console.log("这是js写法") } </script> 如代码所示获得的i
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
JQ选择器
weixin_33744854的博客
11-21 164
JQ 选择器大全 2010-05-26 15:29:03| 分类： 电脑技术 | 标签： |字号大中小订阅 一、基本选择器 选择器 描 述 返回 示例 #id 根据给定id匹配一个元素 单个元素 $("#test") 选取id为test的元素 .class 根据给定类名匹配一个元素 集合元素 $(".test") 选取c...
jQuery选择器【学习】
weixin_30814329的博客
08-01 143
$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名...
jQuery 选择器
yang_mysky的专栏
11-04 318
<br /><br />选择器允许您对元素组或单个元素进行操作。jQuery 选择器<br />学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。<br />jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。<br />选择器允许您对 HTML 元素组或单个元素进行操作。<br />在 HTML DOM 术语中：<br />选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。jQuery 元素选择器<br />jQuery 使用 CSS 选择
详解jQuery选择器
10-20
jQuery的核心特性之一是其链式语法，即开发者可以在一个语句中连续进行多个操作，而且jQuery选择器不仅继承了CSS选择器的风格，还扩展了其功能。 在使用jQuery选择器时，需要注意的是jQuery对象和DOM对象是两个不同...
jQuery 选择器理解
10-29
jQuery选择器是基于jQuery库的一个核心组件，其作用是为了快速简便地从文档对象模型（DOM）中选择元素。选择器的使用是通过在jQuery函数$中使用不同的语法来实现的。下面将详细介绍jQuery选择器的各个知识点。 ### ...
jquery 选择器部分整理
10-29
jQuery选择器是jQuery库中最基本且强大的特性之一，它允许开发者快速准确地选取和操作DOM元素。在详细解读jQuery选择器之前，首先需要了解jQuery本身是一个JavaScript库，它通过简化的选择器和方法来简化HTML文档...
Jquery选择器 $实现原理
10-29
要了解JQuery选择器$的实现原理，首先需要理解JavaScript中函数作用域与闭包的概念。JQuery是一个封装了大量DOM操作的JavaScript库，它将常用的DOM操作方法封装成函数，并通过$符号作为快捷访问方式。 JQuery在加载...
jQ选择器
u013464954的专栏
11-01 644
1.基本选择器 *(所有元素) .class(类选择器) element(标签选择器) #id(id选择器) selector1, selectorN, ...(并列选择器) 2.层次选择器 parent > child(下一层的子元素) ancestor descendant(所有的后代) prev + next(下一个兄弟节点) prev ~ siblings(下面所有的兄弟节点)
jQuery选择器全解
weixin_30585437的博客
04-12 99
jQuery的选择器支持CSS3选择器标准. 下面是W3C最新的CSS3选择器标准:http://www.w3.org/TR/css3-selectors/ 1. 基础选择器 Basics 根据元素Id选择 $(“divId”) 选择ID为divId的元素 element 根据元素的名称选择, $(“a”) 选择所有<a>元素 .class 根据元素的css类选择 $...
jq选择器
梓洋的博客
09-25 237
基本选择器 1.id选择器：选择id为q的元素-->$("#q") 2.类选择器：选择class为q的元素--> $(".q") 3.标签选择器：选择元素名为div的元素--> $("div") 选择全部元素--> $("*") 选择所有span元素和id为tank的div元素 -->$("#tank,span") 层次...
JQ 选择器
weixin_55032665的博客
11-28 487
JQ 选择器 $("*") 选择所有的元素 $(“#id ”) #符号后面加ID名称，ID选择器 $(“.class”) .符号后面加类名，类选择器 $("p") 标签选择器 $(". class. class ") 多重选择器 :first 例：$("p:first") 选择第一个 p 标签 :last 例：$("p: last") 选择最后一个 p标签 :even 例 $(“p:even”) 选择偶数 p标签 :odd 例 $(“p:odd”) 选择奇数 p标签 :e...
jQuery选择器详解与应用
"jQuery选择器全解：包括动态创建DOM元素、封装DOM对象以及文档就绪的简写方式。此内容详细介绍了jQuery选择器的使用，特别是jQuery支持的不仅是CSS选择器，还包括自定义选择器。jQuery选择器分为‘选择’和‘过滤’...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值