jQuery框架的几种选择器

jQuery基本概念:

1、jQuery是包装 js dom 的函数库 ，是 js的封装的一个框架， 把js的大量语法进行封装。
2、引入jquery库 (js文件）后window多了两个属性：window.jQuery 和 window.$ 且两个值相同 window.jQuery= window.$ =jQuery
3、jQuery 在库里面是个函数 函数执行返回的是一个实例对象
4、jQuery 对象内部包含的是dom元素对象的伪数组（可能只有一个元素）那就有length、index、each()等属性和方法， 但没有数组特别的方法：forEach()、pop()、push()、splice()等。

jQuery的几种选择器：

1、基本选择器：

种类	用法
id	console.log($("#btn"));
class	console.log($(".btn"));
元素	console.log($(“button”));
*	console.log($("*"));//获取所有的元素
复合元素选取	console.log($(“button,input”));

<div id="div1" class="box">div1</div>
<div id="div2" class="box">div2</div>
<div id="div3" >div3</div>
<span class="box">span</span>

<script type="text/javascript" src="./jquery/jquery.js"></script>
<script type="text/javascript">
 $('#div1').css('background','red');
 $('#div2').css({
  'background':'green',
  'color':'yellow',
 })

 $('.box').css('background','pink');
 $('div,span').css('background','blue');
 $('div.box').css('background','red');
 </script>

2、层次选择器：

种类	用法
父元素下的所有XX元素	$(‘ul span’)
父元素下的所有子元素XX	$(‘ul>span’)
下一个子元素	$(".li2+li")
获取当前匹配元素之后的所有	$(".li2~li")

<ul>
    <li>11</li>
    <li title="hello">22</li>
    <li class="box">33</li>
    <li title="hello"><span>44</span></li>
    <span>55</span>
</ul>
<script type="text/javascript" src="./jquery/jquery.js"></script>
<script type="text/javascript">
$('ul span').css('background','yellow');
$('ul>span').css('background','green');
$('ul .box~ *').css('background','red');
</script>

3、基本筛选器：

种类	用法
	$(“ul.menu>li:first”)
	$(“ul.menu>li:last”)
–	$(“ul.menu>li:not(.li2)”)
偶数获取	$(“ul.menu>li:even”)
奇数获取	$(“ul.menu>li:odd”)
按照索引来获取	$(“ul.menu>li:eq(2)”)
获取大于索引	$(“ul.menu>li:gt(2)”)
获取所有的h标签	$(":header")
获取获得焦点的元素	$(“input:focus”)
直接获取html	$(":root")

4、内容选择器：

种类	用法
包含某个内容	$(“div:contains(‘今’)”)
直接获取空元素	$(“div:empty”)
匹配包含某个元素的父元素	$(“ul:has(.li2)”)
匹配的元素必须是父元素	$(“div:parent”)
根据元素的显示隐藏来匹配元素	$(“button:visible”) $(“button:hidden”)
根据元素的属性来匹配元素	$(“button[id]”) $(“button[id][class]”) $(“button[id=‘btn’]”) $(“button[id=‘btn’][class=‘btn’]”) $(“button[id!=‘btn’]”) $(“button[id!=‘btn’][class!=‘btn’]”)
获取的属性值以什么开头	$(“button[id^=‘b’]”)
获取的属性值以什么结尾	$(“button[id $=‘n’]”)
获取的属性值包含什么	$(“button[id*=‘n’]”)

5、过滤选择器：

种类	用法
匹配第一个子元素	$(“ul>li:first-child”)
匹配最后一个子元素	$(“ul>li:last-child”)
匹配父元素 里面元素的第一个	$(“ul>li:first-of-type”)
匹配父元素 里面元素的最后一个	$(“ul>li:last-of-type”)
括号里面写的是序号 1·开始	$(“ul>li:nth-child(2)”)
括号里面写的是序号 1·开始 后往前	$(“ul>li:nth-last-child(2)”)
后往前 按类型获取标签里面的最后一个	$(“ul>:nth-last-of-type(1)”)
前往后 按类型获取标签里面的第一个	$(“ul>:nth-of-type(1)”)
匹配的元素必须是父元素的唯一子元素	$(“ul:only-child”)
获取父元素里面同类型标签里面只有唯一的一个标签 全部获取到	$(“ul>p:only-of-type”)

6、表单元素选择器：

匹配所有 input, textarea, select 和 button 元素	$(":input")
获取单行文本框的	$(":text")
获取密码框的	$(":password")
获取单选按钮的	$(":radio")
获取复选框的	$("：checked")
获取表单提交的	$(":submit")
获取重置按钮	$(":reset")
获取CheckBox radio 被选择的元素	$(“input:checked”)
匹配被选择的下拉的option	$(“select option:selected”)