Jquery的属性操作和DOM操作

JQ中非常重要的部分,就是操作DOM的能力

 一   属性操作

1 text():获取或设置某个文本属性   

       2 html()    :获取或设置某个元素属性

       3 val()    :     获取或设置表单内容    (原生JS使用value)

       4  attr()   :获取或设置匹配元素的属性和值

               $(selector).attr(xxx)  :返回被选元素的属性

               $(selector).attr(xxxx,xxxx)  :设置被选元素的属性和值,第一个参数为被选中的属性,第二个参数为属性值

               $(selector).attr(xxx,function(index,value))   :利用函数来设置属性值,要return 返回 

       5 css()   :设置或获取元素的css属性

    1  获取CSS属性值:$().css(“属性”)

                2     设置单个CSS属性:$().css(“属性”,“属性值”)

      3     设置多个CSS属性:$().css({“属性1”:”参数1”,”属性2”:”参数2”,”属性3”:”参数3”})

        6 css类操作

     1 addClass() 向被选元素中加入一个或多个类

               2 removeClass()  删除类

               3 toggleClass() 增加删除类切换操作           

 $(selector).toggleClass(classname,function(index,currentclass),switch)

1. classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类,请使用空格分隔类名。

2. Function(index,currentclass)可选。规定返回需要添加/删除的一个或多个类名的函数。

index 返回集合中元素的 index位置

currentclass 返回被选元素的当前类名

3. switch 布尔值,规定是否添加(true)或移除(false)类

//text() html() val()
<body>
    <div id="main">
        <h1 id="header">0000 </h1>
        <p>1111111111111111111</p>
        <p>2222222222222222222</p>
        <p>3333333333333333333</p>
        <p>4444444444444444444</p>
    </div>
  <input type="button" value="获取" id="btn1">
  <input type="button" value="修改" id="btn2">
  <input type="button" value="删除" id="btn3">
    <input type="button" value="attr" id="btn4">
 <script>
     $('#btn1').click(function(){
        alert( $('#main').text());
        alert( $('#main').html());
        alert( $(this).val());
     })
     $('#btn2').click(function(){
        $('#header').html("9999999");
     })
     $('#btn3').click(function(){
         $('#main').remove() //移除
     })
   </script>
</body>
//attr
<body>
    <img src="HTML5.png" alt="" width="100">
    <img src="HTML5.png" alt="" width="100">
    <img src="HTML5.png" alt="" width="100">
    <input type="button" id="btn1" value="获取">
    <input type="button" id="btn2" value="设置1">
    <input type="button" id="btn3" value="设置2">
    <input type="button" id="btn4" value="删除">
    <script>
        $(function(){
            //获取元素的属性值
            $('#btn1').click(function(){
                alert($('img').attr('width'))
                //alert($('img').css('width'))
            })
            $('#btn2').click(function(){
                //$('img').attr('width','200')
                $('img').attr({
                    'width':'150',
                    'height':'300',
                    'border':'5px'
                })
            })
            $('#btn3').click(function(){
                $('img').attr('width',function(index,value){
                        alert(value)
                    return value*(index+1)/3;
                
                })
            })
            $('#btn4').click(function(){
                $('img').removeAttr('border')
            })

        })
    </script>
</body>
<script type="text/javascript">
        $(function(){
            var count=0;
            $('#btn1').click(function(){
                //$('li').toggleClass('red',true)
                count++
                alert(count)
                $('li').toggleClass('red',count%3==0)
            })
            $('#btn2').click(function(){
                $('li').toggleClass(function(index,className){
                    alert(className+(index+1))
                    return className+(index+1)
                })
            })
            
         
        })
    </script>

 二 元素的宽度

       1  width() 元素的宽度

       2 innerWidth()   元素的宽度(padding+width)

       3  outWidth( ) 元素的宽度 (padding+width+border)

       4 outWidth(true) 元素的宽度 (padding+width+border+margin)

 小例子

<style>
        #main{
            background: #ccc;padding: 10px;float: left;
        }
        #div1,#div2,#div3{background: red;padding: 10px;margin:10px;width: 200px;height: 200px;border:solid 3px green;}
    </style>
</style>
</head>
<body>
    <div id="main">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
    <input id="btn1" type="button" value="获取">
    <input id="btn2" type="button" value="设置">    
    <input id="btn3" type="button" value="设置2">
    <script type="text/javascript">
        $(function(){
            $('#btn1').click(function(){
                alert($("#div1").width())
                //width + padding
                alert($("#div1").innerWidth())
                //outerWidth()    width + padding + border
                alert($("#div1").outerWidth())
            //outerWidth()    width + padding + border+margin
                alert($("#div1").outerWidth(true))
            })
            $('#btn2').click(function(){
                $("#div1").width(50)
                $('#div1').height(50)
            })
            
            $('#btn3').click(function(){
                $("#main div").width(function(index,oldWidth){
                    //alert(index)
                    alert(oldWidth) // 原始宽度
                    return oldWidth*(index+1)/5
                })
            })
        })
    </script>

三 元素的位置

1. Offset()方法返回或设置匹配元素相对于文档的偏移(位置)。

l  该方法返回的对象包含两个整型属性:top 和 left ,以像素计。此方法只对可见元素有效。

l  设置偏移坐标:$(selector).offset(value)

l  使用函数来设置所有匹配元素的偏移坐标:$(selector).offset(function(index,oldoffset))

    • index -可选。接受选择器的index位置
    • oldvalue - 可选。接受选择器的当前坐标

2. position() 方法返回匹配元素相对于父元素的位置(偏移)注:只能获取不能设置

在CSS定位布局中,如果我们对父元素设置position:relative,我们就可以使用position:absolute来设置子元素相对于父元素的定位距离

l  Position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。

l  该函数返回一个坐标对象,该对象有一个left属性和top属性。Position()中的坐标参考系是以被定位的祖辈元素的左上角为原点(0,0),向右为正,向下为正。

l  如果当前元素的祖辈元素全部都是默认定位(static),那么该函数返回的偏移位置与offset()函数相同。

l  如果当前JQ对象匹配多个元素,返回坐标时,postion()函数只以其中第一个匹配的元素为准。如果没有匹配的元素,则返回undefined

    1  offset().top  元素距离顶部的高度 (浏览器默认给8px)

    2 offset().left  元素距离左边的高度(浏览器默认给8px)

    有个神奇地方

//第一种   <style>
        .main{
            width:100px;                              
            height: 100px;
            background: red;

        }
    </style>
</head>
<body>
    <div class="main">
    </div>
    <script>
        $('.main').click(function(){
            alert($(this).offset().top)  //8 浏览器默认
            alert($(this).offset().left)  //8
            alert($(this).position().top)  //8
            alert($(this).position().left)  //8
            
        })
//第二种
.main{

 jquery中offset和position的区别

    JQ中的两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点在于位置的相对点不同。

   具体区别为:    1、position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器的距离。offset()始终返回    相对于浏览器文档的距离,它会忽略外层元素。

二  DOM操作---节点插入

    1.创建节点  $(html)

    2 append() 和appendTo()  :在被选元素的尾部添加内容

        不同:append()能够使用函数来附加内容

    3  prepend() 和prependTo()  方法在被选元素的开头插入内容

    4 before()在每个匹配的元素之前插入内容

    5  insertBefore( )把所有匹配的元素插入到另一个,指定的元素集合前面

    6 after()和insertAfter()  在每个匹配元素之后插入内容

   节点删除和复制

        1 remove() 删除匹配的元素集合中所有的子节点(删除所有子节点),绑定的事件,附加的数据都会移除

        2 detach()从DOM中删除所有匹配的元素()与remove()不同的是,绑定的事件,附加的数据都会被保留下来

       3 empty()删除匹配的元素集合中所有子节点,选中的元素保留,仅删除子节点,内容删除,元素依然保留

       4 clone()复制节点,选中元素进行复制

  <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <title>移除和复制节点</title>
    <style>
        li{
            background: #ccc;margin-top: 25px;width: 150px;
        }
        .orange{background: orange}
        .red{background: red}
        .green{background: green}
        .ccc{background: #ccc}
    </style>
</head>
<body>
   <ol>
        <li class="orange">列表项1</li>
        <li class="red">列表项2</li>
        <li class="green">列表项3</li>
    </ol>
    <input id="btn1" type="button" value="remove">
    <input id="btn2" type="button" value="detach">
    <input id="btn3" type="button" value="empty">
    <input id="btn4" type="button" value="clone">
    <script>
        $('li').click(function(){
            alert($(this).text())
        })
        $('#btn1').click(function(){
           var str= $('li:first-child').remove();
           $('ol').append(str)//再次点击li 点击事件不存在,被删除

        })
          $('#btn2').click(function(){
           var str= $('li:first-child').detach();
           $('ol').append(str)//再次点击li,点击事件存在,删除元素,但其绑定的事件,附加的数据都还存在

        })
        $('#btn3').click(function(){
           $('li:first-child').empty();
        

        })
          $('#btn4').click(function(){
           $('ol').append($('li:first-child').clone()) ;
           

        })

    </script>

  替换   

    1 replaceWidth() :用指定的HTML内容或元素替换被选元素

    2  replaceAll():用指定的HTML内容或元素替换被选元素

    3 each()遍历

  过滤

  1. first()/last()方法返回被选元素的首个元素/最后一个元素。
  2. eq()方法返回被选元素中带有指定索引号的元素

              索引号从0开始,因此首个元素的索引号是0而不是1

         3  not()方法返回所有不匹配的元素

         4 is()判断所有元素中是否有符合某个条件的元素,返回布尔值

          5  has()方法返回拥有匹配指定选择器的一个或多个元素在其内的所有元素

    <title>演示文档</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <style>
        li{
            margin-top: 5px;width: 150px;
        }    
    </style>
</style>
</head>
<body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li class="pink1"><em>3</em></li>
        <li class="pink2">4</li>
        <li>5</li>
    </ol>
    <input id="btn1" type="button" value='is'>
    <script type="text/javascript">
        $(function(){
            $('li:first').css("background-color", "orange");
            $('li').first().css("background-color", "orange");
            $('li').last().css("background-color", "orange");
            $('li').eq(1).css("background-color", "green");
            $('li').filter('.pink1,.pink2').css("background-color", "pink");
            $('li').not('.pink1,.pink2').css("background-color", "pink");
            $('#btn1').click(function(){
                alert($('li:eq(3)').is('.pink1,.pink2'))
            })
            $('li').has('em').css("background-color", "pink")
            $('li').slice(0,3).css("background-color", "pink")
            $('li').slice(-4,-2).css("background-color", "pink")

        })
    </script>

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券