jq的使用(学习&&总结三)

轻风拂平平

已于 2024-08-14 19:43:35 修改

阅读量878

点赞数 29

文章标签： jquery 前端

于 2024-08-14 19:43:25 首次发布

本文链接：https://blog.csdn.net/q2728137172/article/details/140805332

版权

枯燥的知识存储开始啦！！起来学习！！

jq的属性操作

获取和修改元素的固有属性prop（属性，值）

prop只有一个参数就是获取属性，两个参数就是修改属性;

获取和修改元素的自定义属性attr(属性，值);

用法同上

数据缓存data（）

当做变量存储,把数据存储在元素里,并不会修改dom元素结构，所以元素上无法查看。一旦页面刷新，之前存放的数据将被移除.

   $('span').data('uname','xiaoming');
        console.log($('span').data('uname'));

jq文本操作

获取和修改元素内容html（）

相当于原生的innerHTML()

获取文本值，不能识别标签.text()

获取表单值

$('input').val('123')
console.log($('input').val());

jq遍历

jq遍历，each（）让它对同一标签执行不同的操作。

初始化的配置

each()里的回调函数，第一个参数为索引，第二个参数为dom元素。

下面代码执行的操作是，对div不同的值分别上色。

    $('div').each(function(index,dom){
            console.log(index,dom);
            // 回调函数的第一个元素为索引，第二个为dom元素
            $(dom).css('color',a[index])
        })

执行结果

each()还可以遍历数组

     $(a).each(function(i,d){
            console.log(i,d);
        })

遍历对象

  $.each({
            name:'a',
            age:18
        },function(i,e){
            // 第一个为属性名,第二个为属性值
            console.log(i,e);
        })

创建和删除元素

添加元素

初始创建的页面样式

append()内部添加元素，并放到最后面

 var li=$('<li>后创建的li</li>')
        // var li=$('<li></li>')
        console.log(li);
        $('ul').append(li);//内部添加并且放在最后面

prepend()内部添加元素，并且放到最前面

 var li=$('<li>prepend后创建的li</li>')
        console.log(li);
        $('ul').prepend(li);//内部添加并放在最前面

after（）外部添加元素并且放在最后面

before()外部添加元素并放在最前面

  var div=$('<div>after后创建div</div>')
        var div2=$('<div>before后创建的div</div>')
        //外部添加元素并且放在最后面
        $('.text').after(div)
        //外部添加并放在最前面
        $('.text').before(div2)

删除元素

remove()删除所有

empty()删除所有子节点

html()清空匹配的元素内容

获取元素大小

width/height获取元素宽/高，如果里面要是添加参数就是修改值，不添加为获取值.

$('div').width() $('div').height()

innerHeight()/innerWidth() 获取和设置width或height +padding的大小

$('div').innerHeight() $('div').outerHeight()

outerHeight()/outerWidth()获取和设置 width和height +padding+border的大小

$('div').outerHeight() $('div').outerWidth()

outerHeight()/outerWidth()里面的参数为true的话，是获取和设置 width和height +padding+border+margin的大小

$('div').outerHeight(true)

获取元素位置

$('div').offset()获取元素距离文档的距离

如果要想获取到具体上下左右的距离，直接在offset().top等等获取

console.log($('.s').offset().top);

如果想要修改元素距离文档的距离，也是类似修改元素大小方式，修改元素距离文档的距离

position()获取本身距离带有定位元素父级的位置

注：如果没有带定位的父级元素则以文档为准，同时这个方法只能获取值，不能设置和修改值.

修改值并不会报错，但也不会修改成功

  console.log($('.s').position());

被卷去头部的位置

scrollTop()获取被卷去头部的部分。（和js一样）

让我们通过一个小例子，来更好的了解这个属性吧

。。。。。。。。。。

默认为下方这个页面，当我们滑动滚轮，大于等于蓝色方块的头部时候，右下角显示一个，返回顶部，并且点击返回顶部的时候，回到顶部。

原理：

1.给文档绑定一个滚动事件，页面滚动时，触发这个事件。

2.获取文档被卷去头部的距离,判断它是否大于蓝色盒子距离头部的距离，大于显示，小于隐藏

3.给返回顶部的方块绑定一个点击事件，点击时让页面回到顶部。

源码奉上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.min.js"></script>
    <style>
        body{
            height: 2000px;
        }
        .back{
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background-color: pink;
            display: none;

        }
        .box{
            width: 900px;
            height: 900px;
            background-color: blue;
            margin: 400px auto;
        }
    </style>
</head>
<body>
    <div class="back">返回顶部</div>
    <div class="box"></div>
    <script>
        var box=$('.box').offset().top
        console.log(box)

        //滚动事件，滚动到指定坐标
        $(window).scroll(function(){
            //scrollTop()获取被卷去的部分
            console.log($(document).scrollTop());
            if($(document).scrollTop()>=box){
                $('.back').fadeIn()
            }else{
                $('.back').fadeOut()
            }
        })
        $('.back').click(function(){
            $('body,html').stop().animate({
                scrollTop:0
            })
        })
    </script>
</body>
</html>

事件处理on

on的好处

(1)on可以绑定一个或多个事件处理程序

(2)on可以实现事件的委派

(3)on 可以给未来创建的元素绑定事件

绑定多个事件
$('div').on({
            click:function(){
                $(this).css('background','pink');
            },
            mouseover:function(){
                $(this).css('background','blue');
            },
            mouseout:function(){
                $(this).css('background','orange');
            }
        })

$('ul').on('click','li',function()）参数1绑定的事件参数2绑定的元素参数3 函数

        给未来创建的元素绑定事件
        var li=$('<li>我是ul的孩子</li>')
        $('ul').append(li)
        $('ul').on('click','li',function(){
            console.log(1);
        })
        //

jq的学习到这里就结束了，下次见＞_＜