使用jQuery操作DOM
dom : 文檔對象模型 ? ?就是HTML元素 ?
$() ? 函數的2個用法:
用法1:放入一個字符串(選擇器)表示獲取元素 ? 例如
$("p") $("#abc") ?$(".del")?
用法2:放入一個函數,表示文檔就緒函數 ? 例如
?$(function(){代碼...})
用法3:如下所示
jquery創建節點的方法如下:
1.創建節點 語法如下:
$("xxxxx");
xxx表示你要創建的dom元素 ? 例如 ?$("<p>我是p標簽<p>");
此時僅僅是創建了節點.理解為是孤兒節點. ?需要將其插入到某個節點中.
在任意位置創建新的節點
插入方法1:
append() 表示插入到指定元素內部的尾端.
語法:
$("aa").append("bb") ?
表示將bb插入到aa內部的尾端
插入方法2:prepend() 表示插入到指定元素內部的首端.
語法:
$("aa").prepend("bb")
?表示將bb插入到aa內部的首端
插入方法3:after() 表示插入到指定元素的后面. 兄弟關系
語法:
$("aa").after("bb") ?
表示將bb插入到aa的后面
插入方法4:before() 表示插入到指定元素的前面. 兄弟關系
語法:
$("aa").before("bb")
?表示將bb插入到aa的前面
刪除任意位置的節點
方法1: ?remove()
語法如下: ?
$("xx").remove();
?將xx元素徹底刪除 ?不僅刪除了值 而且刪除了標簽 ?
//方法2: ?empty() ?清空
語法如下: ?
$("xx").empty();
?將xx元素刪除值 但是不刪除標簽 ?
克隆節點
語法: ?
$("xxx").clone();
?將xxx元素復制一份
注意事項:上一步僅僅只是復制 ? 此時理解為孤兒節點. 任然需要通過append ?prepend ?after ?before進行粘貼
一些方法
隱藏XX元素
$("xx").hide();
顯示XX元素
$("xx").show();
來回切換:顯示或隱藏XX元素?
$("xx").toggle();
給元素添加類名為a
$("xx").addClass("a");
給元素移除類名為a
$("xx").removeClass("aa);
返回當前元素在兄弟中下標
$("xx").index();
獲取當前的元素
$(this);
jquery對象的特點: ?
調用任意方法的返回值 依然是它本身
$("p").addClass("a").addClass("b").addClass("c").click(function(){alert(123);}).mouseover(function(){alert(567)}).removeClass("c");
each方法的語法:
$("xx").each( function(){ 代碼體 } );
作用:遍歷xx元素.每遍歷一次 ?就執行一次代碼體.
客串知識點
parent()方法的作用:
<div><p><font>aaa</font></p>
</div><script src="js/jquery.js"></script><script>//需求:刪除font標簽的父親$("p").parent().remove();</script>