JQuery(2)

头像
已注销
    阅读 6 分钟
    1

    JQuery属性操作

    元素固定属性值prop()

    所谓的元素的固定属性就是元素自带的属性，如a链接中的href属性

    语法
    image.png

    元素自定义属性值attr()

    用户自己给元素设置的属性，称为自定义属性
    image.png

    注意:该方法也可以直接获取自定义属性

    数据缓存data()

    data（）方法可以指定元素上设置属性，但不会修改DOM结构，一旦页面被重新刷新，之前存放的数据都会被移除
    image.png
    <!DOCTYPE html>  
<html lang="en">  
  
<head>  
 <meta charset="UTF-8">  
 <meta name="viewport" content="width=device-width, initial-scale=1.0">  
 <title>JQuery属性操作</title>  
 <script src="./jquery-3.5.1.js"></script>  
</head>  
  
<body>  
<a href="https://www.baidu.com/" title="百度">百度</a>  
<input type="checkbox" name="" id="" checked>  
<div index='2' date-index='2'>DIV</div>  
<span>SPAN</span>  
<script>  
  
 $(function () {  
      // 1.获取元素固有属性值  
 console.log($('a').prop('href'))  
      $('a').prop('title', 'baidu')  
      $('input').change(function () {  
         console.log($('input').prop('checked'))  
      })  
  
      //2. 获取元素自定义的属性  
 console.log($('div').attr('index'))  
      console.log($('div').attr('index', "4"));  
 console.log($('div').attr('date-index'))  
      // 3.数据缓存  里面的数据是存放在内存里面  
 $('span').data('name', "尧子陌");  
 console.log($('span').data('name'))  
  
   })  
  
</script>  
  
</body>  
  
</html>

    image

    JQuery获取文本值

    <!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>JQuery获取文本值</title>  
 <script src="jquery-3.5.1.js"></script>  
</head>  
<body>  
<div>  
 <span>hello word</span>  
</div>  
<input type="text" value="请输入内容">  
</body>  
<script>  
 console.log($('div').html()) //获取div里面的内容；  
 $('div').html('Zero');  
  
 console.log($('input').val());//打印表单里面的内容  
 $('input').val('520')  
  
  
</script>  
</html>

    image.png

    返回指定的祖先元素

    在JQuery中，可以通过parents()的方法来获取指定的祖先元素，参数可直接写祖先元素的名字
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>返回指定的祖先元素</title>
        <script src="./jquery-3.5.1.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="father">
                <div class="son">123</div>
            </div>
        </div>

        <script>
            $(function() {
                console.log($('.son').parents('.container'));
                console.log($('.son').parents('.father'));

            })
        </script>
    </body>
</html>

    image.png

    遍历元素

    在JQuery中，隐式迭代只是对相同的元素做了同样的操作，如果想要给同一类元素做不同的操作，则需要用到遍历

    常规遍历
    image.png

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery遍历元素</title>
    <script src="jquery-3.5.1.js"></script>
</head>
<body>
<div>22</div>
<div>44</div>
<div>66</div>
<script>
    $(function () {
        //第一种遍历方法

        var arr = ['yellow', 'red', 'pink']
        var sum = 0;
        //两个参数 i指的是索引号  ele指的是元素对象
        $('div').each(function (i, ele) {
            console.log(i) //打印索引号
            console.log(ele) //打印元素对象
            $(ele).css('backgroundColor', arr[i]);
            sum += parseInt($(ele).text());
        })
        console.log(sum)


    })


</script>
</body>
</html>

    image.png

    $.each()遍历
    image.png

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>$.each遍历</title>
        <script src="./jquery-3.5.1.js"></script>
    </head>
    <body>
        <script>
            $(function() {
                var arr = ['yellow', 'red', 'pink'];
                //遍历数组
                $.each(arr, function(i, ele) {
                    console.log(i);
                    console.log(ele)

                })
                //遍历对象
                $.each({
                    name: "尧子陌",
                    age: 18
                }, function(i, ele) {
                    console.log(i);
                    console.log(ele)
                })


            })
        </script>

    </body>
</html>

    image.png

    创建 删除 添加元素

    image.png

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>创建 删除 添加元素</title>
        <script src="jquery-3.5.1.js"></script>
    </head>
    <body>
        <ul>
            <li>快乐的天使</li>
        </ul>
        <span>hello</span>
        <p>段落</p>
        <script>
            $(function() {
                // 内部操作

                var li = $("<li>创建的元素</li>");
                var li2 = $('<li>第二次创建的元素</li>')

                $('ul').prepend(li);
                $('ul').append(li2)

            })

            // 外部操作

            var box = $('<div>Word</div>');
            var box2 = $("<div>尧子陌</div>");
            $('span').after(box)
            $('span').before(box2);

            // 删除元素
            $('p').empty()
        </script>

    </body>
</html>

    image.png

    jquery
    已注销
    54 声望3 粉丝

    保持呼吸 坚持学习

    « 上一篇
    JQuery(1)
    下一篇 »
    JQuery(3)

    引用和评论

    推荐阅读
    头像
    Vue

    已注销阅读 1.2k

    0 条评论
    得票最新