jQuery文件物件模型DOM的實際應用

jQuery CSS · 發表 2018-11-29 19:23:18

摘要： DOM 在 JavaScript 課程中我們詳細的探討過，它是一種文件物件模型。方便開發者對 HTML 結構元素內容進行展示和修改。在 JavaScript 中，DOM 不但內容龐大繁雜，而且我們開發的過程中需要考慮更多的相容性、擴充套件性。在 jQuery 中，已經...

DOM 在 JavaScript 課程中我們詳細的探討過，它是一種文件物件模型。方便開發者對 HTML 結構元素內容進行展示和修改。在 JavaScript 中，DOM 不但內容龐大繁雜，而且我們開發的過程中需要考慮更多的相容性、擴充套件性。

在 jQuery 中，已經將最常用的 DOM 操作方法進行了有效封裝，並且不需要考慮瀏覽器的相容性，對於之前的DOM是一顆岑天大樹枝繁葉茂讓我們遙不可及，那麼jQuery的DOM樹，就是一個簡筆畫的小樹，所有枝葉都唾手可得。

jQuery的遍歷：

祖先：

parent()

parents()

parentsUntil()

後代 :

children()

find()

兄弟：

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

過濾

eq()

養成一個習慣，如果該jQuery方法可以設定元素值，那麼該方法一定可以獲取元素值。

DOM元素及屬性操作。

1.設定（獲取）元素內容。

html()可以獲取該元素的標籤和內容

html(text) 

text(text)只可以獲取該元素的文字內容；

text()

val(text)

val()

2.操作元素屬性。（獲取，設定、刪除）

.attr( ) 

.attr( )的引數有幾種設定方法。

1）$('div') .attr('type')獲取該屬性屬性值

2）$('div') .attr('type','value')設定屬性值

3)$('div') .attr({

'data':'valuer1',

'data2':'value2' 

})

設定一組屬性值；

4）$('div').removeAttr('title')；

3.操作元素樣式

css()

注：css（）方法不僅能獲取行內樣式，也能獲取非行內樣式

css()方法的引數有幾種設定方法，

css(name)獲取某個元素的行內樣式

css([name1,name2,name3])獲取多個樣式，返回值是一個數組；

css('name',value)設定行內樣式

css({

name1:value1,

name2:value2 

})設定多個行內樣式

addClass( )方法

addClass（class） 給元素新增一個class

addClass( 'class1 class2 class3' )給元素新增多個class

removeClass(class)給元素刪除一個class

removeClass('class1 class2 class3')給元素刪除多個class

toggleClass(class) 如果元素沒有當前class那麼新增，如果有那麼刪除

選項卡demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>

$(function(){
 /*var a=$('div').css(['width','height','background'])
for(var i in a){
console.log(a[i])
}*/
/* document.onclick=function(){
//alert(1)
//$('div').toggleClass('abc')
var a = $('div').css(['width','height'])

$.each(a,function(index,value){
alert(value)
})

}*/


$('.warp>ul li').click(function(){

$('.warp div').css('display','none')

$('.warp div').eq($(this).index()).css('display','block')


})


})

</script>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.warp{
width: 303px;
height: 600px;
border: 1px solid #b6b6b6;
margin: 0 auto;
position: relative;
}
.warp ul{
width: 304px;
height: 100px;
border-bottom: 1px solid #b6b6b6;
}
.warp ul li{
border-right: 1px solid #b6b6b6;
float: left;
width: 100px;
line-height: 100px;
text-align: center;
}

.warp div{
width: 303px;
height: 500px;
position: absolute;
top: 100px;
display: none;
text-align: center;
line-height: 500px;
font-size: 100px;
color: #fff;
}
.div1{
background: red;
}
.div2{
background: green;
}

.div3{
background: pink;
}
.active{
background: pink;
display: block;
}


</style>
</head>
<body>

<div class="warp">

<ul>


<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>



</ul>

<div class="div1" style="display:block">1</div>
<div class="div2">2</div>
<div class="div3">3</div>

</div>

</body>
</html>

demo:

var box=$('div').css(['color','height','width']); //得到多個 CSS 樣式的陣列物件

for(vari in box){

//逐個遍歷出來 alert(i+':' +box[i]);

}

jquery提供了一個方法$.each()他和for in一樣可以遍歷物件。

$.each(obj,function(index,value){

})

css方法

width()

height()

innerWidth() 包含內邊距（padding）

outerWidth()包含內邊距和邊框(padding border)

offset()獲取某個元素相對於瀏覽器視窗(可視區域的距離)

position()獲取某個元素相對於父元素的偏移距離

scrollTop()獲取垂直滾動條的值；

scrollTop(value)設定垂直滾動條的值;

scrollLeft()獲取水平滾動條的值；

scrollLeft(value)設定水平滾動條的值;

案例：樓梯。選項卡。

樓梯簡化版

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>

$(function(){
 /*var a=$('div').css(['width','height','background'])
for(var i in a){
console.log(a[i])
}*/
/* document.onclick=function(){
//alert(1)
//$('div').toggleClass('abc')
var a = $('div').css(['width','height'])

$.each(a,function(index,value){
alert(value)
})

}*/


$('.nav li').click(function(){
$(document).scrollTop($('div').eq($(this).index()).offset().top)

})


})

</script>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.div1{
width: 90%;
margin: 0 auto;
height: 700px;
background: red;
color: #fff;
line-height: 700px;
font-size: 100px;
text-align: center;
}
.div2{
width: 90%;
margin: 0 auto;
height: 700px;
background: pink;
color: #fff;
line-height: 700px;
font-size: 100px;
text-align: center;
}
.div3{
width: 90%;
margin: 0 auto;
height: 700px;
background: green;
color: #fff;
line-height: 700px;
font-size: 100px;
text-align: center;
}
.div4{
width: 90%;
margin: 0 auto;
height: 700px;
background: blue;
color: #fff;
line-height: 700px;
font-size: 100px;
text-align: center;

}

.nav{
width: 80px;
height: 204px;
position: fixed;
right: 20px;
bottom: 40px;
background: #b6b6b6;

}
.nav li{
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #fff;
cursor: pointer;
border-top: 1px solid #b6b6b6;
}

</style>
</head>
<body>
<ul class="nav">
<li>div1</li>
<li>div2</li>
<li>div3</li>
<li>div4</li>
</ul>
<div class="div1">我是DIV1</div>
<div class="div2">我是DIV2</div>
<div class="div3">我是DIV3</div>
<div class="div4">我是DIV4</div>
</body>
</html>

jQuery 節點操作

一．建立節點為了使頁面更加智慧化，有時我們想動態的在 html 結構頁面新增一個元素標籤，那麼在插入之前首先要做的動作就是：

1.建立節點。

var box=$('<div id="box">節點</div>'); //建立一個節點 $('body').append(box); //將節點插入到<body>元素內部

2.插入節點

append(content) 向指定元素內部後面插入節點 content

appendTo(content) 將指定元素移入到指定元素 content 內部後面

prepend(content) 向指定元素 content 內部的前面插入節點

prependTo(content) 將指定元素移入到指定元素 content 內部前面

after(content) 向指定元素的外部後面插入節點 content

before(content) 向指定元素的外部前面插入節點 content

3.包裹節點

.wrap()

$('div').wrap('<strong></strong>'); //在 div 外層包裹一層 strong

$('div').wrap('<strong>123</strong>'); //包裹的元素可以帶內容

$('div').wrap('<strong><em></em></strong>'); //包裹多個元素

$('div').wrap($('strong').get(0)); //也可以包裹一個原生 DOM 不推薦使用，會崩潰

$('div').wrap(document.createElement('strong')); //臨時的原生 DOM

 $('div').unwrap(); //移除一層包裹內容，多個需移除多次

$('div').wrapInner('<strong></strong>'); //包裹子元素內容

4.節點操作

$('body').append($('div').clone(true)); //複製一個節點新增到 HTML 中

注：clone(true)引數可以為空，表示只複製元素和內容，不復制事件行為。而加上 true 引數的話，這個元素附帶的事件處理行為也複製出來。

$('div').remove(); //直接刪除 div 元素

remove()方法可以接收一個引數，過濾需要刪除的元素。

$('div').replaceWith('<span>節點</span>'); //將 div 替換成 span 元素

案例1：增加表單姓名，搜尋。

成績單

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>

$(function(){
$('input[type=button]').click(function(){

var name=$('input[placeholder=請輸入姓名]').val()
var age=$('input[placeholder=請輸入年齡]').val()
var wx=$('input[placeholder=請輸入微信號]').val()
$('input[placeholder=請輸入姓名]').val('')
$('input[placeholder=請輸入年齡]').val('')
$('input[placeholder=請輸入微訊號]').val('')
var $ul=$('<ul></ul>');

$('body').append($ul);

var $li1=('<li>姓名：'+name+'</li>');


$ul.append($li1);

var $li2=('<li>年齡：'+age+'</li>');

$ul.append($li2);

var $li3=('<li>微訊號：'+wx+'</li>');

$ul.append($li3);

})
})
</script>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
ul:after{
content: '';
display: block;
clear: both;

}
ul{
max-width: 600px;
margin:10px auto; 
border: 1px solid #b6b6b6;

}
ul li{
float: left;
padding: 20px;
/* background: #b6b6b6; */
margin-left: 10px;

}

</style>
</head>
<body>
<input type="text" placeholder="請輸入姓名">
<input type="text" placeholder="請輸入年齡">
<input type="text" placeholder="請輸入微訊號">
<input type="button" value='點選'>

</body>
</html>

搜尋

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>

$(function(){
$('input[type=button]').click(function(){
for(var i = 0 ; i < $('li').length;i++){

if($('li').eq(i).html()==$('input[type=text]').val()){
$('li').eq(i).css('background','red')
}
}
})
})
</script>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
ul:after{
content: '';
display: block;
clear: both;

}
ul{
max-width: 600px;
margin:10px auto; 
border: 1px solid #b6b6b6;

}
ul li{
float: left;
padding: 20px;
/* background: #b6b6b6; */
margin-left: 10px;

}

</style>
</head>
<body>
<div class="search">
<input type="text" placeholder="請輸入搜尋內容"><input type="button" value="搜尋">
</div>
<ul>
<li>楊懷智</li>
<li>男</li>
<li>180</li>
<li>66</li>
</ul>
<ul>
<li>234</li>
<li>男</li>
<li>180</li>
<li>66</li>
</ul>
<ul>
<li>12</li>
<li>男</li>
<li>180</li>
<li>66</li>
</ul>
<ul>
<li>111</li>
<li>男</li>
<li>180</li>
<li>66</li>
</ul>
</body>
</html>

ofollow,noindex">熱門推薦：前端，Java，產品經理，微信小程式，Python等資源合集大放送

原文作者：祈澈姑娘；原回答： https://www.zhihu.com/question/61624754/answer/540792492 ：90後前端妹子，愛程式設計，愛運營，愛折騰。堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。

jQuery文件物件模型DOM的實際應用

jQuery的遍歷：

DOM元素及屬性操作。

jQuery 節點操作

您可能也會喜歡…