<!DOCTYPE html>
<html>
<head>
<title> jquery</title>
<style type="text/css">
body{
padding-bottom: 1000px;
}
ul{
width: 500px;
margin: 0;
padding:0;
list-style: none;
}
li{
padding:20;
margin-top: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<!-- 基础选择器 -->
<ul id="list1">
<li>red</li>
<li class="red">blue</li>
<li>yellow</li>
</ul>
<ul id="list2">
<li>pink</li>
<li>black</li>
<li class="red ">whitel</li>
</ul>
<p class="red">我是p标签----基础选择器</p>
<!-- 层级选择器 -->
<div>
<a href="#" class="link">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
<p>
<a href="#">链接5</a>
</p>
</div>
<!-- 属性选择器 -->
<ul id="ulColor">
<li class="red">color1</li>
<li title="blue">color2</li>
<li title="css-1">color3</li>
<li id="color1-green">color4</li>
<li id="red-1color">color5</li>
<li lang="encnhk">color6</li>
<li lang="en cn">color7</li>
<li class="cl" name="kaivon">color8</li>
</ul>
<!-- 基础过滤选择器 -->
<ol id="olCorlor">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li lang="cn">1</li>
<li id="tar">1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<!-- 子元素过滤器 -->
<div id="paragraph">
<p>段落</p>
<p>段落</p>
<span>段落1</span>
<p>段落</p>
<span>段落1</span>
<p>段落</p>
<p>段落</p>
<span>段落1</span>
<p>段落</p>
</div>
<div id="only">
<p>唯一一个子元素</p>
</div>
<div id="only-two">
<span>span</span>
<p>两个子元素</p>
</div>
<!-- 内容过滤器 -->
<div id="content">kaivon</div>
<div></div>
<div id="has">
<div><p>段落</p></div>
</div>
<div>
<h1 id="title">大标题</h1>
</div>
<script src="D:\JAVA相关资料包\jquery-3.2.1.js"></script>
<script >
//选择器的使用--选择器选中的是一个集合
/** 基础选择器**/
//id选择器
$('#list1').css('background','green')
//类选择器
$('.red').css('background','red');
//标签选择器
$('li').css('border','2px solid pink');
//通配符选择器
//$('*').css('border','4px solid green');
//群组选择器(多个标签一起选择
$('li,p').css('font-size','40px');
//层级选择器 ---选中的是div 下的 所有 a标签
$('div a').css('color','green');
//层级选择器 ---选中的是div 下的 儿子元素 不包含孙子元素,即第一层及
$('div>a').css('font-size','60px');
//选择 div下面的所有a标签中带有类选择器link的后面(统一层级)紧跟(中间不能有其他标签)的一个a标签
$('div a.link + a').css('color','purple');
//选择 div下面的所有a标签中带有类选择器link的后面(统一层级)紧跟(中间不能有其他标签)的同一层级的所有a标签
$('div a.link ~ a').css('color','blue');
//属性选择器
//先用id选择器定位 在用标签属性来选择
$('#ulColor li[class]').css('background','pink');
//先用id选择器定位 在用标签属性和属性值来选择
$('#ulColor li[title=blue]').css('background','blue');
//先用id选择器定位 在用标签的属性值不等于某个值来选择
$('#ulColor li[title!=blue]').css('background','yellow');
//属性值的前缀是CSS css-abc有-隔开的才是前缀,没有就不是
$('#ulColor li[title|=css]').css('background','hotpink');
//^以color开头的属性值 可以有- 也可以没有 ^ 以xxx开头的属性值
$('#ulColor li[id^=color]').css('background','darkgreen');
//$以color为结尾的属性值 可以有- 也可以没有 $ 以xxx结尾的属性值
$('#ulColor li[id$=color]').css('background','purple');
//属性值含有lang且属性值含有cn字符串的 * 包含字符串的属性值
$('#ulColor li[lang*=cn]').css('background','olive');
//属性值含有lang且属性值含有cn单词,单词有空格隔开 ~单词的属性值
$('#ulColor li[lang~=cn]').css('background','skyblue');
//多个属性同时满足
$('#ulColor li[class=cl][name=kaivon]').css('background','teal');
//基础过滤选择器
//通过#olCorlor定位 再通过标签索引来选择 eq等于 gt大于 lt小于
$('#olCorlor li:eq(1)').css('border','10px solid pink');
$('#olCorlor li:gt(3)').css('border','10px solid green');
$('#olCorlor li:lt(3)').css('border','10px solid yellowgreen');
//排除 not(#olCorlor li:lt(3))后面可以跟所有选择器
$('#olCorlor li:not(#olCorlor li:lt(3))').css('border','10px solid darkgreen');
//选择 even偶数 和odd基数
$('#olCorlor li:even').css('border','10px solid hotpink');
$('#olCorlor li:odd').css('border','10px solid purple');
//第一个 最后一个
$('#olCorlor li:first').css('border','10px solid olive');
$('#olCorlor li:last').css('border','10px solid skyblue');
//属性选择
$('#olCorlor li:lang(cn)').css('border','10px solid black');
//锚点 在浏览器地址后面拼接 #tar
$('#olCorlor li:target(tar)').css('border','10px solid yellow');
// 根标签
$(':root').css('border','20px solid blue');
//header-标题标签
$(':header').css('border','15px solid darkgreen');
// 子元素过滤器
//通过div定位 p:first-child #paragraph后面必须是p标签,
$('#paragraph p:first-child').css('color','pink');
//通过div定位 span:first-of-type #paragraph后面可以插入其他标签,
$('#paragraph span:first-of-type').css('color','yellowgreen');
//通过div定位 p:last-child #paragraph的最后一个子元素必须是p标签,
$('#paragraph p:last-child').css('color','hotpink');
//通过div定位 span:last-of-type #paragraph的最后一个span标签,可以是不在最后,
$('#paragraph span:last-of-type').css('color','hotpink');
//选择第二个子元素,且第二个子元素必须为p标签,否则无效
$('#paragraph p:nth-child(2)').css('color','blue');
//选择#paragraph中的第二个span标签,索引可以不是2 ,位置随意
$('#paragraph span:nth-of-type(2)').css('color','olive');
//选择到只有一个子元素的标签 只含有一个p,不能在含有其他标签
$('#only p:only-child').css('color','olive');
//选择到#only-two 只含有一个span,可以含有其他标签
$('#only-two span:only-of-type').css('font-size','20px');
// 内容过滤器
//#content中是否包含kaivon
$('#content:contains(kaivon)').css('color','blue');
//寻找div下面是否有空标签
$('div:empty').css({
width:'100px',
height:'100px',
background:'green'
});
//#has中是否包含p标签 只要包含就行
$('#has:has(p)').css('border','1px solid #000');
//#title的父级标签
$('#title:parent').css('border','1px solid #f00');
</script>
</body>
</html>
版权声明:本文为快乐的小杨吖原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。