＜jQuery-节点方法＞

最新推荐文章于 2022-09-14 21:47:17 发布

好先生·

最新推荐文章于 2022-09-14 21:47:17 发布

阅读量126

点赞数

分类专栏： jQuery基础 JavaScipt基础文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45540964/article/details/110913406

版权

JavaScipt基础同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

jQuery基础

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div class="box">
		<p>hello0</p>
		<p><strong>hello1</strong></p>
		<p class="title">hello2</p>
		<h1>111</h1>
		<h2>222</h2>
		<p>hello3</p>
		<p>hello4</p>
	</div>
	<script src="./jquery-1.12.3/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
	//点击p获取内容
		$('p').click(function(){
			//this原生js对象
            console.log(this);
            //转换jQ对象
            console.log($(this));
            //建议获取内容使用jQ
            console.log($(this).html());
    //获取父节点,祖先节点
            console.log($(this).parent()[0]);//div
            console.log($(this).parents());//div>body>html
		    console.log($(this).parents('body'));//body
		});
    //点击div获取其第一层子节点
        $('.box').click(function(){
            console.log($(this).children());
        });
    //获取亲兄弟节点
        console.log($('.title').siblings());

    //获取某个节点后的节点
    	//获取1个
    	console.log($('.title').next());
    	//获取多个
    	console.log($('.title').nextAll());

    //获取某个节点之前的
    	//获取1个
    	console.log($('.title').prev());
    	//获取多个
    	console.log($('.title').prevAll());

    //查找后代子元素
    //继续查找将在strong内进行
    	console.log($('.box').find('strong'));
    	//查找失败
    	console.log($('.box').find('strong').find('h1'));
    //end方法返回上一个查找到的对象
    	console.log($('.box').find('h2').find('h1').end());
    //end对次使用,多次返回
    	console.log($('.box').find('h2').find('h1').end().end().find('h1'));
	</script>
</body>
</html>