jQuery節(jié)點操作
創(chuàng)建元素
- 語法：$('<li></li>);
追加元素1
- 向父元素最后追加
語法：父元素jQuery對象.append(新創(chuàng)建的jQuery對象);
語法：新創(chuàng)建jQuery對象.appendTo('父元素選擇器' 或 父元素jQuery對象)
var $newLi = $("<li>這是新的li標簽</li>");
var $ul = $("ul");
// 向父元素最后添加新的子元素
// $ul.append($newLi);
// $newLi.appendTo($ul);
$newLi.appendTo("ul");
- 向父元素最前面追加
語法：父元素jQuery對象.prepend(新創(chuàng)建的jQuery對象);
語法：新創(chuàng)建jQuery對象.prependTo('父元素選擇器' 或 父元素jQuery對象);
<script>
// 向父元素最前面添加
// $ul.prepend($newLi);
// $newLi.prependTo($ul);
$newLi.prependTo("ul");
</script>
追加元素2
- 向元素后面追加新的兄弟
語法：jQuery對象.after(新創(chuàng)建的jQuery對象); 語法：新創(chuàng)建jQuery對象.insertAfter('選擇器' 或 jQuery對象);
var $newLi = $("<li>這是新的li標簽</li>");
var $ul = $("ul");
var $oldLi = $(".old");
// 元素后面增加一個新的兄弟元素
// $oldLi.after($newLi);
$newLi.insertAfter($oldLi);
- 向元素前面追加新的兄弟
語法：jQuery對象.before(新創(chuàng)建的jQuery對象); 語法：新創(chuàng)建jQuery對象.insertBefore('選擇器' 或 jQuery對象);
var $newLi = $("<li>這是新的li標簽</li>");
var $ul = $("ul");
var $oldLi = $(".old");
// 元素前面添加一個新的兄弟元素
// $oldLi.before($newLi);
$newLi.insertBefore($oldLi);
刪除元素
- 語法：jquer對象.remove()
- 刪除誰就讓誰調(diào)用這個方法就行了
清空元素
- 清空方式1：jQuery對象.empty()：推薦使用，清空內(nèi)部的所有元素以及元素相關的事件
- 清空方式2：jQuery對象.html('')：僅僅清空內(nèi)部的元素，不清理內(nèi)存中的元素的事件
<script>
// 刪除元素自己
// $(".third").remove();
// 清空元素內(nèi)部的所有子節(jié)點
// 方法1： empty() 方法，清除所有子節(jié)點的同事，清除子節(jié)點上的事件
$("ul").empty();
// 方法2： html() 方法，將參數(shù)設置為空字符串
$(".box").html("");
</script>
jQuery克隆元素
- 語法：jQuery對象.clone(布爾值); 返回克隆好的元素
- 參數(shù)：默認是false,表示僅僅克隆內(nèi)容。 true，克隆內(nèi)容和事件
<body>
<div class="box">
<h2>標題1</h2>
<p>段落1</p>
</div>
<div class="demo">
<h2>標題2</h2>
<p>段落2</p>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(".box").click(function(){
alert("你好");
});
// 獲取 box 元素
var $box = $(".box");
// 克隆 box
// var $newBox = $box.clone(false); //只克隆內(nèi)容，不克隆事件
var $newBox = $box.clone(true); //克隆內(nèi)容，克隆事件
// // 添加到 body 最后
$("body").append($newBox);
</script>
</body>
操作元素的尺寸
wdith()和height()方法
操作的大小僅僅是內(nèi)容部分
- 設置：
語法：jQuery對象.width(數(shù)字); - 獲取：
語法：jQuery對象.width();
innerWidth()和innerHeight()方法
操作的大小是內(nèi)容部分 + padding
- 設置：
語法：jQuery 對象.innerWidth(數(shù)字); - 獲?。?br> 語法：jQuery 對象.innerWidth();
outerWidth() 和 outerHeight() 方法
操作的大小是內(nèi)容部分 + padding + border
- 設置：
語法：jQuery 對象.outerWidth(數(shù)字); - 獲取：
語法：jQuery 對象.outerWidth();
inner和outer這兩類方法的數(shù)據(jù)設置,將增加或減少的值設置給了 width 屬性
操作元素的位置
獲取元素距離文檔的位置
- 語法：jQuery 對象.offset();
- 返回一個對象，對象中包含了元素的位置
- 注意：offset() 方法獲取的元素的位置，永遠參照文檔,和定位沒有關系.
距離上級定位參考元素的位置
- 語法：jQuery 對象.position();
- 返回的一個對象，對象中包含了元素的位置
- 注意：position() 方法獲取的元素的位置,參照最近的定位元素（和定位有關系）
// 獲取元素距離文檔的位置
var $son = $(".son");
var offsetObj = $son.offset();
console.log(offsetObj)
console.log(offsetObj.left)
console.log(offsetObj.top)
// 獲取元素距離上級定位參考元素的位置
var positionObj = $son.position();
console.log(positionObj)
console.log(positionObj.left)
操作卷去的頁面間距
- 獲取
語法：jQuery 對象.scrollTop(); 返回數(shù)字 - 設置
語法：jQuery 對象.scrollTop(數(shù)字);
// 給元素添加滾動事件
$(".box").scroll(function () {
// 獲取滾動條卷走的距離
console.log($(this).scrollTop())
})
// 給文檔設置滾動事件
$(document).scroll(function () {
// 獲取滾動條卷走的距離
console.log($(this).scrollTop())
})
// 通過點擊返回頂部按鈕，將文檔的卷走的距離設置為 0
$(".backtop").click(function () {
// 設置 scrollTop 的值
$(document).scrollTop(0)
})
