jq基本选择器

最新推荐文章于 2021-11-28 14:34:43 发布
最新推荐文章于 2021-11-28 14:34:43 发布
阅读量1.7k 收藏 7
点赞数 4
分类专栏： jquery 文章标签： jq选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41544553/article/details/88251459
版权

jQuery 选择器大致分为四种：基本选择器、层次选择器、过滤选择器、表单选择器

一、jq基本选择器

选择器的用法跟css的用法一致，只是需要增加选择函数。$('');

如下面那道题：

id选择器为  $('#two')；

类选择器  $('.one');

标签选择器，元素选择器为  $('button');

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.one{
			}
			#two{ 
			}
		</style>
	</head>
	<body>
		<button id="two">按钮</button>
		<button class="one" >按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>				
		<script src="js/jquery-3.2.1.js"></script>
		<script>
			/*选择器的用法跟css的用法一致，只是需要增加选择函数。$('');*/
			/*可以直接操作数组*/
			/*控制css样式， 选择标签.css('样式','样式的值');*/
			$('button').css('background','red');
			$('.one').css('background','pink');
			$('#two').css('color','white');
		</script>
	</body>
</html>

运行结果： 

二、层次选择器

1、 派生选择器：在s1内部获得全部的s2节点(不考虑层次)

　　$("div span")// 派生选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			span 
		</style>
	</head>
	<body>
		<div>
			<span>我是1</span>
			<p>
			<span>我是2</span>
			</p>
			<span>我是3</span>
		</div>
		<span>我是4</span>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
			$("div span").css('background','red')// 派生选择器
//			$("div>span").css('background','pink')// 子代选择器
//			$("div+span").css('background','lime')// 兄弟选择器
//			$("div+span").css('background','lime')// 兄弟选择器
		</script>
	</body>
</html>

运行结果： 

  2、$(s1 > s2) [父子]：直接子元素选择器:在s1内部获得s2的子元素节点

$("div>span")// 子代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			span 
		</style>
	</head>
	<body>
		<div>
			<span>我是1</span>
			<p>
			<span>我是2</span>
			</p>
			<span>我是3</span>
		</div>
		<span>我是4</span>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
//			$("div span").css('background','red')// 派生选择器
			$("div>span").css('background','pink')// 子代选择器
//			$("div+span").css('background','lime')// 兄弟选择器
//			$("div+span").css('background','lime')// 兄弟选择器
		</script>
	</body>
</html>

运行结果： 

3 、$(s1 + s2) [兄弟]：直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			span 
		</style>
	</head>
	<body>
		<div>
			<span>我是1</span>
			<p>
			<span>我是2</span>
			</p>
			<span>我是3</span>
		</div>
		<span>我是4</span>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
//			$("div span").css('background','red')// 派生选择器
//			$("div>span").css('background','pink')// 子代选择器
			$("div+span").css('background','lime')// 兄弟选择器
//			$("div+span").css('background','lime')// 兄弟选择器
		</script>
	</body>
</html>

运行结果：

4、  $(s1 ~ s2) [兄弟]：后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			span 
		</style>
	</head>
	<body>
		<div>
			<span>我是1</span>
			<p>
			<span>我是2</span>
			</p>
			<span>我是3</span>
		</div>
		<span>我是4</span>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
//			$("div span").css('background','red')// 派生选择器
//			$("div>span").css('background','pink')// 子代选择器
//			$("div+span").css('background','lime')// 兄弟选择器
			$("div+span").css('background','lime')// 兄弟选择器
		</script>
	</body>
</html>

 

三、(过滤)选择器

 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
			}
		</style>
	</head>

	<body>
		<h1>并且选择器</h1>
		<h2>并且选择器</h2>
		<h3>并且选择器</h3>
		<h4>并且选择器</h4>
		<ul>
			<li>我是1</li>
			<li id="two">我是2</li>
			<li>我是3</li>
			<li id="four">我是4</li>
			<li>我是5</li>
			<li>我是6</li>
			<li>我是7</li>
			<li>我是8</li>
		</ul>

		<input type="button" value="触发" onclick="f1()" />
		<script src="js/jquery-3.2.1.js"></script>
		<script type="text/javascript">
			function f1() {
				$("li").css('font-weight','bold');
				// :first 找到第一个
				//li元素同时，还需要是第一个
				$("li:first").css('background-color', 'blue');
				// :last 找到最后一个
				$("li:last").css('background-color', 'green');
				// :eq(下标) 下标从0计算, equal()
				$("li:eq(4)").css('color', 'pink');
				// :gt(索引值) 下标大于条件索引值, great than
				$("li:gt(4)").css('color', 'red');
				// :lt(索引值) 下标小于条件索引值, less than
				$("li:lt(3)").css('color', 'orange');
				// :even 下标索引值等于偶数的
				$("li:even").css('font-size', '20px');
				// :odd 下标索引值等于奇数的
				$("li:odd").css('font-size', '30px');
				// :not(选择器) 去除与“选择器”匹配的元素
				$("li:not(#two,#four)").css('text-decoration', 'overline');
				// :header 获得h1/h2/h3...的标题元素
				$(":header").css('color', 'blue');
			}
		</script>
	</body>

</html>

6  内容过滤选择器

:contains(内容)

包含内容选择器，获得节点内部必须通过标签包含指定的内容

$(“div:contains(beijing)”)

<div>linken love beijing</div>

<div>jack love shanghai</div>

 :empty

获得空元素(内部没有任何元素/文本(空) )节点对象

$(“div:empty”)

<div>linken love beijing</div>

<div>jack love shanghai</div>

<div></div>

<div><img /></div>含有<img>节点

<div>      </div>//含有 空格实心节点

:has(选择器)

内部包含指定元素的选择器
       $(“div:has(#apple)”)

<div>hello</div>

<div><p></p></div>

<div><span  id=”apple”></span></div>//id选择器

<div><span  class=”apple”></span></div>

:parent

寻找的节点必须作为父元素节点存在

$(“div:parent”)

<div>linken love beijing</div>

<div>jack love shanghai</div>

<div></div>

<div><img /></div>

<div>      </div>

/********************************************/

function f1(){
//① $(":contains(text)")
$("div:contains(beijing)").css('background-color','red');
//② $(":empty")
$("div:empty").css('width','200px');
$("div:empty").css('height','100px');
$("div:empty").css('background-color','pink');
//③ $(":has(selector)")
console.log($("div:has(.orange)"));
//④ $(":parent")
console.log($("div:parent"));
}

<h1>内容过滤选择器</h1>
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div> </div>
<div><p class="orange"></p></div>
<div><span class="orange"></span></div>

<input type="button" value="触发" οnclick="f1()" />

weixin_41544553小彩虹
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jq的选择器
KingRH的博客
11-19 937
jq选择器 文章目录jq选择器选择器1基本选择器2层次选择器3过滤选择器 选择器 我们先复习一下js的选择器都有些什么 常见的有 id选择器，类选择器，属性选择器，标签名选择器 随便一个id选择器 <script> var p=document.getElementById("id") p.onclick=function(){ console.log("这是js写法") } </script> 如代码所示获得的i
JQ 基本选择器 id 类选择器 元素选择器 jq和js相互转化
qq_45689826的博客
09-02 190
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src = "./js/jquery.js" type = "text/javascript" charset="UTF-8"></script> <script type="text/javascript"> $(func.
JQ中的基本选择器
w2019424的博客
07-22 192
代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/style.css"/> <!--引入JQ文件--> <script ty...
JQ选择器
weixin_33744854的博客
11-21 165
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名...
jq时间选择器jq时间选择器jq时间选择器
最新发布
03-08
"jq时间选择器"是指利用jQuery实现的一个功能，允许用户在网页上方便地选取日期或时间。这个功能在网页表单、日程安排、预订系统等场景中非常常见。 jQuery时间选择器通常基于插件实现，例如jQuery UI中的...
JQ 基本过滤选择器
08-13
**JQ基本过滤选择器详解** 在Web开发中，jQuery（简称JQ）是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。其中，选择器是jQuery的核心功能之一，它允许我们高效地选取DOM...
JQ 属性选择器
08-13
### 一、属性选择器的基本形式 jQuery 的属性选择器主要有以下几种： 1. `[attr]`：选择具有指定属性的所有元素。 2. `[attr=value]`：选择属性值精确匹配给定值的元素。 3. `[attr^=value]`：选择属性值以给定值...
JQ的基本选择器
云飞扬°的博客
05-18 486
JQ的基本选择器 ID选择器 : #ID的名称 类选择器: 以 . 开头 .类名 元素选择器: 标签的名称 通配符选择器: * 选择器分组: 选择器1,选择器2（中间以逗号隔开） 例如： <!DOCTYPE html> <html> <head> <me...
JQuery常用选择器
心灵净土
09-18 840
1、匹配包含有某个属性的所有元素：     $("div[id]") 检索出所有具有id属性的div元素，用法如下：      $("div[id]").one("click", function(){ var idString = $(this).text() + " = " + $(this).attr("id"); $(this).text(idString); }); 2、匹配具有特定属性值的所有元素：    $("input[name
jQuery选择器——基本选择器
xiaouncle的博客
07-30 696
初学jQuery，为了能系统地学习好jQuery，今天特意把自己的学习心得归纳一下，贴上来与初学者共享，今天我主要总结的是jquery的基本选择器。
jq的基本选择器
isjun26
04-22 825
1.$(“#id属性值”) 根据id找节点 2.$(“标签名“) 根据标签名找节点         3.$(“.class属性值”) 根据class属性名找节点
jQuery的内容选择器
weixin_30390075的博客
06-23 108
JQuery中的内容选择器 JQuery中的内容选择器有四个： :contains(text) 匹配包含给定文本的元素 :empty 匹配所有不包含子元素或者文本的空元素 :has(selector) 匹配含有选择器所匹配的元素的元素 :parent 匹配含有子元素或者文本的元素 具体例子如下： <div></div> <div&gt...
jQ选择器
u013464954的专栏
11-01 644
1.基本选择器 *(所有元素) .class(类选择器) element(标签选择器) #id(id选择器) selector1, selectorN, ...(并列选择器) 2.层次选择器 parent > child(下一层的子元素) ancestor descendant(所有的后代) prev + next(下一个兄弟节点) prev ~ siblings(下面所有的兄弟节点)
JQ 选择器
weixin_55032665的博客
11-28 488
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...
jq选择器
梓洋的博客
09-25 239
基本选择器 1.id选择器：选择id为q的元素-->$("#q") 2.类选择器：选择class为q的元素--> $(".q") 3.标签选择器：选择元素名为div的元素--> $("div") 选择全部元素--> $("*") 选择所有span元素和id为tank的div元素 -->$("#tank,span") 层次...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值