jQuery文档对象模型DOM的实际应用-阿里云开发者社区

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方v法可以设置元素值，那么该方法一定可以获取元素值。

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>

jQuery文档对象模型DOM的实际应用

jQuery的遍历：

DOM元素及属性操作。

jQuery 节点操作

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

jQuery文档对象模型DOM的实际应用

jQuery的遍历：

DOM元素及属性操作。

jQuery 节点操作

热门文章

最新文章

相关课程

相关电子书

相关实验场景