1. jQuery創(chuàng)建DOM標(biāo)簽
1.1 DOM動(dòng)態(tài)創(chuàng)建標(biāo)簽的方法
DOM時(shí)代我們通過(guò)document的createElement方法動(dòng)態(tài)創(chuàng)建標(biāo)簽。創(chuàng)建標(biāo)簽后,動(dòng)態(tài)的給他添加屬性。例如代碼:
// 動(dòng)態(tài)創(chuàng)建標(biāo)簽
var domDiv = document.createElment('div');
// 動(dòng)態(tài)創(chuàng)建屬性
domDiv.setAttribute('id', 'box');
// 動(dòng)態(tài)設(shè)置內(nèi)部html標(biāo)簽
domDiv.innerHTML = '<span>動(dòng)態(tài)span</span>';
// 動(dòng)態(tài)追加到body標(biāo)簽中
document.body.appendChild(domDiv);
1.2 jQuery動(dòng)態(tài)創(chuàng)建標(biāo)簽的方式
jQuery的構(gòu)造函數(shù)本身可以接收html標(biāo)簽的字符串來(lái)動(dòng)態(tài)創(chuàng)建HTML標(biāo)簽。
語(yǔ)法結(jié)構(gòu): jQuery(html, [props])
參數(shù):
-
html:用于動(dòng)態(tài)創(chuàng)建DOM元素的HTML標(biāo)記字符串,注意標(biāo)簽盡量閉合。 -
props:用于附加到新創(chuàng)建元素上的屬性、事件和方法
返回值:返回新創(chuàng)建標(biāo)簽的jQuery包裝對(duì)象
// jq的 appendTo,類似DOM的appendTo方法
$("<div><p>Hello</p></div>").appendTo("body");
// 兩次參數(shù)的情況
$("<div></div>", {
"class": "test", // 設(shè)置樣式類
text: "Click me!", // 設(shè)置內(nèi)容
click: function(){ // 設(shè)置點(diǎn)擊事件處理程序
$(this).toggleClass("test");
}
}).appendTo("body"); // 追加到body標(biāo)簽
2. DOM節(jié)點(diǎn)操作
2.1 添加子節(jié)點(diǎn)append(content|fn)方法
-
參數(shù):
-
content:類型String, Element, jQuery,添加的子節(jié)點(diǎn)。 -
fn(index,html):返回一個(gè)HTML字符串,用于追加到每一個(gè)匹配元素的里邊。接受兩個(gè)參數(shù),index參數(shù)為對(duì)象在這個(gè)集合中的索引值,html參數(shù)為這個(gè)對(duì)象原先的html值。
-
返回值:當(dāng)前父包裝對(duì)象,jQuery
實(shí)例:
<div id="msg">hi</div>
<script>
$(function(){
// 添加字符串
$("#msg").append('<span>你好</span>');
// 添加dom對(duì)象
var domDiv = document.createElement('div');
domDiv.innerHTML = "hi laoma q:515154084";
$("#msg").append(domDiv);
// 添加jQuery對(duì)象
var $span = $('<span>我是 jQuery對(duì)象</span>');
$("#msg").append($span);
$("#msg").append(function(index, oldHtml) {
return "<span>==" + index + "==</span>";
});
});
</script>
prepend(content|fn)方法跟append(content|fn)的使用方法一致,只不過(guò)一個(gè)是在最后追加子節(jié)點(diǎn),一個(gè)是在最前面追加子節(jié)點(diǎn)(prev vs after)
2.2 追加到appendTo(content)方法
- 參數(shù):content: 用于被追加的內(nèi)容選擇器,String類型。
- 返回值: 返回當(dāng)前的jQuery包裝對(duì)象。
- 實(shí)例:
$("<div>****</div>").appendTo('body');
prependTo(content)方法,跟appendTo(content)的使用方法一致,一個(gè)是追加到最后,一個(gè)是追加到最前。
2.3 元素之后插入節(jié)點(diǎn)after(content|fn)方法
- 參數(shù)
- content:插入到每個(gè)目標(biāo)后的內(nèi)容,類型可以:String,DOM,jQuery
- fn(index,html):函數(shù)必須返回一個(gè)html字符串。
- 返回值: jQuery包裝對(duì)象
- 實(shí)例
// 字符串
$('div').after('<p>1234</p>');
// jQuery對(duì)象
$("p").after($("#msg"));
// dom對(duì)象
$("p").after($("#msg")[0]);
// 傳入回調(diào)函數(shù)
$("div").after(function(index, html) {
return '<p>' + index + '</p>'
})
before(content|fn)方法正好是after(content|fn)相反的方法,用法一致。
2.4 插入某個(gè)元素之后insertAfter(content)方法
參數(shù): content:插入到每個(gè)目標(biāo)后的內(nèi)容,類型可以:String,DOM,jQuery。
把所有匹配的元素插入到另一個(gè)、指定的元素元素集合的后面。實(shí)際上,使用這個(gè)方法是顛倒了常規(guī)的$(A).after(B)的操作,即不是把B插到A后面,而是把A插到B后面。
$("p").insertAfter("#foo");
insertBefore(content)跟此方法相反。
2.5 包裹節(jié)點(diǎn)wrap(html|element|fn)方法
- 概述:
把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裹起來(lái)。
這種包裝對(duì)于在文檔中插入額外的結(jié)構(gòu)化標(biāo)記最有用,而且它不會(huì)破壞原始文檔的語(yǔ)義品質(zhì)。這個(gè)函數(shù)的原理是檢查提供的第一個(gè)元素(它是由所提供的HTML標(biāo)記代碼動(dòng)態(tài)生成的),并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素--這個(gè)祖先元素就是包裹元素。當(dāng)HTML標(biāo)記代碼中的元素包含文本時(shí)無(wú)法使用這個(gè)函數(shù)。因此,如果要添加文本應(yīng)該在包裹完成之后再行添加。
- 參數(shù):
- html, String類型,HTML標(biāo)記代碼字符串,用于動(dòng)態(tài)生成元素并包裹目標(biāo)元素
- element, Element類型,用于包裝目標(biāo)元素的DOM元素。
- fn: 生成包裹結(jié)構(gòu)的一個(gè)函數(shù),返回包裹結(jié)構(gòu)html
- 返回值:jQuery包裝對(duì)象
- 實(shí)例
<script>
// 把所有的段落用一個(gè)新創(chuàng)建的div包裹起來(lái)
$("p").wrap("<div class='wrap'></div>");
// 用ID是"content"的div將每一個(gè)段落包裹起來(lái)
$("p").wrap(document.getElementById('content'));
// 用原先div的內(nèi)容作為新div的class,并將每一個(gè)元素包裹起來(lái)
</script>
<!-- HTML 代碼: -->
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<script>
// jQuery 代碼:
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
</script>
<!-- // 結(jié)果: -->
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
2.6 去掉父節(jié)點(diǎn)包裹unwrap()方法
這個(gè)方法將移出元素的父元素。這能快速取消 .wrap()方法的效果。匹配的元素(以及他們的同輩元素)會(huì)在DOM結(jié)構(gòu)上替換他們的父元素。
<!-- HTML 代碼: -->
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
<script>
// jQuery 代碼:
$("p").unwrap()
</script>
<!-- 結(jié)果: -->
<p>Hello</p>
<p>cruel</p>
<p>World</p>
2.7 集合包裝wrapAll(html|ele)方法
- 概述
將所有匹配的元素用單個(gè)元素包裹起來(lái)。這于 .wrap()是不同的,.wrap()為每一個(gè)匹配的元素都包裹一次。這種包裝對(duì)于在文檔中插入額外的結(jié)構(gòu)化標(biāo)記最有用,而且它不會(huì)破壞原始文檔的語(yǔ)義品質(zhì)。這個(gè)函數(shù)的原理是檢查提供的第一個(gè)元素并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素--這個(gè)祖先元素就是包裝元素。
-
參數(shù)
- html, String類型,HTML標(biāo)記代碼字符串,用于動(dòng)態(tài)生成元素并包裝目標(biāo)元素
- elem, Element類型,用于包裝目標(biāo)元素的DOM元素
示例
$("p").wrapAll("<div></div>");
// 用一個(gè)生成的div將所有段落包裹起來(lái)
$("p").wrapAll(document.createElement("div"));
2.8 包裹內(nèi)部子元素wrapInner(htm|element|fnl)方法
- 概述
將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用一個(gè)HTML結(jié)構(gòu)包裹起來(lái)
這個(gè)函數(shù)的原理是檢查提供的第一個(gè)元素(它是由所提供的HTML標(biāo)記代碼動(dòng)態(tài)生成的),并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素--這個(gè)祖先元素就是包裝元素。
-
參數(shù)
- html, String類型,HTML標(biāo)記代碼字符串,用于動(dòng)態(tài)生成元素并包裝目標(biāo)元素
- element,Element類型,用于包裝目標(biāo)元素的DOM元素
- fn,F(xiàn)unction類型,生成包裹結(jié)構(gòu)的一個(gè)函數(shù)
示例
// 把所有段落內(nèi)的每個(gè)子內(nèi)容加粗
$("p").wrapInner("<b></b>");
// 把所有段落內(nèi)的每個(gè)子內(nèi)容加粗
$("p").wrapInner(document.createElement("b"));
<!-- 用原先div的內(nèi)容作為新div的class,并將每一個(gè)元素包裹起來(lái) -->
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<script>
$('.inner').wrapInner(function() {
return '<div class="' + $(this).text() + '" />';
});
</script>
<!-- 結(jié)果: -->
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>
2.9 替換階段
方法:
replaceAll(selector),用匹配的元素替換掉所有 selector匹配到的元素。方法:
replaceWith(content),用于將匹配元素替換掉的內(nèi)容。可以是String\DOM\jQuery
// 替換掉所有的p,以下兩種方法都可以
$("p").replaceWith("<b>Paragraph. </b>");
$("<b>Paragraph. </b>").replaceAll("p");
2.10 清空子元素
empty()方法,刪除匹配的元素集合中所有的子節(jié)點(diǎn)
$("p").empty();
2.11 刪除節(jié)點(diǎn)
remove()方法從DOM中刪除所有匹配的元素。
// 刪除所有的p標(biāo)簽
$("p").remove();
2.12 復(fù)制節(jié)點(diǎn)
clone([Even[,deepEven]])方法可以對(duì)節(jié)點(diǎn)進(jìn)行克隆。
- Even:一個(gè)布爾值(true 或者 false)指示事件處理函數(shù)是否會(huì)被復(fù)制。
- deepEven:一個(gè)布爾值,指示是否對(duì)事件處理程序和克隆的元素的所有子元素的數(shù)據(jù)應(yīng)該被復(fù)制。
$("b").clone().prependTo("p");
上傳視頻標(biāo)簽文本框特效案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>視頻標(biāo)簽案例</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, div {
padding: 0;
margin: 0;
}
.label-wrap {
width: 300px;
/* height: 30px; */
line-height: 30px;
padding: 10px;
border: 1px solid #ccc;
overflow: hidden;
margin: 100px auto;
}
.label-wrap .txt-lb {
border: none;
outline: none;
height: 30px;
line-height: 30px;
width: 60px;
float: left;
}
.label-wrap .lb-span {
float: left;
border: 1px solid #ccc;
padding: 0 10px;
margin-right: 10px;
}
</style>
<script src="./lib/jquery-1.12.4.js"></script>
</head>
<body>
<div class="label-wrap">
<span class="lb-span">jQuery<i class="glyphicon glyphicon-remove"></i></span>
<input type="text" class="txt-lb">
</div>
<script>
$(function(){
// 當(dāng)文本框按下按鍵時(shí)處理
$('.txt-lb').on('keydown', function(e) {
// 判斷用戶是否按下了回車: e.which == 13 回車鍵
if( e.which == 13 ) {
inputToLabel();
} else if( e.which == 8) {
// 按下了刪除鍵
// 把最后一個(gè)lb-sapn標(biāo)簽刪除,把里面文本放到文本上去。
if($(this).val().length <= 0) {
var txt = $('.label-wrap span:last').text();
$(this).val(txt);
$('.label-wrap span:last').remove();
// 取消默認(rèn)行為,取消后退鍵刪除字符的默認(rèn)行為
e.preventDefault();
e.stopPropagation();
}
}
});
// 給整個(gè)div綁定一個(gè)點(diǎn)擊事件,進(jìn)行給文本獲取焦點(diǎn)
$('.label-wrap').on('click', function(e) {
$('.txt-lb').focus();
})
// 當(dāng)文本框失去焦點(diǎn)到時(shí)候,給div添加span標(biāo)簽。另外input清空
$('.txt-lb').on('blur', function(e) {
inputToLabel();
});
// 刪除label按鈕點(diǎn)擊事件
$('.label-wrap').on('click', 'i', function(e) {
$(this).parent().remove();
});
// 將文本框中的文本生成 label樣式的標(biāo)簽。
function inputToLabel() {
// 判斷文本框不為空,則進(jìn)行添加標(biāo)簽操作
if($(".txt-lb").val().length > 0 ) {
// 當(dāng)前文本框的 文本生成一個(gè)span標(biāo)簽放到文本框之前
var $lb = $('<span class="lb-span">' + $(".txt-lb").val() +'<i class="glyphicon glyphicon-remove"></i></span>');
// 在文本框前面追加一個(gè)lb對(duì)象
$(".txt-lb").before($lb);
$(".txt-lb").val(''); // 設(shè)置value為空
}
}
});
</script>
</body>
</html>
3. DOM的CSS屬性讀寫
3.1 簡(jiǎn)單獲取元素的內(nèi)部寬高(不包括邊框和外邊距)
- innerHeight()
獲取第一個(gè)匹配元素內(nèi)部區(qū)域高度(包括補(bǔ)白、不包括邊框)。此方法對(duì)可見和隱藏元素均有效。沒(méi)有參數(shù),返回值是Integer類型
- 示例
獲取第一段落內(nèi)部區(qū)域高度。
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
</script>
<!-- 結(jié)果: -->
<p>Hello</p><p>innerHeight: 16</p>
- innerWidth()
獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾龋òㄑa(bǔ)白、不包括邊框)。此方法對(duì)可見和隱藏元素均有效。沒(méi)有參數(shù),返回值是Integer類型
- 示例
<!-- 獲取第一段落內(nèi)部區(qū)域?qū)挾取?-->
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );
</script>
<!-- 結(jié)果: -->
<p>Hello</p><p>innerWidth: 40</p>
3.2 獲取元素的外部寬高(包括邊框或外邊距)
3.2.1 outerHeight([options])
- 概述
獲取第一個(gè)匹配元素外部高度(默認(rèn)包括補(bǔ)白和邊框)。
此方法對(duì)可見和隱藏元素均有效。
參數(shù): optionsBoolean默認(rèn)值:'false',設(shè)置為 true 時(shí),計(jì)算邊距在內(nèi)。
示例
<!-- 獲取第一段落外部高度。 -->
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
</script>
<!-- 結(jié)果: -->
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>
3.2.2 outerWidth([options])
- 概述
獲取第一個(gè)匹配元素外部寬度(默認(rèn)包括補(bǔ)白和邊框)。
此方法對(duì)可見和隱藏元素均有效。
參數(shù):optionsBoolean默認(rèn)值:'false',設(shè)置為 true 時(shí),計(jì)算邊距在內(nèi)。
示例
獲取第一段落外部寬度。
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
</script>
<!-- 結(jié)果: -->
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>
3.3 jQuery獲取元素內(nèi)容區(qū)域的寬高
3.3.1 height([val|fn])
- 概述
取得匹配元素當(dāng)前計(jì)算的高度值(px)。在 jQuery 1.2 以后可以用來(lái)獲取 window 和 document 的高
- 參數(shù)
valString 可以是: Number, Function兩種類似。
Number: 設(shè)定CSS中 'height' 的值,可以是字符串或者數(shù)字,還可以是一個(gè)函數(shù),返回要設(shè)置的數(shù)值。函數(shù)接受兩個(gè)參數(shù),第一個(gè)參數(shù)是元素在原先集合中的索引位置,第二個(gè)參數(shù)為原先的高度。
function(index, height) index:String, height:Number 返回用于設(shè)置高度的一個(gè)函數(shù)。接收元素的索引位置和元素舊的高度值作為參數(shù)。
示例
//第一種:無(wú)參數(shù)描述:
// 獲取第一段的高
$("p").height();
// 第二種:一個(gè)參數(shù)參數(shù)val
// 把所有段落的高設(shè)為 20:
$("p").height(20);
// 參數(shù)function(index, height)
// 以 10 像素的幅度增加 p 元素的高度
$("button").click(function(){
$("p").height(function(n,c){
return c+10;
});
});
3.3.2 width([val|fn])
width的用法跟height一致,不再贅述。
3.4 獲取和設(shè)置滾動(dòng)條的寬高
3.4.1 scrollTop([val])
- 概述
獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移。此方法對(duì)可見和隱藏元素均有效。
參數(shù): val 可以是:String, Number類型
實(shí)例:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
$("div.demo").scrollTop(300);
3.4.2 scrollLeft([val])
用法通scrollTop,不再贅述。
3.5 獲取位置和偏移量
3.5.1 position()
- 概述
獲取匹配元素相對(duì)父元素的偏移。此方法只對(duì)可見元素有效。從邊框開始計(jì)算。
- 返回值:Object{top,left} 返回的對(duì)象包含兩個(gè)整型屬性:top 和 left。 為精確計(jì)算結(jié)果,請(qǐng)?jiān)谘a(bǔ)白、邊框和填充屬性上使用像素單位。
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
// 結(jié)果:<p>Hello</p><p>left: 15, top: 15</p>
3.5.2 offset([coordinates])
- 概述
獲取匹配元素在當(dāng)前視口的相對(duì)偏移。返回的對(duì)象包含兩個(gè)整型屬性:top 和 left,以像素計(jì)。此方法只對(duì)可見元素有效。
- 參數(shù)可以省略(獲?。蛘?coordinates 是Object類型,屬性:{top,left} 必需。規(guī)定以像素計(jì)的 top 和 left 坐標(biāo)。比如 {top:100,left:0} ,或者:帶有 top 和 left 屬性的對(duì)象
// 獲取第二段的偏移
// <p>Hello</p><p>2nd Paragraph</p>
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
// 結(jié)果:
// <p>Hello</p><p>left: 0, top: 35</p>
// 設(shè)置最后一個(gè)段落的top和left值
$("p:last").offset({ top: 10, left: 30 });
預(yù)告:
下一篇:jQuery的動(dòng)畫系統(tǒng)詳解。
對(duì)應(yīng)視頻地址:http://qtxh.ke.qq.com
老馬qq: 515154084
老馬微信:請(qǐng)掃碼
