jQuery节点操作
2019-12-12 本文已影响0人
Dxes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导入jQuery-->
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<!--1.获取节点
语法: $(选择器) - 选中选择器选中的标签对应的节点，返回一个jQuery对象
说明: 选择器 - CSS中选择器怎么写，这儿就怎么写
-->
<!-------------1)简单选择器: id、class、元素选择器--------------->
<p id="p1">我是段落1</p>
<p class="c1">我是段落2</p>
<a href="" class="c1">我是超链接1</a>
<h1 class="c1">我是标题1</h1>
<script type="text/javascript">
var pNode = document.getElementById('p1')
console.log(pNode)
//pNodes是jQuery对象
var pNodes = $('#p1')
console.log(pNodes)
console.log(pNodes[0])
var c1Nodes1 = document.getElementsByClassName('c1')
console.log(c1Nodes1)
for(x of c1Nodes1){
x.style.color = 'red'
}
//注意:jQuery对象的本质是一个容器， 容器中的元素是js节点!!!
var c1Nodes = $('.c1')
console.log(c1Nodes)
c1Nodes.css('font-size', '45px')
var allPNodes = $('p')
console.log(allPNodes)
</script>
<!-------------2)群组和后代选择器--------------->
<hr />
<div id="div1">
<div id="">
<p>我是段落3</p>
<a href="">我是超链接2</a>
</div>
<p>我是段落4</p>
</div>
<script type="text/javascript">
var pNodes2 = $('#div1>p')
console.log(pNodes2)
var pNodes3 = $('#div1 p')
console.log(pNodes3)
console.log($('a,p'))
</script>
<!-------------3)其他选择器--------------->
<hr />
<div id="div2">
<img src="img/rudder.png"/>
<p>我是段落5</p>
<h1 id="h1">我是标题2</h1>
<a href="">我是超链接3</a>
<p>我是段落6</p>
<img src="img/ghost.png"/>
<a href="">我是超链接4</a>
</div>
<script type="text/javascript">
//$('img+a') 选中紧跟着img标签的a标签
console.log($('img+a'))
//选中id是h1的标签后面所有同级的标签
console.log($('#h1~*'))
//选中id是h1的标签后面和它同级的所有的a标签
console.log($('#h1~a'))
//选中当前页面中的第一个p标签
console.log($('p:first'))
//选中当前页面中的最后一个p标签
console.log($('p:last'))
//选中id是div2中的第一个p标签
console.log($('#div2 p:first'))
//选中id是div2中的第一个标签
console.log($('#div2 *:first'))
</script>
</body>
</html>
