jQuery 选择器（二）

最新推荐文章于 2020-08-06 17:54:47 发布
最新推荐文章于 2020-08-06 17:54:47 发布
阅读量249 收藏
点赞数
分类专栏： JQuery 文章标签： 前端 JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boxyuan/article/details/72850687
版权

 4)内容选择器

:contains('john')：表示包含指定字符串的标签，字符串大小写敏感
:empty：表示查询空标签的元素
:has('p')：表示查询有子元素的元素
.addClass("样式名")：为查询到的所有标签添加样式
:parent：表示查询非空标签

    5)可见性选择器

:hidden：表示查询所有隐蔽的标签
:visible：表示查询所有显示的标签
或:not(:hidden)

    6)属性选择器

div[id]：表示查询含有id属性的div元素
input[name='newsletter']：表示查询含有name属性，且其值是"newsletter"的input元素
input[name!='newsletter：表示查询含有name属性，且其值不是"newsletter"的input元素
input[name^='newsletter：表示查询含有name属性，且其值以"news"开头的input元素
"input[name$='letter'：表示查询含有name属性，且其值以"letter"结尾的input元素
input[name*='news']：：表示查询含有name属性，且其包含"news"的input元素
input[id][name$='letter']：表示查询含有id属性，且含有name属性，其值以"letter"字符串结束的input元素  

    7)子元素选择器

:first-child：表示查询第一个子元素
:last-child：表示查询最后一个子元素
:only-child:表示查询只有一个子元素的元素
:nth-child(编号从1开始)，表示查询指定编号的元素

    8)表单选择器

:input：查找所有input元素的个数，注：包含所有input,textarea,select和button元素
:text
:password
:radio
:checkbox
:file
:submit
:reset
:image
:file

     9)表单对象属性

:enabled：表示查询可用的元素
:disabled：表示查询不可用的元素
:checked：表示查询选中的复选/单选框的元素

:selected：表示查询选中的下拉框元素

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.6.js"></script>
	</head>

	<body>
		<hr />
		<div>
			<p>ma yun</p>
		</div>
		<div>
			<p>ma hua teng</p>
		</div>
		<div>lei jun</div>
		<div>lei bu si</div>
		<p></p>
		<p></p>
		<div></div>
		<hr />
		<table align="center" border="1" height="200" width="200">
			//第一行不显示
			<tr style="display: none;">
				<td>value 1</td>
			</tr>
			<tr>
				<td>value 1</td>
			</tr>
			<tr>
				<td>value 1</td>
			</tr>
		</table>
		<hr />
		<div>test2</div>
		<hr />
		<div align="center">
			<input type="checkbox" name="newselect" value="hot fuzz" />
			<input id="myID" type="checkbox" name="newselect" value="cold fusion">
			<input type="checkbox" name="newsaccept" value="evil" />
		</div>
		<hr />
		<div align="center">
			<ul>
				<li>bob</li>
				<li>john</li>
				<li>mary</li>
			</ul>
			<ul>
				<li>green</li>
				<li>white</li>
				<li>bill</li>
			</ul>
			<ul>
				<li>jack</li>
			</ul>
		</div>
		<script type="text/javascript">
			/*
																						   * 
																						    :contains('john')：表示包含指定字符串的标签，字符串大小写敏感
																							:empty：表示查询空标签的元素
																							:has('p')：表示查询有子元素的元素
																						 	.addClass("样式名")：为查询到的所有标签添加样式
																							:parent：表示查询非空标签
																						   */
			/*
			var con =$("div:contains('ma')").size();
			alert(con);
			alert($("div:empty").size());
			alert($("p:empty").size());
			//:has('p')：表示查询有子元素的元素
			alert($("div:has(p)").size());
			// .addClass("样式名")：为查询到的所有标签添加样式
			$("div:has('p')").addClass('MyClass');
			//patents表示查询非空标签
			alert($("p:parents").size());*/
			//可见性
			//查询隐藏的tr元素
			//alert($("table tr:hidden").size());
			// alert($("tr:hidden").size());
			//查找所有可见
			// alert($("table tr:visible").size());
			// alert($("tr:visible").size());
			/*
	   * div[id]：表示查询含有id属性的div元素
		input[name='newsletter']：表示查询含有name属性，且其值是"newsletter"的input元素
		input[name!='newsletter：表示查询含有name属性，且其值不是"newsletter"的input元素
		input[name^='newsletter：表示查询含有name属性，且其值以"news"开头的input元素
		"input[name$='letter'：表示查询含有name属性，且其值以"letter"结尾的input元素
		input[name*='news']：：表示查询含有name属性，且其包含"news"的input元素
		input[id][name$='letter']：表示查询含有id属性，且含有name属性，其值以"letter"字符串结束的input元素  
	   * 
	   */
			alert($("div[id]").size());
			alert($("input[name='newselect']").size());
			alert($("input[name='!newselect']").size());
			alert($("input[name^='news']").size());

			// 且其值以"letter"结尾的input元素,并将其选中
			// alert($("input[name$='select']").attr("checked","checked"));

			//
			//alert($("input[name*='new']").attr("checked","checked"));
			//input[id][name$='letter']：表示查询含有id属性，且含有name属性，其值以"letter"字符串结束的input元素  
			$("input[id][name$='select']").attr("checked", "checked");
			/*
	     * 
	     * :first-child：表示查询第一个子元素
		:last-child：表示查询最后一个子元素
		:only-child:表示查询只有一个子元素的元素
		:nth-child(编号从1开始)，表示查询指定编号的元素	
	     * 
	     * 
	     */
			//自动循环子元素
			$("ul li:first-child").each(function() {
				alert($(this).html());

			})
			$("ul li:last-child").each(function() {
				alert($(this).html());

			})
			//查找唯一子元素
			$("ul li:only-child").each(function() {
				alert($(this).html());

			})
			//查找li第二个子元素
			$("ul li:nth-child(2)").each(function() {
				alert($(this).html());

			})
			/*
	      * :input：查找所有input元素的个数，注：包含所有input,textarea,select和button元素
			:text
			:password
			:radio
			:checkbox
			:file
			:submit
			:reset
			:image
			:file
	      * 
	      * 9)表单对象属性
		:enabled：表示查询可用的元素
		:disabled：表示查询不可用的元素
		:checked：表示查询选中的复选/单选框的元素
		:selected：表示查询选中的下拉框元素
	      */
		</script>
	</body>

</html>


boxyuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery选择器
m0_57774967的博客
06-16 4635
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jQuery 选择器
bzzb_的博客
04-12 921
一.jquery选择器基础 ​ jquery选择器采用CSS和Xpath选择器语法规范,能够满足用户在DOM中快速匹配元素或元素集合.jquery选择器解决了两个难题: ​ 第一,支持CSS1 CSS2 CSS3不同版本的所有选择器,而很多早期浏览器并没有完全支持CSS3版本的选择器. ​ 第二,支持不同类型的主流浏览器,因此使用jquery选择文档对象时,就不用考虑浏览器的兼容性问题. ​ 简单...
JQuery选择器超级详细
热门推荐
林高禄
08-06 1万+
基本选择器 id选择器：$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮，将id为myid的元素背景为绿色 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>JQuery选择器</title> <script src="js/jquery-3.3.1.min...
jquery 选择器及循环
baobao__的博客
09-23 1886
文章目录1. 基本选择器2. 层次选择器3.基本过滤选择器4. 内容过滤选择器5.属性选择器6.表单相关选择器7.循环1.map2.each 1. 基本选择器 //标签 $("div").css("background","red"); //id $("#active").css("background","orange"); //类 $(".box").css("background","g...
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
jQuery选择器全面总结
10-26
这篇文章将对jQuery选择器进行全面总结，帮助开发者更好地理解和运用这些工具。 首先，我们要了解基本选择器，这是jQuery选择器的基础。包括： 1. **ID选择器**: 使用`#`符号后跟元素的ID，如`jQuery("#ID")`，它...
详解jQuery选择器
10-20
本文主要对jQuery选择器进行一一举例介绍，有助于学习、理解和记忆。具有很好的参考价值，下面就跟着小编一起来看下吧
jQuery商品价格选择器
11-11
首先，我们要理解jQuery选择器的核心概念。jQuery选择器是用于选取HTML元素的工具，它基于CSS选择器，同时添加了一些扩展，使得我们可以更高效地定位和操作DOM元素。例如，`$("#myID")`用于选取ID为"myID"的元素，`$...
jQuery 选择器详解
10-24
主要介绍了jQuery 选择器详解,图文并茂，十分不错，需要的朋友可以参考下
jQuery的DOM操作与练习
不因俊俏难为友，正为风流始读书
06-04 1028
*0 jQuery常用操作DOM的API    1)jQuery对象.addClass().addClass();    2)removeClass()    3)toggleClass()    4)hasClass()    5)val()，如果将val()设置给一个select/raido/checkbox元素，内容取决于option元素的value或显示的内容值，value优先
jQuery 案例
不因俊俏难为友，正为风流始读书
06-03 616
*5 jQuery中DOM常用方法或属性    1)val()：取得标签中value属性的值    2)html()：取得标签内的内容    3)size()或length：取得数组的长度    4)each()：该方法必须由jQuery对象调用（即数组对象），each(function)方法，会自动将数组中的每个元素自动调用      function函数    5)click(fu
jQuery 案例（下拉选择框右移）
不因俊俏难为友，正为风流始读书
06-03 554
*  jQuery中DOM常用方法或属性    1)val()：取得标签中value属性的值    2)html()：取得标签内的内容    3)size()或length：取得数组的长度    4)each()：该方法必须由jQuery对象调用（即数组对象），each(function)方法，会自动将数组中的每个元素自动调用      function函数    5)click(fu
JQuery快速入门
不因俊俏难为友，正为风流始读书
05-30 440
1 jQuery快速入门    1)服务端和客户端有三种方式传递数据      a)HTML(无需与其它应用程序共享数据的情况下）      b)XML(需与其它应用程序共享数据，尤其是在不同的系统中，平台中，同时内容较多的情况下)      c)JSON(需与其它应用程序共享数据，同时内容不多的情况下）    2)为了将JS代码简化，同时要达到业务的需要，      3）jQuer
JQuery的动画操作
不因俊俏难为友，正为风流始读书
06-05 394
* jQuery常用操作DOM的API    1)jQuery对象.addClass().addClass();    2)removeClass()    3)toggleClass()    4)hasClass()    5)val()，如果将val()设置给一个select/raido/checkbox元素，内容取决于option元素的value或显示的内容值，value优先
Query九类选择器（二）
不因俊俏难为友，正为风流始读书
01-11 379
Option Button //1)查找所有input元素的个数 //alert( $("input").size() );//10，找input标签 //alert( $(":input").size() );//13，找input标签和select/textarea/button //2)查找所有文本框的个数 //ale
jQuery的Ajax操作
不因俊俏难为友，正为风流始读书
06-07 375
jQuery 中的 Ajax：      JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON() load() 方法：      load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入
jQuery九类选择器（三）
不因俊俏难为友，正为风流始读书
01-11 365
广东 湖南 湖北 //1)查找所有可用的input元素的个数 //alert( $("input:enabled").size() ); //2)查找所有不可用的input元素的个数 //alert( $("input:disabled").size() ); //3)查找所有选中的复选框元素的个数 /
jQuery选择器（一）
不因俊俏难为友，正为风流始读书
05-31 361
JQuery选择器： 选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点:     简洁的写法 ：  $(“#id”)   等价于    document.getElementById("id")  $(“tagName”)     等价于   document.getElements
jQuery选择器详解与应用
"jQuery选择器全解：包括动态创建DOM元素、封装DOM对象以及文档就绪的简写方式。此内容详细介绍了jQuery选择器的使用，特别是jQuery支持的不仅是CSS选择器，还包括自定义选择器。jQuery选择器分为‘选择’和‘过滤’...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值