jQuery选择器

原创 2019-05-28 10:48:50 148
摘要:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jquery 选择器</title>    <script src=&qu

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>jquery 选择器</title>
   <script src="./0520/static/js/jquery-3.4.1.js"></script>
</head>
<body>
<div id="list">hello jQuery</div>
<div class="list1">hello javascript</div>
<div>
   <p>hello world</p>
</div>
<div>
   <div id="box">多个元素1</div>
   <div class="box">多个元素2</div>
   <span>多个元素3</span>
</div>
<!--给父级元素下匹配所以的子元素-->
<div class="list2">
   <p>给父级元素下匹配所以的子元素</p>
   <p>给父级元素下匹配所以的子元素</p>
   <p>给父级元素下匹配所以的子元素</p>
</div>
<hr>
<ul class="list3" style="list-style: none">
   <li>给定的祖先元素下匹配所有的后代元素</li>
   <li>给定的祖先元素下匹配所有的后代元素</li>
   <li>给定的祖先元素下匹配所有的后代元素</li>
</ul>
<hr>
<div class="list4">
   <h4 class="h4">匹配紧跟在prev元素后面的next元素</h4>
   <p>匹配紧跟在prev元素后面的next元素</p>
   <p>匹配紧跟在prev元素后面的next元素</p>
   <p>匹配紧跟在prev元素后面的next元素</p>
</div>
<hr>
<div class="list5">
   <ul>
       <li>顺序选择器1</li>
       <li>顺序选择器2</li>
       <li>顺序选择器3</li>
       <li>顺序选择器4</li>
       <li>顺序选择器5</li>
   </ul>
</div>
<hr>
<div class="list6">
   <ul>
       <li>顺序选择器1</li>
       <li>顺序选择器2</li>
       <li>顺序选择器3</li>
       <li>顺序选择器4</li>
       <li>顺序选择器5</li>
   </ul>
</div>
<hr>
<div class="list7">
   <ul>
       <li id="sy">顺序选择器1</li>
       <li>顺序选择器2</li>
       <li>顺序选择器3</li>
       <li>顺序选择器4</li>
       <li>顺序选择器5</li>
   </ul>
</div>
<hr>
<div class="list8">
   <ul>
       <li id="sy1">顺序选择器1</li>
       <li>顺序选择器制定文本2</li>
       <li>顺序选择器制定文本3</li>
       <li><h5>顺序选择器顺序选择器4</h5></li>
       <li></li>
       <li>顺序选择器5</li>
       <li>顺序选择器5</li>
   </ul>
</div>
<script>
$(function () {
//基本选择器
// 语法
// $('#id名')根据给定的id来匹配到元素
var div = $('#list').css('color','red');
console.log(div);
// $('.class名')根据给定的class来匹配到元素
$('.list1').css('color','blue');
// $('element')根据给定的标签名来匹配到元素
$('p').css('color','green');
// $('*')匹配所有元素
$('*').css('font-family','宋体');
//$('#id,.class名,element')匹配到页面中多个选择器
$('#box,.box,span').css('color','pink');
//*************************************************
       //层级选择器 (相当于父类和子类的元素关系)

// 给定的父级元素下匹配所有的子元素:$('父级元素 > 子级元素')
$('.list2 > p').css('color','red');
// 给定的祖先元素下匹配所有的后代元素:$('祖先元素  后代元素')
$('.list3 li').css('background','yellow',);
// 匹配紧跟在prev元素后面的next元素:$('prev + next')(同级的元素)
$('.h4+p').css('color','red');
// 匹配prev元素后面所有的siblings元素:$('prev ~ siblings')
$('.h4~p').css('background','blue');
//****************************************
       //顺序选择器
// 1、顺序
// $(':first') 第一个元素
$('.list5 ul > li:first').css('color','red');
// $(':last')  最后一个元素
$('.list5 ul > li:last').css('color','pink');
// 2、比较(x的顺序是从0开始)
       // $(':gt(x)')表示大于值x的元素
$('.list5 ul > li:gt(1)').css('color','blue');
// $(':lt(x)')表示小于值x的元素
$('.list5 ul > li:lt(2)').css('color','yellow');
// $(':eq(x)')表示等于值x的元素
$('.list5 ul > li:eq(3)').css('color','Violet');
// 3、奇偶数
// $(':odd')奇数顺序
$('.list6 ul > li:odd').css('color','yellow');
// $(':even')偶数顺序
$('.list6 ul > li:even').css('color','red');
// 4、非
// $(':not(selector)')匹配不是selector的所有元素
$('.list7 ul > li:not(#sy)').css('color','red');
//*************************************************
       // 内容选择器
// 语法:
// $(':contains(text)') 匹配包含给定文本(text)的元素
$('.list8 ul > li:contains(制定文本)').css('color','red');
// $(':has(selector)')匹配包含特定选择器元素的元素
$('.list8 ul > li:has(h5)').css('color','blue');
// $(':empty')匹配不含有内容的元素(即 不包含子元素或者文本的空元素)
$('.list8 ul > li:empty').css('backgroundColor','red');
// $(':parent')匹配含有子元素或者文本的元素
$('.list8 ul > li:parent').css('fontSize','22px');
//===============================================================
       // 属性选择器
// 语法:
// $('[属性名]')匹配包含给定属性的元素
// $('[attribute=value]')匹配给定属性是某个特定值的元素
//$('[attribute!=value]')匹配所有不含有指定值的属性,或者说是属性不等于特定值的元素
// $('[attribute ^= value]')匹配给定属性是以某些值开始的元素
// $('[attribute $= value]')匹配给定属性是以某些值结尾的元素
// $('[attribute *= value]')匹配给定属性包含某些值的元素
//$('attrSel[1] attrSel[1] attrSel[1]')复合选择器,需要同时满足多个条件时使用
//$(document).ready(function(){
               // $('input[type]').css('background','pink')
               // $('input[type=button]').css('background','blue')
               // $('input[type!=text]').css('background','red')
               // $('input[type ^=t ]').css('background','red')
               // $('input[type $=n ]').css('background','red')
               // $('input[type *=o ]').css('background','blue')
               // $('input[id][name*=n]').css('background','red')
       //})
       // 表单选择器
// 语法:
// $(':enabled')所有激活的input元素(可以使用的input元素)
// $(':disabled')所有禁用的input元素(不可以使用的input元素)
// $(':selected')所有被选取的元素,针对于select元素
// $(':checked')所有被选中的input元素
//===============================================================
})
</script>
</body>

</html>

批改老师:天蓬老师批改时间:2019-05-28 17:02:40
老师总结:总结的不错, 其实在实际开发过程 , 用不到这么多的, 但是要想看懂别人的代码, 是要多了解一些

发布手记

热门词条