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.nextSibling; // 下一个兄弟节点

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

注意操作父来控制子必须给子元素赋予一个变量

二.jq

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

#元素筛选
// 以下方法都返回一个新的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/pythonywy/p/11378875.html

时间: 2024-07-30 13:47:53

js|jq获取兄弟节点,父节点,子节点的相关文章

javascript 获取HTML DOM父、子、临近节点

在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i

EasyUI treegrid 实现点击父节点加载子节点

今天在项目中遇到问题,要实现 EasyUI   treegrid 实现点击父节点加载子节点 第一反应是去百度一下,谷歌一下,发现网上的回答不是懒加载就是在onBeforeExpand调用append方法 我决定使用第二种方法,定义treegrid的onBeforeExpand方法,在里面调用appen方法. 然而当我兴冲冲的运行的时候,出问题了, Firefox出现too much recursion异常提示 在网上看了一下这个问题的出现原因,大家都说是,非法使用了js关键字,可是我看了几遍代码

根据父节点编号查询子节点名称,孙节点个数

新建一个部门表 DROP TABLE IF EXISTS `dept`; CREATE TABLE `dept` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '标识列', `name` varchar(255) NOT NULL COMMENT '名称', `pid` int(11) NOT NULL COMMENT '父级编号', `num` int(11) NOT NULL DEFAULT '100' COMMENT '排序号', PRIMA

一文带你彻底明白如何实现动态添加子节点及修改子节点属性

? 终于看完了官方的教程,开始用 Cocos Creator 做第一个游戏——<消灭病毒-重力版>(PS:等做完之后会出一个完整的教程,敬请期待┗( ▔, ▔ )┛!),可是第一步就遇到了坑,本来想动态的通过预制件来添加病毒节点,并修改病毒的血量,可是添加节点之后无论如何都不能对节点的属性进行修改,查了半天资料原来是没有获取子节点的组件,白白浪费了两个小时,这就是自学的弊端吧,有一个好的老师真的是太重要了!为了让大家少走弯路,今天写一个 Demo 来教大家如何实现动态添加子节点及修改子节点属性

winform treeview 通过节点名称添加子节点

/// <summary> /// 添加人员节点(利用TreeNodeCollection) /// </summary> /// <param name="tnc">TreeNodeCollection(TreeView的节点集合)</param> /// <param name="pid_val">父id的值</param> /// <param name="id"

删除TreeView节点以及其子节点

//1.删除TreeView节点以及其子节点procedure TForm2.Button1Click(Sender: TObject);var TreeNode:TTreeNode;begin  if TreeView1.Selected <> Nil then  Begin    TreeNode := TreeView1.Selected.getFirstChild;    while TreeNode <> nil do    begin      TreeNode.Del

【JS学习笔记】DOM基础-首尾子节点,兄弟节点

一.DOM节点 (1)首尾子节点 有兼容性问题 firstChild.firstElementChild firstChild在高版本的浏览器上具有兼容问题,firstChild在高版本浏览器中指的是文本元素. firstElementChild高级浏览器下可以使用,在IE6-8下反而不兼容. 解决兼容性的办法是使用if进行判断 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

使用JS/JQ获取iframe里面的元素

首先实现父级通过iframe访问子级DOM元素有以下几点需要特别注意的 1,需要在服务器的情况下访问,可以使用本地服务器 2,需要使用入口函数(当初被这个坑惨了) 3,这种方法跨域访问不了 >*使用本地服务器 首先建立两个文件分别命名为父级parantN.html和子级Child.html两个html文件,先看看html文件代码. 父级parantN.html <iframe id='myIframe' name="myIrame" src="Child.html

小例子-使用JS/JQ获取a标签的href网址

最初的想法只是想要添加一个点击事件就可以跳到设定的窗口. 本身就是把window.location.href = href添加进事件里面就可以解决了.后面自己把自己搞糊涂了. 这里主要是说使用JS和JQ获取a标签的href网址,使用比较简单,基本就是拿来用就可以了. 先看看html部分的代码 <div> <a id="demo" href="https://www.baidu.com"></a> </div> <