jQuery文档对象模型DOM的实际应用
2018-11-28 本文已影响58人
祈澈菇凉
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>
原文作者：祈澈姑娘；原回答：https://www.zhihu.com/question/61624754/answer/540792492：90后前端妹子，爱编程，爱运营，爱折腾。 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
