JQuery笔记(2)

JQuery属性操作

  • 设置或获取元素固有属性值 prop()
  1. 获取属性语法

prop(‘属性’)

  console.log($('a').prop('href'));
  <input type="checkbox" name="" id="" checked>
    <script>
        $(function () {
            $('input').change(function () {
                console.log($(this).prop('checked'));
            })
        })
    </script>
  1. 设置属性语法

prop(‘属性’,‘属性值’)

  $('a').prop('title', '你好吗')
  • 设置或获取自定义属性值attr()
  1. 获取属性语法

attr(‘属性’)

 <div index='0'></div>
    <script>
        $(function () {
            console.log($('div').attr('index'));
        })
    </script>
  1. 设置属性语法

attr(‘属性’,‘属性值’)

  $('div').attr('index', '1')
  • 数据缓存data()
    data()方法可以在指定的元素上存取数据,并不会修改DOM元素的结构。一旦页面刷新,之前存放的数据都将被移除。

1.附加数据语法

date(‘name’,‘value’) //向被选元素附加数据

 $('div').data('index', '1')

2.获取数据语法
这个方法获取data-index h5自定义属性,第一个不用写data- 而且返回的是数字型。

data(’'name") //向被选元素获取数据

 console.log($('div').data('index'));

JQuery内容文本值

主要针对元素的内容还有表单的值操作

  1. 普通元素内容html() (相当于原生innerHTML)

html() //获取元素的内容

代码:

  <div>
        <span>啦啦啦</span>
  </div>
    <script>
        $(function () {
            console.log($('div').html());
        })
    </script>

效果:
在这里插入图片描述

html(‘内容’) //设置元素内容

代码:

  <div>
        <span>啦啦啦</span>
    </div>
    <script>
        $(function () {
            $('div').html('我是佩奇');
        })
    </script>

效果:
在这里插入图片描述

2.普通元素文本内容text() (相当于原生innerText)

text() //获取元素的内容

代码:

  console.log($('div').text());

效果:
在这里插入图片描述

text(‘内容’) //设置元素内容

代码:

console.log($('div').text('我是佩奇'))

效果:
在这里插入图片描述
3.获取设置表单值 val()
代码:

 <input type="text" value="">
    <script>
        $(function () {
            $('input').val('请输入文字');
            console.log($('input').val());
        })
    </script>

效果:
在这里插入图片描述

案例:购物车案例模块-增减商品数量分析

1.核心思路:首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋给文本框。
2.注意1:只能增加本商品的数量,就是当前+号的兄弟文本框(itxt)的值。
3.修改表单的值是val()方法
4.注意2:这个变量初始值应该是这个文本框的值,在这个值的基础上++,要获取表单的值
5.减号(decrement)思路同理,但是如果文本框的值是1,就不能再减了

案例:购物车案例模块-修改商品小计分析

1.核心思路:每次点击+号或者-号,根据文本框的值乘以当前商品的价格 就是商品的小计
2.注意1:只能增加本商品的小计,就是当前商品的小计模块(p-sum)
3.修改普通元素的内容是text()方法
4.注意2:当前商品的价格,要把¥符号去掉再相乘 截取字符串substr(1)
5.parents(‘选择器’)可以返回指定祖先元素
6.最后计算的结果如果想要保留2位小数 通过toFixed(2)方法
7.用户也可以直接修改表单里面的值,同样要计算小计。用表单change事件
8.用最新的表单内的值乘以单价即可(还是当前商品小计)

JQuery元素操作

主要是遍历、创建、添加、删除元素操作。

  • 遍历元素
    隐式迭代是对同一类元素做了同样的操作,如果想要给同一类元素做不同操作,就需要用到遍历。

语法1:$(‘div’).each(function(index,domEle){xxx})
index:元素的索引号 domEle:元素的值

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var arr = ['red', 'green', 'blue'];
        $(function () {
            $('div').each(function (index, domEle) {
                console.log(domEle);
                $(domEle).css('color', arr[index]);
            })
        })
    </script>

语法2:$.each(object,function(index,element){xxx})

1.$.each()方法可用于便利任何对象。主要用于数据处理,比如数组,对象
2.里面的函数有2个参数:index是每个元素的索引号;element遍历内容

购物车案例模块-计算总计和总额

1.核心思路:把所有文本框里面的值相加就是总计数量。总额同理
2.文本框里面的值不相同,如果想要相加需要用到each遍历。声明一个变量,相加即可。
3.点击+号-号,会改变总计和总额,如果用户修改了文本框里面的值,同样会改变总计和总额
4.因此可以封装一个函数求总计和总额的,以上2个操作调用这个函数即可。
5.注意1:总计是文本框里面的值相加用val() 总额是普通元素的内容用text().

  • 元素的创建、添加(内部、外部)、删除。
<body>
    <ul>
        <li>我是原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function () {
            //1.创建元素
            var li = $("<li>我是后来创建的li</li>")
            //2.添加元素
            //2.1内部添加
            $('ul').append(li); //放到内容的最后面
            $('ul').prepend(li); //放到内容的最前面
            //2.2外部添加
            var div = $('<div>我是后妈生的</div>')
            $('.test').after(div);//放到内容的最后面
            $('.test').before(div); //放到内容的最前面
            //3.删除元素
            //3.1删除匹配的元素(本身)
            $('ul').remove();
            //3.2删除匹配的元素集合中所有的子节点
            $('ul').empty();  //把ul里面的所有li删掉了
            //3.3清空匹配的元素内容
            $('ul').html('');

        })
    </script>

JQuery尺寸、位置操作

  • JQuery尺寸
语法用法
width()/height()取得匹配元素宽度和高度值 只算width/height
innerWidth()/innerHeight()取得匹配元素宽度和高度值 包含padding
outerWidth()/outerHeight()取得匹配元素宽度和高度值 包含padding、border
outerWidth(true)/outerHeight(true)取得匹配元素宽度和高度值 包含padding、border、margin
    <style>
        div {
            width: 200px;
            height: 200px;
            padding: 2px;
            border: 1px solid pink;
            margin: 3px;
        }
    </style>
</head>

<body>
    <div>一根藤上七朵花</div>
    <script>
        $(function () {
            var a = $('div').width(); //200
            var b = $('div').innerHeight(); //204
            var c = $('div').outerHeight(); //206
            var d = $('div').outerHeight(true); //212
        })
    </script>
  • jquery位置
offset()设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系
position()返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准
scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

offset()

    <style>
        .father {
            width: 600px;
            height: 600px;
            background-color: purple;
            margin: 30px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function () {
            //1.返回元素自身的位置(以对象形式返回)
            console.log($('.son').offset());
            console.log($('.son').offset().left);
            //设置元素自身的位置
            $('.son').offset({
                top: 50,
                left: 50
            })
        })
    </script>

position()
只能获取位置,不能设置位置。

    <style>
        .father {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: purple;
            margin: 30px;
        }

        .son {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function () {
            console.log($('.son').position());
        })
    </script>

scrollTop()/scrollLeft()

 <style>
        .back {
            position: fixed;
            display: none;
            top: 500px;
            right: 0;
            width: 47px;
            height: 45px;
            background-color: pink;
            cursor: pointer;
        }

        .container {
            width: 500px;
            height: 500px;
            margin: 300px auto;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container"></div>
    <script>
        $(function () {
            $(document).scrollTop(100);//这句代码是为了让每次刷新页面时 文档自动跳到距离顶部100的位置。
            var boxTop = $('.container').offset().top; //蓝色盒子距离文档顶部的距离
            $(window).scroll(function () {
                if ($(document).scrollTop() >= boxTop) {
                    $('.back').fadeIn();
                } else {
                    $('.back').fadeOut();
                }
            })
            $('.back').click(function () {
                //元素才能做动画,不能是文档
                $('body,html').stop().animate({
                    scrollTop: 0
                })

            })
        })
    </script>

JQuery事件处理

  • 事件处理on
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $('div').on({
            mouseenter: function () {
                $(this).css('background', 'skyblue');
            },
            click: function () {
                $(this).css('background', 'purple');
            },
            mouseleave: function () {
                $(this).css('background', 'orange');
            }
        })
    </script>

若事件处理程序是一样的,可以用下面这种写法:

 <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .current {
            background-color: green;
        }
 </style>
   $('div').on('mouseenter mouseleave', function () {
      $(this).toggleClass('current');
        })

可以用于事件委派

  <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <script>
    //把事件委托给ul
        $('ul').on('click', 'li', function () {
            alert(11);
        })
    </script>

动态的创建元素,click没有办法绑定事件,on()可以给动态生成的元素绑定事件

 <script>
        $('ul li').click(function () {
            alert(2333);
        })
        $('ul').on('click', 'li', function () {
            alert('222');
        })
        var li = $('<li>我是后来创建的</li>')
        $('ul').append(li);
    </script>
  • 事件处理off()解绑事件
    off()方法可以移除通过on()方法添加的事件处理程序
<body>
    <div>111</div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <script>
        $(function () {
            $('div').on({
                click: function () {
                    console.log('我点击了');
                },
                mouseover: function () {
                    console.log('我经过了');
                }
            });
            //事件委托
            $('ul').on('click', 'li', function () {
                alert('你好');
            })
            //1.解绑事件
            $('div').off(); //解除了元素身上的所有事件
            $('div').off('click'); //解除了元素身上的点击事件
            $('ul').off('click', 'li'); //解除事件委托
        })
    </script>
  • 一次性事件
   $('p').one('click', function () {
                alert(11);
            })
        })
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页