您的位置:首页 > Web前端 > JQuery

jQuery---节点操作(上)

2019-01-18 19:07 239 查看

节点操作(上)

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#txt {
color: #FF0000;
}
</style>
<script src="../js/jquery.min.js"></script>

</head>

<body>
<!--  节点操作:
*  1.创建节点
*      DOM:document.createElement("标签名");
*      jQuery:$("<h1 title='标题'>我是一个h1标签</h1>");
*  2.添加节点
*      DOM:
*          父元素节点.appendChild(子元素节点); 在父元素内部末尾追加一个节点
*          父元素节点.insertBefore(子元素节点, 参照节点) 在父元素中的参照节点前面添加一个节点
*      jQuery:
*          在内部添加节点: 参照了父元素节点
*              -- 在内部父节点末尾插入节点
*                    父节点.append(需要添加的子节点);
*                    需要添加的子节点.appendTo(父节点);
*              -- 在内部父节点开头添加节点
*                    父节点.prepend(需要添加的子节点);
*                    需要添加的子节点.prependTo(父节点);
*          在外部添加节点:不需要参照父节点
*              -- 在参照元素前面添加节点
*                    参照节点.before(需要添加的节点);
*                    需要添加的节点.insertBefore(参照节点);
*              -- 在参照元素后面添加节点
*                    参照节点.after(需要添加的节点);
*                    需要添加的节点.insertAfter(参照节点);
*   3.删除节点
*    和DOM的删除节点不同,jQuery删除节点直接用节点本身.remove()方法
*        -- jQuery对象.remove(); 删除这个“jQuery对象”
*        -- jQuery对象.remove("筛选(CSS选择器)"); 删除符合筛选条件的“jQuery对象”
*   例如:$("#box>h3").remove(".cont");
*   4.清空节点:清空该节点的文本内容和子节点
*        -- jQuery对象.empty();
* 不建议使用empty方法来清空节点,因为js引擎会遍历所有匹配的元素,再依次调用remove()删除
* 例如$("#box>span"),先要找到所有的span,再遍历这些span元素,然后依次调用remove()方法
* 一个个的删
*   建议使用html("")代替empty()
-->
<div id="box">
我是普通文本<br/>
<span>我是第一个span标签</span>
<span id="second">我是第二个span标签</span>
<div id="txt">我是div标签</div>
<h3 class="cont">我是第1个h3元素</h3>
<h3>我是第2个h3元素</h3>
<h3 class="cont">我是第3个h3元素</h3>
<p>
<div>我是p内部的div</div>
</p>
</div>

<button id="btn1">末尾追加一个元素[内部]</button>
<button id="btn2">开头添加一个元素[内部]</button>
<button id="btn3">在参照元素前插入一个元素[外部]</button>
<button id="btn4">在参照元素后插入一个元素[外部]</button>
<button id="btn5">删除节点</button>
<button id="btn6">清空节点(删除文本和后代节点)</button>
<button id="btn7">删除ul里的li节点</button>
<hr>
畅销手机品牌
<ul style="background-color: yellow;">
<li>苹果</li>
<li class="phone">三星</li>
<li>小米</li>
<li class="phone">魅族</li>
<li>华为</li>
</ul>
<script>
$("#btn7").click(function(){
//$("ul>li").remove();
$("ul>li").remove(".phone");
});
$("#btn1").click(function(){
//创建一个元素,使用$(html字符串)
var $h2=$("<h2>我是h2元素</h2>");
//$("#box").append($h2);
//子节点.appendTo(父元素)
$h2.appendTo( $("#box"));
})
$("#btn2").click(function(){
//创建一个元素,使用$(html字符串)
var $h1=$("<h1>我是h1元素</h1>");
// 开头添加:父节点. prepend(子节点)
// $("#box").prepend($h1);
//子节点,prependTo(父节点)
$h1.prependTo($("#box"));
})
$("#btn3").click(function(){
//在 id="txt"的div前面插入一个span元素
var $span=$("<span style='color:red'>我是第3个span</span>")
$("#txt").before($span);
})
$("#btn4").click(function(){
//在 id="txt"的div后面插入一个p元素
var $p=$("<p style='color:blue'>我是1个段落</p>")
$("#txt").after($p);
})
$("#btn5").click(function(){
//删除id=second的span元素
// $("span#second").remove();
//删除div中的class="cont"的h3元素
$("#box>h3").remove(".cont");

})

$("#btn6").click(function(){
//			      	 /删除id=box的div里面所有的span
$("#box>span").empty();
})
</script>
</body>

</html>

节点操作(下)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: yellow;
}
#des {
width: 200px;
background-color: blue;
}
</style>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
/**
* 复制节点:
*  语法:需要复制的节点.clone();
*      返回一个复制好的jQuery对象(副本),包含了子节点。
*      如果clone(true)携带参数为true,那么代表把节点的事件一起复制。
*      如果没有带参数,那么不会复制节点的事件
*/
$("#btn").click(function(){
// 复制节点
var $copy=  $("#src").clone();
//将复制好的jQUery对象添加到des元素中
$("#des").append($copy);
})

$("#src").click(function(){
console.log("src元素的单击");
})
})
</script>
</head>
<body>
<div id="src">
<p>我是一个p标签</p>
</div>
<hr>
<div id="des">

</div>

<button id="btn">复制节点</button>

</body>
</html>

遍历节点(祖先)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent {
width: 400px;
height: 400px;
border:1px solid yellow;
}
#parent_2 {
width: 200px;
height: 200px;
border:1px solid green;
}
#child {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<div id="parent">
<div id="parent_2">
<div id="child">我是child</div>
</div>
</div>
<script>
/**
* 节点遍历操作:
*    1.节点遍历-父元素
*        -- 找直接父元素
*          语法:子元素.parent()
*        -- 找祖先元素
*          语法: 子元素.parents() 找到全部的父辈元素
*          语法: 子元素.parents("CSS选择器"): 找到指定的父辈元素
*/
$("#child").parent().css("background-color","yellow");

</script>
</body>
</html>

遍历节点(后代)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent {
width: 400px;
height: 400px;
background-color: yellow;
}

#child {
width: 250px;
height: 250px;
background-color: red;
}
</style>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<div id="parent">
<div id="child">
<p>我是一个p标签</p>
<h1>strong</h1>
</div>
<p>我是一个p标签</p>
</div>
<script>
/**
* 节点遍历操作:
*    1.节点遍历-父元素
*        -- 找直接父元素
*          语法:子元素.parent()
*        -- 找祖先元素
*          语法: 子元素.parents() 找到全部的父辈元素
*          语法: 子元素.parents("CSS选择器") 找到指定的父辈元素
*    2.节点操作-后代
*        -- 找直接子元素(可以有多个)
*           语法:父元素.children() 找到全部的亲儿子
*           语法:父元素.children("CSS选择器") 找到指定的亲儿子
*        -- 找后代元素
*           语法:父元素.find("*") 找到全部的后代元素
*           语法:父元素.find("CSS选择器") 找到指定的后代元素
*
*/

// console.log($("#child").children("p"));
console.log($("#parent").find("p"));
</script>
</body>
</html>

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: