js、jq 节点、元素获取

      /* js */
        var test = document.getElementById(‘test‘);
        var parent = test.parentNode; // 父节点
        var chils = test.childNodes; // 全部子节点
        var first = test.firstChild; // 第一个子节点
        var last = test.lastChile; // 最后一个子节点 
        var previous = test.previousSibling; // 上一个兄弟节点
        var next = test.nextSibling; // 下一个兄弟节点

var parent = test.parentElement; // 父节点元素
        var first = test.firstElementChild; // 第一个子节点元素
        var last = test.lastElementChile; // 最后一个子节点 元素
        var previous = test.previousElementSibling; // 上一个兄弟节点元素
        var next = test.nextElementSibling; // 下一个兄弟节点元素

/* jq */
        $("#test").parent(); // 父节点
        $("#test").parents(); // 所有祖先元素
        $("#test").parents(".content"); //所有是content元素的祖先元素。
        $("#test").children(); // 全部子节点
        $("#test").children("#content");
        $("#test").contents(); // 返回#test里面的所有内容,包括节点和文本
        $("#test").contents("#test");
        $("#test").prev();  // 上一个兄弟节点
        $("#test").prevAll(); // 之前所有兄弟节点
        $("#test").next(); // 下一个兄弟节点
        $("#test").nextAll(); // 之后所有兄弟节点
        $("#test").siblings(); // 所有兄弟节点
        $("#test").siblings("#content");
        $("#test").find("#content");

//元素筛选
        // 以下方法都返回一个新的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中所有奇数顺序的元素

原文地址:https://www.cnblogs.com/double330/p/12539168.html

时间: 2024-10-17 20:07:08

js、jq 节点、元素获取的相关文章

关于JS(原生js+jq)中获取、设置或者删除元素属性和获取元素值

一.JS获取.设置或者删除元素属性 原生js: $("要获取属性class/id名").getAttribute("属性"); $("要设置属性class/id名").setAttribute("属性","属性值"); $("要删除属性class/id名").removeAttribute("属性"); jq: $("要获取属性class/id名"

Jquery 第二课(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

js学习进阶-元素获取及样式设置

var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <article> <img src = "..." /> <div> <img src = "..." /> </div> </article> 获取2个img元素. 另一个方法querySelector()只返

2015.7.22 第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

js|jq获取兄弟节点,父节点,子节点

08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes; // 全部子节点 var first = test.firstChild; // 第一个子节点 var last = test.lastChile; // 最后一个子节点 var previous = test.previousSibling; // 上一个兄弟节点 var next = test

js获取HTML DOM节点元素方法总结

1. 通过顶层document节点获取:    (1)document.getElementById(elementId) :通过ID获得节点,如果页面上含有多个相同id的节点,那么只返回第一个节点.   (2)document.getElementsByName(elementName) :通过name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组.然后,我们可以通过要获取节点的某个属性来循环判断是否为需要的节点.            例如:在HTML中

jQuery框架使用,jq选择器,jq操作页面内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息,js/jq页面加载完毕事件,jq事件

jq选择器 // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取的是jq对象数组 // 拿到指定的页面元素jq对象 $('css3选择器语法').eq(index); var $box = $(".box").eq(1); 获取的是jq对象数组 // jq 转 js ( jq对像就是由数组包裹的js对象 ) box1 = $box[0] 从数组里取出来 box1 = $box.g

Js操作DOM元素及获取浏览器高宽

在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaS