前端 -＞ js原生选择器,jQuery选择器 基本选择器(ID选择器,元素选择器,类名选择器,复合选择器,通配符选择器)

jQuery基本选择器

  1. ID选择器
            ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以iQuery包装集的形式返回给对象。
            使用公式:$("#id")
            示例：$("#box")    //获取id属性值为box的元素
            <input id='box'/>

  2. 元素选择器
            元素选择器是根据元素名称匹配相应的元素。
            元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。
            使用公式：$("element")
            示例：$("div")    //获取所有div元素
            <div></div>

 3.类名选择器
            类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。
            使用公式：$(".class")
            示例：$(".box")     //获取class属性值为box的所有元素
            <p class="box"></p>

  4.复合选择器
            复合选择器将多个选择器（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号","分隔，
            只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集
            利用jQuery索引器可以取得集合中的jQuery对象。
            注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个匹配的元素合并后一起返回。
            使用公式：$("selector1,selector2,......,selectorN")
            selector1:一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等
            selector2:另一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等
            selectorN:（可选择）任意多个选择器，可以是ID选择器、元素选择器或类名选择器等
            示例：$("div,#btn")    //要查询文档中的全部的<div>元素和id属性为btn的元素

   5.通配符选择器
        $("*")   //取得页面上所有的DOM元素集合的jQuery包装集

js选择器(原生选择器)

JS选择器的主要作用
       JS选择器主要用来获取HTML页面中的元素，将页面中的元素保存到一个对象中
       然后就可以对这些对象的属性值进行相应操作以实现一些动态效果，以达到页面的生动，易用。
       需要注意的一点是操作的一定是对象，直接将元素当做对象使用是不行的。
       
       JS选择器是将对象对应的元素的属性直接进行操作，所以其改变的style的值是直接改变行间样式
       优先级远高于CSS样式，所以使用时应注意与已经完成的CSS样式的取舍。

js中原生的选择器主要有以下四种
document.getElementById()
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagName()

1.document.getElementById()
Id选择器
通过Id属性来获取对象
HTML部分

	<div id="div1">这是一个div标签</div>
JS部分
	var d1 = document.getElementById("div1")

2.document.getElementsByClassName()
ClassName选择器
通过ClassName属性获取对象
HTML部分
	<div class="c1">这是一个div标签</div>
    <p class="c1">这是一个p标签</p>
    <a class="c1">这是一个a标签</a>
    <span class="c1">这是一个span标签</span>
JS部分
	var c1 = document.getElementsByClassName("c1")
	
类名选择器获取到的是HTMLCollection对象，它是一个类似于数组的对象
如果需要选择具体的某一个Element对象，则需要做类似于取数组元素的操作，如下(以取第一项为例):
 	var c1 =  document.getElementsByClassName("div1")[0]

3.document.getElementsByTagName()
TagName选择器
通过元素名称来获取对象
HTML部分
	<ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
JS部分
	var li = document.getElementsByTagName("li")
TagName选择器获取到的内容与ClassName选择器一样，是HTMLCollection对象
所以，如果需要选择具体的某一个Element对象，也需要做类似于取数组元素的操作，如下(以取第一项为例):
	var li = document.getElementsByTagName("li")[0]

4.document.getElementsByName()
Name选择器
通过Name属性来获取对象
HTML部分
	<form action="" name="xx">
        <input type="radio" name="xx" value="1">1
        <input type="radio" name="xx" value="2">2
        <input type="radio" name="xx" value="3">3
    </form>
JS部分
	 var form = document.getElementsByName('xx')
Name选择器主要用于form标签等需要name属性的标签的获取，获取到的是NodeList对象
此类对象与HTMLCollection对象相似，所要获取的具体对象操作也类似于数组，如下:
	var form = document.getElementsByName("xx")[0]