前端系列之jQuery(jQueryDOM操作)

最新推荐文章于 2024-07-04 12:16:35 发布

众拾达人

最新推荐文章于 2024-07-04 12:16:35 发布

阅读量2.3k

点赞数

分类专栏：前端文章标签： jquery 前端

本文链接：https://blog.csdn.net/wtdask/article/details/79207361

版权

前端专栏收录该内容

58 篇文章 5 订阅

订阅专栏

一.如何筛选jQuery对象

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery chapter 2 Demo</title>
    </head>
    <body>
        <div id="div">div</div>
        <script src="vendor/jquery-1.12.4.js"></script>
        <script>
            $(function(){
                var DOMObject = document.getElementById('div');
                var jQueryObject =$('#div');

                console.log(DOMObject);
                console.log(jQueryObject);

                //检测方式
                console.log(DOMObject.nodeType);
                console.log(jQueryObject.jquery);//显示版本号

//              console.log(DOMObject.jquery);//undefined
//              console.log(jQueryObject.nodeType);//undefined

                 //转换
                 console.log($(DOMObject));
                 console.log(jQueryObject.get(0));
            })
        </script>
    </body>
</html>

如何创建元素

$('<div>Hello</div>');

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery chapter 2 Demo</title>
    </head>
    <body>

        <script src="vendor/jquery-1.12.4.js"></script>
        <script>
            $(function(){
                var div= $('<div>Hello</div>');
                console.log(div);           
                div.appendTo('body');//追加到body的最后面
                console.log($('div'));
            })
        </script>
    </body>
</html>

设置属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery chapter 2 Demo</title>
    </head>
    <body>

        <script src="vendor/jquery-1.12.4.js"></script>
        <script>
            $(function(){
                //第一种方式
                var link1 = $('<a>',{//注意：此处必须是空元素，如<a>123</a>，则后面属性无法添加
                    text:'baidu',
                    href:'http://ww.baidu.com',
                    target:'_blank',
                    title:'goto baidu'
                });

                link1.appendTo('body');

                //第二种方式
                var link2 = $('<a>baidu</a>').attr({
                    href:'http://ww.baidu.com',
                    target:'_blank',
                    title:'goto baidu'
                });
                link2.appendTo('body');
            })
        </script>
    </body>
</html>

检查和获取元素

这里写图片描述

检查元素数量

$('xxx').length

提取元素

[index]返回DOM元素
get([index]) 返回DOM元素或元素集合
eq(index) 返回jQuery对象
first()
last()
toArray()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li class="item-1">item-1</li>
            <li class="item-2">item-2</li>
            <li class="item-3">item-3</li>
            <li class="item-4">item-4</li>
            <li class="item-5">item-5</li>
            <li class="item-6">item-6</li>
            <li class="item-7">item-7</li>
            <li class="item-8">item-8</li>
            <li class="item-9">item-9</li>
        </ul>

        <script src="vendor/jquery-1.12.4.js"></script>
        <script>
            $(function(){
                var elements= $('li');
                //检查元素数量
                console.log(elements.length);

//               var elements2=$('div');
//               console.log(elements2[0].style.color='blue');//报错TypeError: undefined is not an object (evaluating 'elements2[0].style')

//               console.log(elements2.eq(0).addClass('blue'));//不会报错
                 //提取元素

                 console.log(elements[0]);
                 console.log(elements.get());
                 console.log(elements.get(-1));
                 console.log(elements.get(100));

                 console.log(elements.eq(0));
                 console.log(elements.eq());
                 console.log(elements.eq(-1));
                 console.log($('li:eq(0)'));//筛选器  建议使用eq方法，要比eq筛选器性能高很多倍

                 console.log(elements.first());
                 console.log(elements.last());

                 console.log(elements.toArray());//和get()方法一样
            })
        </script>
    </body>
</html>

通过关系查找jQuery对象

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            <div>
                <p id="info">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Hic,rem?</p>
                <ul>
                    <li class="item-1">item1</li>
                    <li class="item-2">item2</li>
                    <li class="item-3">item3</li>
                    <li class="item-4">item4</li>
                    <li class="item-5">item5</li>
                    <li class="item-6">item6</li>
                    <li class="item-7">item7</li>
                    <li class="item-8">item8</li>
                    <li class="item-9">item9</li>

                </ul>
            </div>
        </div>

        <script src="vendor/jquery-1.12.4.js"></script>
        <script>
            $(function(){
//              var element = $('#info').parents();
//              var element = $('#info').parents('div');
//              console.log(element);
//              
//              var element2 = $('#box').children();
//              var element2 = $('#box > *');//相当于上面的方法
//              console.log(element2);
//              
//              var element3 = $('#info').children();
//              var element4 = $('#info').contents();//返回文本节点
//              console.log(element3);
//              console.log(element4);

                //children和contents只返回直接子元素
//              console.log($('#box').children('ul'));
//              console.log($('#box').contents());

                //find返回子元素和孙子元素
//              console.log($('#box').find('ul'));
//              console.log($('#box').find('.item-3'));

                //parent([selector])  返回直接父元素
//              console.log($('#info').parent('#box'));
                //parents([selector]) 返回所有的父元素 
//              console.log($('#info').parents('#box'));
                //parentsUnitil([selector]) 必须带有选择器，到选择器为止的所有父元素
                //closest(selector) 从本身（首先检查当前元素是否匹配）开始逐级向上进行元素匹配，并返回最先匹配的元素
                console.log($('#info').closest('#info'));
            })
        </script>
    </body>
</html>

通过兄弟姐妹元素进行查找

这里写图片描述

next()向下查找同级元素
pre()向上查找同级元素
注意：siblings不包含本身，查找所有的同级元素

筛选和遍历jQuery对象

增加元素

<script>
    $(function(){
        console.log($('.item-1,.item-2'))
        console.log($('.item-1').add('.item-2').add('.item-3'))
    })
</script>

过滤元素

not(selector) ：不要选择器中的元素
filter(selector)：需要选择器中的元素
has(selector):保留了特定后代的元素

<script>
            $(function(){
//              console.log($('li').not('.item-4')) 
//              console.log($('li').filter('.item-4')) 

                console.log($('li').not(function(index){
                      return $(this).hasClass('item-4')
                }));
                console.log($('li').filter(function(index){
                      return $(this).hasClass('item-4')
                }));

                console.log($('li').has('ul')) //保留了特定后代的元素
            })

</script>

获取子集

slice(start[,end])

$(function(){            
   console.log($('li').slice(3,5))
})

转换元素

map(callback)

$(function(){            
                console.log($('li').map(function(index,domElement){
     return this.id;
  })) 
})

遍历元素

each(iterator)

<script>
    $(function(){            
                console.log($('li').each(function(index,domElement){
             this.title=this.innerText;
      })) 
})
</script>

jQuery对象的其他操作

is(selector)查询是否有选择器中的元素
end()回到破坏性操作之前
破坏性操作：任何对jQuery对象进行改变的操作

addBack([selector])想进行一些破坏性操作，但是还想把原来的元素包含进来

这里写图片描述

$(function(){            
               $('#box2').find('.item-4').css('color','red').end().find('.item-6').css('color','blue')
})

<script>
            $(function(){            
              console.log( $('.item-4').nextUntil('.item-6').addBack().css('color','orange'))
            })
</script>

二.操作元素的特性、属性和数据

元素的特性和属性值的获取

attributes:值为string
properties:值为string、boolean、number、object

元素特性和属性值的区别

1、如果特性attributes 是本来在DOM对象中就存在的，attributes和properties（属性）的值会同步。

2、如果attributes是本来在DOM对象中就存在的，但是类型为Boolean，那么attributes和properties的值不会同步；

3、如果attributes不是DOM对象内建的属性，attributes和properties的值不会同步；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <img id='logo' src="09/login.png" alt="jQuery logo" class="img-jquery" title="jQuery log" />
        <input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px;" title="Check this!" description="just a checkbox"  checked='ture'/>
        <script src="vendor/jquery-1.12.4.js"></script>
        <script>
            $(function(){
                var checkbox =document.getElementById('check'); 
                //元素的属性和特性会保持动态链接，会同时改变
                //设置属性
                checkbox.title ="new title";

                //设置特性
                checkbox.setAttribute('title','another title');
                console.log(checkbox.getAttribute('title'));
                console.log(checkbox.title);
                console.log(checkbox.getAttribute('title') === checkbox.title);//特性与属性同时改变且相等


                //如果attributes是本来在DOM对象中就存在的，但是类型为Boolean，那么attributes和properties的值不会同步；
                checkbox.checked =false;
                checkbox.setAttribute('checked',false);
                console.log(checkbox.checked);//Boolean
                console.log(checkbox.getAttribute('checked'));//String          
                var img =document.getElementById('logo');
                console.log(img.src);//http://127.0.0.1:8020/jQueryDemo/09/login.png
                console.log(img.getAttribute('src'));//09/login.png
            })
        </script>
    </body>
</html>

操作元素的特性

获取特性的值：attr(name)
设置特性的值：attr(name,value) attr(attributes)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <img id='logo' src="09/login.png" alt="jQuery logo" class="img-jquery" title="jQuery log" />
        <img id='logo2' src="09/login.png" alt="jQuery logo2" class="img-jquery2" title="jQuery log2" />
        <input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px;" title="Check this!" description="just a checkbox"  checked='ture'/>
        <script src="vendor/jquery-1.12.4.js"></script>
        <script>
            $(function(){
                var img =$('img');//包含两个元素

                console.log(img.attr('title'));//只获取到第一个
                console.log(img.attr('title','123'));//同时改变了两个值
                console.log(img.attr('title'));

                img.attr({
                    title:'new title',
                    alt:'new alt',
                    tabIndex:2
                })

                console.log(img);

                img.attr('title',function(index,previousValue){
                    console.log(previousValue);
                    return previousValue;
                })
            })
        </script>
    </body>
</html>

操作元素的属性

获取属性的值：prop(name)
设置属性的值：pro(name,value) prop(properties)

删除属性的值：removeProp(name)

$(function(){
                var checkbox = $('#check');
                console.log(checkbox.prop('checked'));
                console.log(checkbox.get(0).checked);
                console.log(checkbox.attr('checked'));
            })

在元素中存取数据

获取数据的值:data([name])
设置数据的值:data(name,value) data(object)
删除数据的值：removeData([name])

三.修改jQuery对象的内容和样式

在页面中操作DOM元素
修改元素的样式

添加或修改class

addClass(names)
removeClass(names)
hasClass(name)//判断是否有某个类
toggleClass(names][,switch])//切换某个类

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: #ccc;
            }
            .red{
                background-color: red;
            }
            .b10{
                border: 10px solid #000;
            }
            .m10{
                margin: 10px;
            }
            .p10{
                padding: 10px;
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="box" id="demo">div</div>
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
        <script src="vendor/jquery-1.12.4.js"></script>
        <script>
            $(function(){
                var elemnt = $('#demo');
                elemnt.addClass('red b10 m10 p10');
                elemnt.removeClass('red m10 p10');
                elemnt.addClass(function(index,className){
                    console.log(index);
                    console.log(className);
                    return 'red';
                })

                elemnt.removeClass(function(index,className){
                    console.log(index);
                    console.log(className);
                    return 'red';
                })

//              if(elemnt.hasClass('hide')){
//                    elemnt.removeClass('hide');
//              }else{
//                    elemnt.addClass('hide');
//              }
//             elemnt.toggleClass('hide');
                 $('li').each(function(index){
                    $(this).toggleClass('red',index % 3 ===0);
                 })
            })
        </script>
    </body>
</html>

获取或设置style

css(name,value)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: #ccc;
            }

        </style>
    </head>
    <body>
        <div class="box hide" id="demo">div</div>

        <script src="vendor/jquery-1.12.4.js"></script>
        <script>
            $(function(){
                var element = $('#demo');

                element.css('width',200);
                element.css({
                    'background-color':'red',
                    height:200,
                    border:'10px solid #000',
                    marginTop:100
                })
                element.css('height',function(index,value){
                    console.log(value);
                    return parseInt(value,10)+50;
                })

                console.log(element.css('height')) ;
            })
        </script>
    </body>
</html>

获取或设置元素尺寸

修改样式（width()、innerWidth()、outerWidth()）

width()
height()
innerHeight(value)//包含内边距，不包含边框和外边距
innerWidth(value)
outerWidth(value)//包含内边距和边框，外边距不一定
outerHeight(value)

获取或设置位置和滚动

offset(coordinates)//返回对象集合中第一个元素，以像素计算，只对显示元素有效
position()//获取离元素最近的，具有相对位置的距离。如果没有则返回浏览器文档的距离
scrollLeft(value)
scrollTop(value)

这里写图片描述

四.jQuery对象的文档处理

移动或插入元素

append(content[,content,...,content])//插入，在最后面追加内容
prepend(content[,content,...,content])//在最前面追加内容
before(content[,content,...,content])//外部插入，元素之前
after(content[,content,...,content])//外部插入，元素之后

//与append功能类似，思维相反
appendTo(target)
prependTo(target)
insertBefore(target)
insertAfter(target)

这里写图片描述

包裹元素

wrap(wrapper)
wrapAll(wrapper)

这里写图片描述

移除元素

remove([selector])
detach([selector])//都是移除，但是保存了这个对象的事件和数据
empty() //保留元素，只是清除元素的内容

这里写图片描述

复制和替换元素

clone([Even[,deepEven]])//参数1：是否复制本身，顶级元素的事件和数据  参数2：深度克隆，是否复制其子元素的事件和数据

这里写图片描述

//替换元素
replaceWith(content)
replaceAll(target)

处理表单元素值

val()//设置值
val(value)//获取值

这里写图片描述

众拾达人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端系列之jQuery(jQueryDOM操作)

一.如何筛选jQuery对象<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>jQuery chapter 2 Demo</title> </head> <body> <div id="div">div</div> <script src=
复制链接

扫一扫

专栏目录