JQ选择器

最新推荐文章于 2021-05-28 01:59:14 发布

Rose777

最新推荐文章于 2021-05-28 01:59:14 发布

阅读量289

点赞数

本文链接：https://blog.csdn.net/qq_35918095/article/details/52878463

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>JQ选择器</title>
</head>

<body>
<div class="box box1">
<span>span1</span>
<span>span2</span>
<p>
<span>span3 我
<span></span>
</span>
</p>
</div>
<div class="box1 box2"></div>
<p class="box-bb">
我是谁
</p>
<div id="aa">aa
<span>span4</span>
</div>
<span>span</span>
<p>p</p>
<span class="s"> </span>
<h1></h1>
<h2></h2>
<div id="b" style="display: none;">
<h1></h1>
</div>
<p></p>
<input type="text" name="in" id="in" value="" />
<input type="text" name="on" id="on" value="" />
</body>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var box = document.getElementsByClassName("box");
console.dir(box);
console.dir($(".box"));
//用JQ选择器选择出来的元素是对象不能用原生上面的属性和方法只能用JQ中的属性和方法
//把一个JQ对象变成一个原生JS对象后面加上对应的索引
console.dir($(".box")[0]);
//1.基本选择器
//1）ID选择器一个元素
var a = $("#aa");
//a是JQ对象 a[0]是原生JS对象
console.log(a[0].id);
//2）类选择器元素集合
a.css("color", "red");
var bb = $(".box");
console.log(bb);
//3）标签选择器元素集合
var cc = $("p");
console.log(cc)
//4）通配符选择器元素集合
var x = $("*");
console.log(x);
//5）集合选择器元素集合
var ss = $("#aa,.box,span"); //只要满足一个就可以
console.log(ss);

//2层次选择器
//1）后代选择器元素集合
var a = $("#aa span");
console.log(a);
//2）子代选择器元素集合
var a = $("div>span")
console.log(a)
//3）下一个弟弟(+后面只能加标签名或者不加)
var a = $("#aa+span")
console.log(a)
//4）所有的弟弟
var a = $("#aa~span")
console.log(a)

//3基本过滤选择器
var a = $("div :first") //所有div中的第一个孩子元素只能获取一个元素
console.log(a);
var a = $("div:first") //所有div中的第一个div元素只能获取一个元素
console.log(a);
var a = $("div:last") //所有div中的第一个div元素只能获取一个元素
console.log(a);
var a = $("div:not(.box)") //所有div中class名不叫box的div元素
console.log(a);
var a = $("div:odd"); //所有的div中索引是奇数的元素
console.log(a);
var a = $("div:even"); //所有的div中索引是偶数的元素
console.log(a);
$("div>span:even")
var a = $("div:eq(1)") //选取指定索引的元素
console.log(a);
var a = $("div:gt(1)") //选取索引大于1的的元素
console.log(a);
var a = $("div:lt(1)") //选取索引小于1的的元素选取 index 值小于指定数的元素。
console.log(a);

var h = $("div :header"); //所有的h标签如果规定融器下的h ,":"前面一定要加上空格
console.log(h)
var a = $("div:animated"); //所有正在进行动画的标签
var a = $(":focus");
console.log(a);
var inputs=$("#in,#on");
inputs.focus(function() {
//console.log($(":focus"))
if($(":focus")[0].id === "in") {
console.log(this.id)
}else if($(":focus")[0].id==="on"){
console.log(this.id)
}
})
//inputs.focus =

//4.内容过滤选择器
var p=$("p:contains('我')");//“子子孙孙中”内容中含有”我“的p标签
console.log(p);
var p=$("div:has(p)");//包含有p标签的div元素
console.log(p);
var p=$("p:empty");//空元素
console.log(p);
var p=$("p:parent");//非空元素
console.log(p);

//5可见性过滤选择器
var hid=$("div :hidden")//所有隐藏的元素
var vis=$(":visible")//所有可见的元素
console.log(hid)

//6属性过滤选择器
var d=$("div[id]");//有id属性的div
console.log(d)
var d=$("div[class=box]")//所有class=box的div
var d=$("div[class!=box]")//所有class!=box的div
var d=$("div[class^=box]")//所有class以box开头的div
var d=$("div[class$=box]")//所有class以box结尾的div
var d=$("div[class*=box]")//所有class含有box的div
var d=$("p[class|=box]")//所有class=box或者box-（前缀）的div
var d=$("div[class~=box]")//所有class以空格分开之后含有box的元素
console.log(d)
$("div[id][class!=box2]")

//7子元素过滤选择器
var s=$("div span:nth-child(1)");//div下面的span(是他父级额第一个孩子)
console.log(s)
var s=$("div span:nth-child(odd)");//不是索引，是第奇数个元素
console.log(s)
var s=$("div span:nth-child(even)");//不是索引，是第偶数个元素
console.log(s)
var s=$("div span:nth-child(3n)");//n=1；
console.log(s)
var s=$("div span:first-child");
console.log(s)
var s=$("div span:last-child");//div下面的位置在最后的span
console.log(s)
var s=$("div :last-child");
console.log(s)
</script>

</html>

Rose777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ选择器

JQ选择器span1span2span3 我我是谁aaspan4spanpvar box = document.getElementsByClassName("box");console.dir(box);console.dir($(".box")
复制链接

扫一扫