JQuery选择器

ID选择器

• 一个用来查找元素的id属性
• $( “#id” )

 <script type="text/javascript">
    	//通过jQuery直接传入id
    	//id的唯一，只选择到了第一个匹配的id为imooc的div节点
        $("#imooc").css("border", "3px solid red");
    </script>

• 注意：
  （1）jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。
  （2）id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的。

类选择器

• 通过class样式类名来获取节点（可以多选）
• $(".class")

 <script type="text/javascript">
        //通过jQuery直接传入class
        //class选择器可以选择多个元素
        $(".imooc").css("border", "3px solid red");
    </script>

• 注意： 如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的。

元素选择器

• 根据给定（html）标记名称选择所有的元素

• $(“element”)

• 注意：
  （1）搜索指定元素标签名的所有节点，这个是一个合集的操作。
  （2）同样的也有原生方法getElementsByTagName()函数支持。

• 同样的效果，$(“p”)选取所有的p元素，通过css方法直接赋予样式

<script>
$("p").css("border","red");//添加红色边框
</script>

• divs是dom合集对象，通过循环给每一个合集中的div元素赋予新的border样式

<script>
var divs = document.getElementsByTagName('div);
//然后利用for循环进行一个一个遍历
for(var i=0;i<divs.length;i++){
	divs[i].style.border = "red";
}
</script>

全选择器

• 通配符 * 意味着给所有的元素设置默认的边距。

• $("*");

• 注意：
  （1）搜索指定元素标签名的所有节点，这个是一个合集的操作。
  （2）抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递"*"同样可以获取到.

• 全选择器的兼容性的问题:

• IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的

• getElementById的参数在IE8及较低的版本不区分大小写

• IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A

• IE8及较低的版本，浏览器不支持getElementsByClassName

层次选择器

• >（大于号）紧跟父子关系 如$(“div > p”)表示选择div下的子元素 p。

• + （加号） 紧跟兄弟关系 如$(“div + p”)表示选择div同层的左右相邻的p节点（即div后面的第一个兄弟节点）。

• ~ （波浪线）任意距离兄弟关系 如$(“div ~ p”)表示选择div同层的所有兄弟节点。

•   (空格) 任意层父子关系 如$(“div p”)表示选择div下的所有p节点（不管中间隔多少层）。

• ,   (逗号) 表示选择器组合，如$(“div p, span p”)表示div下p节点和span下p节点。

基本筛选选择器

• 注意：
  （1）:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选。
  （2）注意jQuery合集都是从0开始索引。
  （3）gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始。
• (1) $ (“input:not(:checked)+p”).css(“background-color”, “red”);
  选择input中没有被选中的元素，然后找出这些元素的直接兄弟元素
  你把这个选择拆开看就好懂了：既可以看看$ (“input”)是什么效果，然后是$(“input:not(:checked)”)是什么效果，最后是 $(“input:not(:checked)+p”)是什么效果，一对比你就比较清楚了。
  （2） KaTeX parse error: Expected 'EOF', got '#' at position 30: ….css("color", "#̲CD00CD"); 查找di… (".div:first").css(“color”, “#CD00CD”);
  

内容筛选选择器

• 基本筛选选择器针对的都是元素DOM节点
• 注意：
  (1):contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素。
  (2)如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
  (3):parent与:empty是相反的，两者所涉及的子元素，包括文本节点。

//查找所有class='div'中DOM元素中包含内容为"contains"的元素节点
 //并且设置颜色
$(".div:contains(':contains')").css("color", "#CD00CD");

 //查找所有class='div'中DOM元素中包含标签"span"的元素节点
 //并且设置颜色
  $(".div:has(span)").css("color", "blue");

可见性筛选选择器

• 元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden
  
• :hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等
• 我们有几种方式可以隐藏一个元素：
• CSS display的值是none。
• type="hidden"的表单元素。
• 宽度和高度都显式设置为0。
• 一个祖先元素是隐藏的，该元素是不会在页面上显示
• CSS visibility的值是hidden
• CSS opacity的指是0
• 如果元素中占据文档中一定的空间,元素被认为是可见的。
• 可见元素的宽度或高度，是大于零。
• 元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

<script>
$(function(){
   $("#b1").click(function(){
     $("div:visible").hide();
   });
   $("#b2").click(function(){
      $("div:hidden").show();     
   });
});
         
</script>

• 注意：
  不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式.

属性筛选选择器

• 属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它们的威力的地方。

• 注意：
  （1）[attr=“value”]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type=“text”], input[type=“checkbox”]等
  （2）[attr*=“value”]能在网站中帮助我们匹配不同类型的文件

    <script type="text/javascript">
         //查找所有div中，属性name=p1的div元素
         $("div[name=p1]").css("border", "3px groove red"); 
    </script>

 <script type="text/javascript">
        //查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
        $("div[name='-']").css("border", "3px groove #00FF00"); 
    </script>

注意：当使用“”与‘’的时候，不能两对双引号或者两对单引号同时使用，应该交叉使用

<script type="text/javascript">
        //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
        $('div[name~="a"]').css("border", "3px groove #668B8B"); 
    </script>

元素筛选选择器

• 注意：
• :first只匹配一个单独的元素， 但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。
  这相当于:nth-child(1)
• :last 只匹配一个单独的元素，:last-child 选择器可以匹配多个元素：即为每个父级元素匹配最后一个子元素、
• 如果子元素只有一个的话，:first-child与:last-child是同一个
• :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
• jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
• nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

<script type="text/javascript">
        //查找class="first-div"下的第一个a元素
        //针对所有父级下的第一个
        $('.first-div a:first-child').css("color", "#CD00CD");
    </script>

表单元素选择器

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

    <script type="text/javascript">
        //查找所有 input, textarea, select 和 button 元素
        //:input 选择器基本上选择所有表单控件
        $(':input').css("border", "1px groove red"); 
    </script>

表单对象属性筛选选择器

• 表单对象选择器 指的是选中form下会出现的输入元素

• 可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选

• :input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button

• :button 会选择type=button的input元素和button元素

• :radio 会选择单选框

• :checkbox会选择复选框

• :text会选择文本框，但是不会选择文本域

• :submit会选择提交按钮

• :image会选择图片型提交按钮

• :reset会选择重置按钮

• 注意：

• 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器

• 在某些浏览器中，选择器:checked可能会错误选取到元素，所以保险起见换用选择器input:checked，确保只会选取元素

注意：:前面要加上查找的实体

  <script type="text/javascript">
         //查找所有input所有勾选的元素(单选框,复选框)
         //移除input的checked属性
        $("input:checked").removeAttr('checked')
    </script>

特殊选择器this

• this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者。

• 在javascript中使用：

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

var imooc = {
    name:"慕课网",
    getName:function(){
        //this,就是imooc对象
        return this.name;
    }
}
imooc.getName(); //慕课网
//在JavaScript中this是动态的，也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法)

• 在DOM中使用：
• his就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用:
• 假如给页面一个P元素绑定一个事件:

p.addEventListener('click',function(){
    //this === p
    //以下两者的修改都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);
//通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，
//所以再次修改这样对象的样式，只需要通过this获取到引用即可
 this.style.color = "red";//但是要考虑到浏览器的兼容模式
 
/*addEventListener()绑定事件的对象方法。addEventListener()含有三个参数，一个是事件名称，另一个是事件执行的函数，最后一个是事件捕获，obj.addEventListener("click",function(){},true/false);
以往的方法定义事件的话后面的会覆盖掉前面的事件函数，但是按这种方式写的话几个事件函数都会执行，最后是true和false的解释，事件在执行时都会有俩个流，一个是捕获事件流，另一个是冒泡事件流，进来的事件是捕获事件，出去的事件是冒泡事件，true的话会捕获进来时的，false的话会捕获出去时的*/

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

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

• 注意：
• this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
• $(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。