js操作對象
阿新 • • 發佈：2017-11-02
open 兄弟節點 下標 wid append 區別 tex parent second 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Dom的分類</title>
<!--
xml dom :針對於 xml文件的操作
html dom :處理html頁面 document.forms[0]
css dom :操作css element.style.屬性名
dom core:核心！只要是支持dom編程語言都可以使用！
javaSc對ript（jQuery）對上面的dom操作都提供了支持！
jQueryjavaScript中的dom操作 進行了封裝！
Dom的分類
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>節點的操作</title>
</head>
<body>
<ul>
<li>大家辛苦了</li>
<li>不交作業了</li>
<li>就是不交</li>
<li>氣死你</li>
<li>傷害了誰？</li>
</ul>
<button type="button" id="addLi">新增子節點</button>
<button type="button" id="addUl">新增同輩節點</button>
<button type="button" id="updateLi">替換下標為2節點</button>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(
節點的操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>刪除節點</title>
<!--
empty(), remove(), detach()三者的區別
empty():只能清空節點的內容和子元素！節點本身不會被刪除！
remove():
01.刪除整個節點，包含自身和子元素！
02.刪除了節點所對應的事件
detach():
01.刪除整個節點，包含自身和子元素！
02.不會刪除節點所對應的事件
-->
</head>
<body>
<div id="main">
main
<div id="first">first
<div>裏面的子元素</div>
</div>
</div>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var $first=$("#first");
$first.click(function(){
alert("first");
})
// $first.empty();
// $first.remove();
$first.detach();
$first.prependTo("body");
})
</script>
</body>
</html>
刪除節點
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>attr屬性</title>
<!--
attr():
01.如果只有一個參數 ，就是獲取對應屬性的值
02.如果有兩個參數 ，就是設置對應屬性的值
-->
</head>
<body>
<img src="../images/cat.jpg">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("img").click(function(){
//獲取元素指定的屬性值
var $src= $(this).attr("src");
alert($src);
//增加鼠標懸停時的提示文字
$(this).attr({"title":"這是一只可愛的小貓咪","width":"200px"});
//清除對應的屬性值
$(this).removeAttr("src");
})
})
</script>
</body>
</html>
attr屬性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>獲取同輩和父輩元素</title>
</head>
<body>
body
<div id="main">
main
<div id="first1">
first1
<div id="second1">
second1
<div id="third1">
third1
</div>
</div>
</div>
<div id="first2">
first2
<div id="second2">
second2
</div>
</div>
<div id="first3">
first3
<div id="second3">
second3
</div>
</div>
</div>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//獲取main的子元素個數
alert("main的子元素個數"+$("#main").children().length);
//設置first1之後的兄弟節點的樣式
// $("#first1").next().css({"color":"red"});
//設置first2之前的兄弟節點的樣式
//$("#first2").prev().css({"color":"red"});
//所有同輩元素 之前和之後
//$("#first2").siblings().css({"color":"red"});
//設置first1的父級元素
// $("#first1").parent().parent().css({"color":"red"});
//設置third1的祖先元素
$("#third1").parents().css({"color":"pink"});
})
</script>
</body>
</html>
獲取同輩和父輩元素
js操作對象