版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34983808/article/details/80719280
1、层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="css/mycss.css">
<style>
.color_info {
color: pink;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner" id="inner">
<p>www.zbiti.com-11</p>
<ul>
<li>www.zbiti.com-1</li>
<li>www.zbiti.com-2</li>
<li>www.zbiti.com-3</li>
<li>www.zbiti.com-4</li>
<li>www.zbiti.com-5</li>
<li>www.zbiti.com-6</li>
</ul>
<ol>
<li>www.zbiti.com-7</li>
<li>www.zbiti.com-8</li>
<li>www.zbiti.com-9</li>
</ol>
<p>www.zbiti.com-10</p>
</div>
</div>
<script>
$(function () {
})
/*
//ul下一个兄弟ol
$("#inner ul").next().addClass("color_info")
//ul后面所有兄弟ol,p
$("#inner ul").nextAll().addClass("color_info")
//ul的儿子li
$("#inner ul").children().addClass("color_info")
//ul的所有兄弟
$("#inner ul").siblings().addClass("color_info")
//ul的儿子的第一个li
$("#inner ul").children().first().addClass("color_info")
//ul的儿子的最后一个li
$("#inner ul").children().last().addClass("color_info")
//ul的儿子的偶数个
$("#inner ul").children(":even").addClass("color_info")
//ul的儿子的奇数个
$("#inner ul").children(":odd").addClass("color_info")
//ul的儿子中等于第一个li
$("#inner ul").children(":eq(0)").addClass("color_info")
$("#inner ul").children().eq(0).addClass("color_info")
//ul的儿子中大于第一个(包含第一个)
$("#inner ul").children(":gt(0)").addClass("color_info")
//ul的儿子中小于第4个(不包含第四个)
$("#inner ul").children(":lt(3)").addClass("color_info")
//ul的儿子中除了第一个li
$("#inner ul").children().not(":first").addClass("color_info")
$("#inner ul").children(":not(\":first\")").addClass("color_info")
*/
$("#inner ul").children().eq(0).addClass("color_info")
//自定义log函数
var log = function () {
console.log.apply(console, arguments)
}
</script>
</body>
</html>
效果：
2、DOM操作
原生DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="css/mycss.css">
<style>
.color_info {
color: pink;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner" id="inner">
<p>www.zbiti.com-11</p>
<ul>
<li>www.zbiti.com-1</li>
<li>www.zbiti.com-2</li>
<li>www.zbiti.com-3</li>
<li>www.zbiti.com-4</li>
<li>www.zbiti.com-5</li>
<li>www.zbiti.com-6</li>
</ul>
<ol>
<li>www.zbiti.com-7</li>
<li>www.zbiti.com-8</li>
<li>www.zbiti.com-9</li>
</ol>
<p>www.zbiti.com-10</p>
</div>
</div>
<script>
$(function () {
})
//原生DOM操作
//创建元素节点
var p = document.createElement("p")
p.className = "color_info"
//添加元素节点到指定DOM树的某个节点
var inner = document.getElementById("inner")
inner.appendChild(p)
//创建文本节点
var textNode = document.createTextNode("www.zbiti.com-12")
p.appendChild(textNode)
//添加id属性
//参数：属性名、属性值
p.setAttribute("id", "new_id")
//添加类
// p.setAttribute("class", "new_class1") 会覆盖之前的类名
p.classList.add("new_class1", "new_class2")
//添加点击监听
//参数：事件类型、回调函数名、是否允许事件冒泡
p.addEventListener("click", mylistener, false)
function mylistener() {
alert("新添加的监听回调函数")
//根据类名取得DOM元素对象
var myp = document.getElementsByClassName("new_class1")
var myclass = myp[0].getAttribute("class").split(" ")
// var myp = document.getElementById("new_id")
//var myclass = myp.getAttribute("class"
log("myp值:",myp,"myclass值:", myclass,"myp长度:",myp.length,"myclass长度:",myclass.length)
log("开始遍历类名")
for (var i = 0; i < myclass.length; i++) {
log(myclass[i] == "new_class1")
}
log("结束遍历类名")
}
//定义log函数
var log = function () {
console.log.apply(console, arguments)
}
</script>
</body>
</html>jQuery DOM操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="css/mycss.css">
<style>
.color_info {
color: pink;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner" id="inner">
<p>www.zbiti.com-11</p>
<ul>
<li>www.zbiti.com-1</li>
<li>www.zbiti.com-2</li>
<li>www.zbiti.com-3</li>
<li>www.zbiti.com-4</li>
<li>www.zbiti.com-5</li>
<li>www.zbiti.com-6</li>
</ul>
<ol>
<li>www.zbiti.com-7</li>
<li>www.zbiti.com-8</li>
<li>www.zbiti.com-9</li>
</ol>
<p>www.zbiti.com-10</p>
</div>
</div>
<script>
var log = function () {
console.log.apply(console, arguments)
}
$(function () {
})
//jQuery DOM操作
//创建元素节点
var $p = $('<p class="color_info">www.zbiti-13</p>')
//添加元素节点到指定DOM树的某个节点
$("#inner").append($p)
//添加类名
// $p.addClass("new_class1")
// $p.addClass("new_class2")
$p.addClass("new_class1 new_class2 new_class3")
//添加id
$p.attr("id","new_id")
//myclass类型是string
var myclass = $p.attr("class")
log("myclass类型:", typeof myclass, "myclass值：", myclass)
//newmyclass类型是Array
var newmyclass = myclass.split(" ")
log("newmyclass类型:", newmyclass.constructor==Array, "newmyclass值：", newmyclass)
//添加点击监听
$p.on({
click:clickfn
})
function clickfn() {
alert("新添加的点击监听回调函数")
}
</script>
</body>
</html>参考：
选择器
https://segmentfault.com/a/1190000007830199
https://segmentfault.com/a/1190000014522257#articleHeader3
https://segmentfault.com/a/1190000010555092
jQuery DOM操作
https://github.com/chokcoco/jQuery-
https://segmentfault.com/a/1190000010633617
https://segmentfault.com/a/1190000004260332#articleHeader21
https://segmentfault.com/a/1190000000536289#articleHeader0
原生DOM操作
https://segmentfault.com/a/1190000004076145#articleHeader6
https://segmentfault.com/a/1190000006671371
https://segmentfault.com/a/1190000009588427#articleHeader20
https://segmentfault.com/a/1190000006150186