jQuery 选择器

最新推荐文章于 2020-07-02 14:29:25 发布
最新推荐文章于 2020-07-02 14:29:25 发布
阅读量403 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013636377/article/details/58588296
版权 
attribute_filter_selector.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>属性过滤选择器</title>
<script type="text/javascript" src="../jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
	$("div[id]").css("background","#0F0");        //具有id属性的元素的背景色
	$('div[id="hey"]').css("font-size","14px");    //id属性为hey元素的字体
	$('div[id!="hey"]').css("font-size","16px");    //id属性不为hey元素的字体		
	$('div[id^="the"]').css("color","#090");       //id属性以the开头的的前景色
	$('div[id$="be"]').css("color","#C00");		  //id属性以be结束的前景色
	$('div[id*="er"]').css("color","#360");		  //id属性值中包含er的前景色	    
});
</script>
</head>

<body>
 <div id="hey">具有id属性hey的元素</div>    
 <div id="there">具有id属性there的元素</div>   
 <div id="adobe">具有id属性adobe的元素</div>    
 <div>无id属性</div> 
</body>
</html>

simple_filter_selector.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>简单过滤选择器</title>
<style type="text/css">
  table{
	  border-collapse:collapse;
  }
  table, td, th{
     border:1px solid black;
  }    
  th{
	  width:100px;
  }
</style>
<script type="text/javascript" src="../jquery-1.11.2.js"></script>
<script type="text/javascript">
  $(document).ready(function(e) {
	 
     $("tr:first").css("background","#FF0");    //表格第一行显示黄色
     $("tr:last").css("background","#FCF");    //表格的最后一行显示暖红

//$("tr:odd ").css("background","#BBBBFF");	 //表格的奇数行显示蓝色 	
//$('tr:even ').css('background', '#DADADA');     //表格的偶数行显示灰色	

	 $("tr:even:not(:first)").css("background","#BBBBFF");  //偶数行，但滤除第一行。
     $("tr:odd:not(:last)").css("background","#DADADA");  // 奇数行，但滤除最后一行。  
	 
	  //$("tr:eq(4)").css("background","#F00");    //让第4行的背景为红色
	  //$("tr:gt(4)").css("background","#000");    //大于第4行的显示黑色
	  //$("tr:lt(2)").css("background","#FFC");     //小于第2行显示黄色
	 

});
</script>
</head>

<body>
<table width="600" border="1">
  <tr>
    <th scope="row">表格行1</th>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">表格行2</th>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">表格行3</th>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">表格行4</th>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">表格行5</th>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">表格行6</th>
    <td> </td>
  </tr>
</table>


</body>
</html>


content_filter_selector.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>内容过滤选择器示例</title>
<style type="text/css">
  table{
	  border-collapse:collapse;
  }
table, td, th{
     border:1px solid black;
  }    
body,td,th {
	font-size: 9pt;
}
</style>
<script type="text/javascript" src="../jquery-1.11.2.js"></script>
<script type="text/javascript">
   $(document).ready(function(e) {
   $("td:contains('张')").css("background","#FFC");   //将文字中含张的背景设置为淡黄 
   $("td:empty").css("background","#060");    //单元格中不包含内容的颜色，也不包含 空格的空单元格
   $("td:has(p)").css("background","#9F0");    //单元格中包含子元素<p>的颜色
   $("td:parent").css("color","#060");          //单元格中包含文本的前景色
   });
</script>
</head>

<body>
<table width="600" border="1">
  <tr>
    <td>张三丰</td>
    <td>何足道</td>
    <td>觉远大师</td>
  </tr>
  <tr>
    <td>常敬之</td>
    <td>张翠山</td>
    <td>天鹰教</td>
  </tr>
  <tr>
    <td>张五侠</td>
    <td> </td>
    <td>金毛狮王</td>
  </tr>
  <tr>
    <td>张大千</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>丁乐然</td>
    <td><p>丁春秋</p>
    <p>有名的江湖民间高手</p></td>
    <td><p>丁不四</p>
    <p>江湖闲散人员，喜欢胡乱杀人，遇即避之。</p></td>
  </tr>
  <tr>
    <td>张秋山</td>
    <td>李秋水</td>
    <td>颜不四</td>
  </tr>
</table>
</body>
</html>


hidden_filter_selector.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>可见性过滤选择器</title>
<style>   
/*定义div的外观*/
div {
	width: 70px;
	height: 40px;
	background: #ee77ff;
	margin: 5px;
	float: left;
}   
span {
	display: block;
	clear: left;
	color: #060;
}  
/*让页面元素具有隐藏的效果*/
 .starthidden {
	display: none;
}   
body,td,th {
	font-size: 9pt;
}
</style>   
<script type="text/javascript" src="../jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
	//在一些浏览器中，隐藏元素也包含 <head>、<title>、<script>等元素
	//获取隐藏元素但排除<script>
	var hiddenEls = $("body").find(":hidden").not("script");  
	$("span:first").text("找到" + hiddenEls.length + "个隐藏元素"); 
	//$("div:hidden").show(3000);  //动画的显示隐藏元素
	$("span:last").text("找到" + $("input:hidden").length + "个表单隐藏域"); 
	//为可见的按钮元素关联事件处理代码
	$("div:visible").click(function () {       
		$(this).css("background", "yellow");     
	});     
	//为按钮关联事件处理代码，显示隐藏页面元素
	$("button").click(function () {       
		$("div:hidden").show("fast");     
	});     
});
</script>
</head> 
<body>   
<span></span>   
<div></div>   
<div style="display:none;">隐藏的元素</div>   
<div></div>    
<div class="starthidden">隐藏的页面元素</div>   
<div></div>   
<form>     
    <input type="hidden" />      
    <input type="hidden" />     
    <input type="hidden" />   
</form>   
<span>    </span> 
<button>显示隐藏元素</button> 
</body>
</html>



$("#div1 > p") 查找div1的元素中的子标签为p的元素 只查找一代

$("#div1  p") 查找div1的元素中的子标签为p的所有 元素(包括孙代...  

Letter_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
常用的Jquery方法之 :contains() 选择器、has()選擇器和.contains()方法(part3)
Super Livia
04-02 2049
jQuery:contains()选择器 定义和用法 :contains() 选择器选取包含指定字符串的元素。 该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。 最常见的用法：与其他选择器一起使用，选取指定组合中包含指定文本的元素（如上面的实例）。 注意：文本是大小写敏感的。 语法 $(":contains(text)") 參數 参数 描述 text ...
css选择器包含内容,是否有包含特定文本的元素的CSS选择器？
weixin_34170737的博客
08-04 3962
回答(15)2 years ago您可以匹配元素，元素中属性的名称以及元素中命名属性的值 . 但是，我没有看到任何元素内的匹配内容 .2 years ago使用jQuery：$('td:contains("male")')2 years ago看起来他们正在考虑CSS3规范 but it didn't make the cut .2 years ago您必须向名为 data-gender 的行添...
JQuery中6种根据属性或属性值获得元素获取方法
jerayc的专栏
09-12 1681
根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 . 代码如下: $("p[id]").css("color","red"); 根据属性值获得元素 1.$。在jQuery 中$("")，这个语法等同于$(document.createElement("span")) ，这是一种用法，在选择元素的时候还会这样子的用：[attribute$=value]，
JQuery常用知识点及示例
weixin_33859504的博客
09-17 102
1、JQuery 名称解释 JQuery是封装了常用JS操作函数的一个库文件JQuery = Javascript + Query (查询)Jquery意思即指: 强大的DOM节点查询 2、官网:http://jquery.com/ JQuery2.*不再支持IE6、7、8，上线环境使用压缩版可以省带宽 3、基本选择器 同CSS选择器 <body> &lt...
微软官网给出CSS选择器支持列表
weixin_33859231的博客
11-27 68
CSS Compatibility and Internet Explorer 这是在 @司徒正美 博客里看到的，所以搬到自己博客，收藏下、、正如司徒兄所说，微软太狡滑了，如果把不支持的属性用红色标示出来，保证红成一片。 正巧，我发现这个页面竟然有 jQuery 那么 F12 把下面复制上去运行下，就非常美观了、 $("td:contains('Yes')").css("color", ...
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jQuery选择器全面总结
10-26
这篇文章将对jQuery选择器进行全面总结，帮助开发者更好地理解和运用这些工具。 首先，我们要了解基本选择器，这是jQuery选择器的基础。包括： 1. **ID选择器**: 使用`#`符号后跟元素的ID，如`jQuery("#ID")`，它...
jQuery过滤选择器(first,last/:eq()/:contains()/:has()/:hidden/:visible)
yeyang123的专栏
07-16 3000
1、first、last过滤选择器 得到一组相同标签元素中的第1个元素， $(“li:first”) 例：最后一个元素背景色取红色 :first过滤选择器 改变最后一行"苹果"背景颜色： 葡萄 香蕉
[ POI 2012 ] Letters
weixin_34261739的博客
10-15 165
\(\\\) \(Description\) 给出两个长度为 \(N\) 的字符串\(S_1,S_2\)，且保证两个字符串中每一个字符出现次数相同。 现在一次操作可以交换相邻的两个字符，问将 \(S_2\) 变成 \(S_1\) 最少需要交换多少次。 \(N\le 10^6\) \(\\\) \(Solution\) 假如一共出现了五个 \(A\) ，那一定是按照顺序移动，即\(S_2\)...
Codeforces 519 E. A and B and Lecture Rooms
aisen1985的博客
10-30 96
Description 询问一个树上与两点距离相等的点的个数. Sol 倍增求LCA. 一棵树上距离两点相等,要么就只有两点的中点,要么就是与中点相连的所有点. 有些结论很容易证明,如果距离是偶数,那么他们没有中点,树上不存在距离两点相等的点. 如果中点恰好是两点LCA,那么答案就是\(n-size_x-size_y\) ,\(size_x\) 和 \(size_y\) 表示...
JQuery控制css作用域(scope)
qq_41252054的博客
09-24 615
JQuery控制css作用域(scope) jquery.scoped.js: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin?spm=a2c6h.13066369.0.0.1bf52e0fzn5I7U 快速开发或转型前端vue适用 可能会有性能问题 可能会有性能问题 知识源于分享 ...
今天启动springboot项目 非常慢到DruidDataSource 这一步卡的慢
beauty_魅影
10-17 9675
非常奇怪 查了各种资料， jdk版本，内网网速情况， 最后发现 在这打了个 提示将会变的非常慢   ..........一直在写业务可能调试的时候没有注意到    ...
jquery on()事件 append追加内容事件失效处理
qq_15058425的博客
07-04 6987
先上HTML代码： 新增一行 姓名 年龄 性别 操作 windy 19 男 删除 js代码：   $(function(){ $("#add").click(function(){ var h=""+ "justin"+ "30"+ "男"+ "删除"+ "" $("table").append(h);
如何在jQuery中选择具有name属性的元素？ [重复]
xfxf996的博客
07-02 1231
This question already has an answer here: 这个问题在这里已有答案： How can I select an element by name
jquery获取form表单中的数据
热门推荐
toString的博客
06-06 2万+
           &lt;form&gt;                &lt;input name="username" type="text"/&gt;                &lt;input name="password" type="password"/&gt;                &lt;input id="subbtn&quo
JQuery中根据属性或属性值获得元素
weixin_34365417的博客
04-03 2076
根据属性获得元素 1.比如要获取页面p标签中属性有id的元素  $("p[id]").css("color","red"); 根据属性值获得元素 1.$。在jQuery 中$("&lt;span&gt;")，这个语法等同于$(document.createElement("span")) ，这是一种用法，在选择元素的时候还会这样子的用：[attribute$=value]，匹配给定的属
jQuery选择器全面解析
本教程将深入讲解jQuery选择器的使用。 1. 在HTML页面中添加jQuery 在HTML页面中引入jQuery库，通常有两种方式：一是通过谷歌的CDN(Content Delivery Network)来链接官方提供的最新或特定版本；二是直接下载jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值