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

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>
 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据文摘

迷人又诡异的辛普森悖论:同一个数据集是如何证明两个完全相反的观点的?

在辛普森悖论中,餐馆可以同时比竞争对手更好或更差,锻炼可以降低和增加疾病的风险,同样的数据集能够用于证明两个完全相反的论点。

15730
来自专栏苦逼的码农

一些常用的算法技巧总结

数组的下标是一个隐含的很有用的数组,特别是在统计一些数字,或者判断一些整型数是否出现过的时候。例如,给你一串字母,让你判断这些字母出现的次数时,我们就可以把这些...

21530
来自专栏GreenLeaves

TFS2018环境搭建一硬件要求

TFS可以安装在Windows Server和Windows PC操作系统中,但是TFS2018和2018只支持64位操作系统中,早期的版本没有操作系统的位数限...

41030
来自专栏Python专栏

200行代码,一行行教你自制微信机器人

1) 用一个windows客户端工具运营公众号,真的很局限。虽然工具的功能很强大,能自动添加好友,自动拉好友入群,关键字回复等等,但是有一个绕不开的点,它是一款...

62120
来自专栏编程坑太多

『高级篇』docker之Mesos集群架构图(23)

11840
来自专栏机器之心

Diss所有深度生成模型,DeepMind说它们真的不知道到底不知道什么

深度学习在应用层面获得了巨大成功,这些实际应用一般都希望利用判别模型构建条件分布 p(y|x),其中 y 是标签、x 是特征。但这些判别模型无法处理从其他分布中...

11610
来自专栏数据结构笔记

python基础类型(一):字符串和列表

注意到最后三个的单双引号是嵌套使用的,但是最后一个的使用方法是错误的,因为当我们混合使用两种引号时必须有一种用来划分字符串的边界,即在两边的引号不能出现在字符串...

13920
来自专栏我是攻城师

理解BitMap算法的原理

位图:一种常用的数据结构,代表了有限域中的稠集(dense set),每一个元素至少出现一次,没有其他的数据和元素相关联。在索引,数据压缩,海量数据处理等方面有...

25230
来自专栏chenssy

多线程:为什么在while循环中加入System.out.println,线程可以停止

这个我们都知道,由于 stopReqested 的更新值在主内存中,而线程栈中的值不是最新的,所以会一直循环,线程并不能停止。加上 Volatile 关键字后,...

21440
来自专栏smy

一张图解释负载均衡

首先当大量用户访问时候,先请求到nignx服务器,因为nignx对于高并发支持较好,所以由nignx服务器将访问需求分配给不同的apache服务器,apache...

21330

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励