JQuery选中标签

通过原生js选中想要操作的标签

操作对象标签

body：
<div id="first" class="blue"></div>
<div id="second" class="green"></div>
<div id="third" class="red"></div>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
</ul>

常见的选中标签的方式：

通过id选中标签

var div = document.getElementById("first")

通过querySelector方法查找同类标签的方式选中标签，不过这种选中的是同类标签中的第一个标签

var div = document.querySelector("div")

通过querySelectorAllfangfa 查找同类标签的方式选中标签，这个方法查找的是一个数组，选中标签时要添加一个索引值

var div = document.querySelectorAll("div")[0]

通过标签名查找标签这种方式找得的是一个数组类型的集合的所有div标签，所以要想想选中自己想要的标签要加上索引值

var div = document.getElementsByTagName("div")[0]

通过标签class值来选中标签，这种方式找到的也是一个数组集合，就算有一个div也要加索引

var div = document.getElmentsByClassName("blue")[0]

通过DOM节点查找标签 , DOM有三种节点：标签节点、文本节点、属性节点
childNodes方法获取的是文本节点和子标签节点,需要通过索引选中

var div = document.body.childNodes[1]

children方法只获取子标签，需要通过索引选中

var div = document.body.children[0]

JQ选中标签

首先，在使用JQ时要先引入JQ文件，而且JQ文件引入要先于script代码之前，否则无法识别js中的$符

通过id来找到指定的标签

var div = $("#first")

通过类名来找到指定的标签

var div = $(".red")

通过标签名字来找到指定的标签，当该标签有多个时，返回的是一个数组类型的集合，要加索引

var div = $("div")[0]

找到所有同类奇数标签

$("ul li:odd").css("background-color","greenyellow")

找到所有同类偶数标签

$("ul li:even").css("background-color","pink)

通过伪类选中标签：

选中第二个li标签

$("ul li:nth-child(2)").css("background-color","red")

选中第一个li标签

 $("ul li:first-child").css("background-color","blue")

选中最后一个li标签

$("ul li:last-child").css("background-color","orange")

猜你喜欢