jQuery基础样式——选择器

一、符合CSS规范的选择器

问题一：以下是一段HTML结构，通过jQuery的基本选择器，我们有多少方法可以获取？<div id="left" class="may"></div>

 $('.may') //类选择器—— document.getElementsByClassName('may');
 $('#left')//ID选择器——document.getElementById('left');
 $("div")// 元素选择器——document.getElementsByTagName('div');
 $("*") //全选择器 ——document.getElementsByTagName(*);

层级选择器
问题二：通过选择器方法，判断选择器名称

$( "parent > child" )//子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。
$("prev + next")//后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等
$("ancestor descendant")//相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素
$("prev ~ siblings")//一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器

上面这几种选择器和css中的选择器非常相似，除此之外，jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器

二、筛选选择器

筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头

2.1基本筛选选择器
基本筛选选择器针对的都是元素DOM节点

B321CB2C-DF21-40AE-BDE2-23C1BD05811B.png

2.2内容筛选选择器
内容筛选选择器，体现在筛选它所包含的子元素或者文本内容上

内容筛选选择器

1. :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
2. 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
3. :parent与:empty是相反的，两者所涉及的子元素，包括文本节点

2.3可见性筛选选择器

可见性筛选选择器

元素隐藏：

1. CSS display的值是none。
2. type="hidden"的表单元素。
3. 宽度和高度都显式设置为0。
4. 一个祖先元素是隐藏的，该元素是不会在页面上显示
5. CSS visibility的值是hidden
6. CSS opacity的指是0
   元素显示：
7. 如果元素中占据文档中一定的空间,元素被认为是可见的
   2.元素的visibility: hidden 或 opacity: 0被认为是可见的

2.4属性筛选选择器
属性选择器让你可以基于属性来定位一个元素。

2.5元素筛选选择器

F130B894-2FC9-46AF-A3D8-4BAFF4ACC3A5.png
//查找class="first-div"下的第一个a元素
//针对所有父级下的第一个
$('.first-div a:first-child').css("color", "#CD00CD”);

//查找class="first-div"下的最后一个a元素
//针对所有父级下的最后一个
//如果只有一个元素的话，last也是第一个元素
$('.first-div a:last-child').css("color", "red”);
//查找class="first-div"下的只有一个子元素的a元素
$('.first-div a:only-child'.css("color", "blue”);
//查找class="last-div"下的第二个a元素
$('.last-div a:nth-child(2)').css("color", "#CD00CD”);
//查找class="last-div"下的倒数第二个a元素
$('.last-div a:nth-last-child(2)').css("color", "red”);
2.6子元素筛选选择器

2.7表单元素选择器
表单元素

    <form>
        <input type="text" value="text类型"/>
        <input type="password" value="password"/>
        <input type="radio"/>
        <input type="checkbox"/>
        <input type="submit" />
        <input type="image" />
        <input type="reset" />
        <input type="button" value="Button" />
        <input type="file" />
    </form>

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]’)

36056473-129D-403B-9117-F62C69FAE2B7.png

2.8表单对象属性筛选选择器
表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选

D111BEF6-23A5-4C09-B22D-9E55FE3A9E93.png

注意事项：

1. 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
2. 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

2.9特殊选择器this
this，是JavaScript中的关键字，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imooc

var imooc = { 
      name:"慕课网", 
     getName:function(){ 
              //this,就是imooc对象 
              return this.name; 
     }
 }
imooc.getName(); //慕课网

在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用：给页面一个P元素绑定一个事件: 通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可

p.addEventListener('click',function(){ 
    //this === p
     //以下两者的修改都是等价的
     this.style.color = "red";
     p.style.color = "red";
 },false);

把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了

$('p').click(function(){     
    //把p元素转化成jQuery的对象     
    var $this= $(this)
    $this.css('color','red')
})