jquery 获取元素，节点，元素筛选

最新推荐文章于 2023-02-23 19:17:46 发布

阿里小码

最新推荐文章于 2023-02-23 19:17:46 发布

阅读量260

点赞数

分类专栏： jquery js 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44668640/article/details/118676592

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

jquery 获取元素节点，元素筛选

一、获取元素节点

var uls = $('ul li');
var parent = uls.parentNode;						// 父节点
var chils = uls.childNodes;							// 全部子节点
var first = uls.firstChild;							// 第一个子节点
var last = uls.lastChile;							// 最后一个子节点　
var previous = uls.previousSibling;					// 上一个兄弟节点
var next = uls.nextSibling;							// 下一个兄弟节点

$("#test1").parent();								// 父节点
$("#test1").parents();								// 全部父节点
$("#test1").parents(".mui-content");				// 全部节点中的某个节点
$("#test").children();								// 全部子节点
$("#test").children("#test1");						// 全部子节点中的某个节点
$("#test1").prev();									// 上一个兄弟节点
$("#test1").prevAll();								// 之前所有兄弟节点
$("#test1").next();									// 下一个兄弟节点
$("#test1").nextAll();								// 之后所有兄弟节点
$("#test1").siblings();								// 所有兄弟节点
$("#test1").siblings("#test2");						// 所有兄弟节点中的某个兄弟节点
$("#test").find("#test1");							// 查找当前元素后面的某个子元素

由于contents()有点特殊，我拿出来单独说

<body>
    <div><p>1234</p><span>lalal</span><h1>hhhh</h1></div>
</body>
<script>
    console.log($('div').contents());
</script>

// 在不换行的情况下，得到的结果如下
init(3) [p, span, h1, prevObject: init(1), context: document]
0: p
1: span
2: h1
context: document
length: 3
prevObject: init [div, prevObject: init(1), context: document, selector: "div"]
__proto__: Object(0)

<body>
    <div>
        <p>1234</p>
        <span>lalal</span>
        <h1>hhhh</h1>
    </div>
</body>
<script>
    console.log($('div').contents());
</script>

// 在换行的情况下，得到的结果如下
init(7) [text, p, text, span, text, h1, text, prevObject: init(1), context: document]
0: text
1: p
2: text
3: span
4: text
5: h1
6: text
context: document
length: 7
prevObject: init [div, prevObject: init(1), context: document, selector: "div"]
__proto__: Object(0)

在换行的情况下，每一次的换行都算是一个空格文本，都会被记载下来。

二、获取元素

// 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素
$("ul li").eq(1);						// 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)
$("ul li").first();						// 选取ul li中匹配的第一个元素
$("ul li").last();						// 选取ul li中匹配的最后一个元素
$("ul li").slice(1, 4);				// 选取第2 ~ 4个元素
$("ul li").filter(":even");			// 选取ul li中所有奇数顺序的元素

这是关于jquery常用的一些元素节点使用方法，如有误区请指正，欢迎补充

阿里小码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 获取元素，节点，元素筛选

jquery 获取元素节点，元素筛选一、获取元素节点var uls = $('ul li');var parent = uls.parentNode; // 父节点var chils = uls.childNodes; // 全部子节点var first = uls.firstChild; // 第一个子节点var last = uls.lastChile; // 最后一个子节点　var previous = uls.previousSibling
复制链接

扫一扫

专栏目录