JQuery的属性操作及事件

最新推荐文章于 2024-04-17 07:27:59 发布
最新推荐文章于 2024-04-17 07:27:59 发布
阅读量624 收藏
点赞数 3
分类专栏： 前端开发 文章标签： javascript 前端 学习 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51478745/article/details/126096004
版权

一、属性操作

1、固有属性

（1）获取：选中元素.prop('属性名')

console.log($('img').prop('src'));

（2）设置：选中元素.prop('属性名','值')

<body>
<img src="https://p1.music.126.net/c-LMZbZbQLcMobnFciAl7w==/109951167683507100.jpg?imageView&quality=89" alt="">
<button>修改</button>
<script>
    $('button').click(function(){
        $('img').prop('src','https://p1.music.126.net/wb1Gd2C7DknUivCqdFaKeQ==/109951167683687375.jpg?imageView&quality=89')
        console.log($('img').prop('src'));
    })
</script>
</body>

2、自定义属性attr()

（1）获取：选中元素.attr('属性名')

console.log($('img').attr('index'));

（2）设置：选中元素.attr('属性名','值')

<body>
<img src="https://p1.music.126.net/c-LMZbZbQLcMobnFciAl7w==/109951167683507100.jpg?imageView&quality=89" alt="">
<button>修改</button>
<script>
    $('button').click(function(){
        $('img').attr('index',1)
        console.log($('img').attr('index'));
    })
</script>
</body>

3、数据缓存data()：该方法在指定元素上存取数据，不会改变dom元素结构。页面刷新后，之前存储就会消失

（1）获取：选中元素.data('属性名')

$('img').data('a',5)

（2）设置：选中元素.data('属性名','值')

<body>
<img src="https://p1.music.126.net/c-LMZbZbQLcMobnFciAl7w==/109951167683507100.jpg?imageView&quality=89" alt="">
<button>修改</button>
<script>
    $('button').click(function(){
        $('img').data('a',5)
        console.log($('img').data('a'));
    })
</script>
</body>

（3）区别

①data()：在元素本身是看不到设置的属性（不会更改DOM结构），但是该属性是存在的，且可以获取输出

②attr()：在元素本身是可以看到设置的属性，也可以获取输出

二、遍历操作

1、区别

（1）隐式迭代：给同一类元素做同样的操作

（2）遍历操作：给同一类元素做不同的事情

2、遍历元素

（1）each(fuction(index,domEle))

index：下标

domEle：Dom元素【注意：不是jq元素，用jq方法的话，需要单独封装】

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var colorArr = ['red','green','blue']
    $('li').each(function(index,dom){//一定要注意记得传参
        console.log(index,dom);
        $(dom).css('background',colorArr[index])
    })
</script>
</body>

（2）$.each(object,function(index,element){})

index：下标

element：循环出来数据

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var colorArr = ['red','green','blue']
    $.each(colorArr,function(index,item){
        console.log(index,item);
    })
</script>
</body>

3、创建/添加/删除元素

（1）创建：$('<标签></标签>')

var newli = $('<li>4</li>')

（2）添加

①内部：

        前：选到对应位置.prepend(创建元素)

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<button class="add">添加</button>
<button class="del">删除</button>
<script>
    $('.add').click(function(){
        var newli = $('<li>4</li>')
        $('ul').append(newli)
    })
</script>
</body>

  

        后：选到对应位置.append(创建元素)

$('ul').prepend(newli)

  

②外部：

        前：选到对应位置.before(创建元素)

$('ul').before(newli)

        后：选到对应位置.after(创建元素)

$('ul').after(newli)

  

（3）删除

①选到对应元素：remove()删除本身

$('.del').click(function(){
        $(newli).remove()
})

②选到对应元素：empty()删除匹配的所有子节点

$('ul').empty()

③对应元素：html('')删除匹配的所有子节点

$('ul').html('')  //注意有单引号

4、完整的效果

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<button class="add">添加</button>
<button class="del">删除</button>
<script>
    $('.add').click(function(){
        var newli
        $('li').each(function(index,dom){
            newli = $(`<li>${index+2}</li>`)//``模板字符串
        })
        $('ul').append(newli)
    })
    $('.del').click(function(){
        $('ul').html('')
    })
</script>
</body>

三、尺寸、位置操作

1、尺寸

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0.js"></script>
    <style>
        div{
            width: 100px;
            height: 200px;
            padding: 10px;
            border: 5px solid red;
            margin: 10px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

（1）width(),height():获取元素的宽高，只算宽高width、height

<script>
    console.log($('div').width());//100
    console.log($('div').height());//200
</script>

（2）innerWidth(),innerHeight():获取元素的宽高,width,height+padding

<script>
    console.log($('div').innerWidth());//120
    console.log($('div').innerHeight());//220
</script>

（3）outerWidth(),outerHeight():获取元素的宽高,width,height+padding+border

<script>
    console.log($('div').outerWidth());//130
    console.log($('div').outerHeight());//230
</script>

（4）outerWidth(true),outerHeight(true):获取元素的宽高,width,height+padding+border+magrin

<script>
    console.log($('div').outerWidth(true));//150
    console.log($('div').outerHeight(true));//250
</script>

2、位置

（1）offset()：设置或获取元素偏移量（获取,设置元素相对于偏离文档的位置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 200px;
            padding: 10px;
            border: 5px solid red;
            margin: 10px;
        }
    </style>
</head>
<body>
<div></div>
<script>
    console.log($('div').offset());
    $('div').offset({top:50,left:30})
    console.log($('div').offset());
</script>
</body>
</html>

（2）position()：获取元素偏移【只能获取不能设置】

返回被选元素带有定位的父级偏移坐标,如果父级没有定位,那就是以文档为准

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 100px;
            height: 200px;
            padding: 10px;
            border: 5px solid red;
            margin: 10px;
            position: relative;
        }
        .son{
            width: 20px;
            height: 20px;
            background-color: skyblue;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<script>
    console.log($('.son').position());
    $('.father').offset({top:50,left:30})
    console.log($('.son').position());
</script>
</body>
</html>

（3）滚动条：scrollTop()/sroclLeft()设置或获取元素被卷去的头部和左侧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0.js"></script>
    <style>
        .box{
            width: 300px;
            height: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="https://p1.music.126.net/RQImixd1s2jJwb7LWbv-iw==/109951167683330209.jpg?imageView&quality=89" alt="">
</div>
<script>
    $('.box').scroll(function(){
        console.log($('.box').scrollTop()); //返回：顶部滚动多少
    })
</script>
</body>
</html>

（4）带有动画的返回顶部

$(window).scroll(function(){
        $(document).scrollTop()
})

完整例子：具体动画效果后续补发视频给小伙伴们🧐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .btn{
            width: 200px;
            height: 50px;
            background-color: skyblue;
            line-height: 50px;
            text-align: center;
            position: fixed;
            bottom: 100px;
            right: 50px;
            display: none;
        }
    </style>
</head>
<body>
    <img src="http://p1.music.126.net/c-LMZbZbQLcMobnFciAl7w==/109951167683507100.jpg?imageView&blur=40x20" alt="">
    <img src="http://p1.music.126.net/wb1Gd2C7DknUivCqdFaKeQ==/109951167683687375.jpg?imageView&blur=40x20" alt="">
    <img src="http://p1.music.126.net/RQImixd1s2jJwb7LWbv-iw==/109951167683330209.jpg?imageView&blur=40x20" alt="">
    <button class="btn">返回顶部</button>
    <script>
        $(window).scroll(function () {
            console.log($(document).scrollTop());
            if ($(document).scrollTop() >= 300) {
                $('.btn').fadeIn(500)
            } else {
                $('.btn').fadeOut(500)
            }
        })
        $('.btn').click(function () {
            $('html').animate(
                {
                    scrollTop: '0'
                },
                1000
            )
        })
    </script>
</body>
</html>

四、事件（jQuery 事件 | 菜鸟教程）

1、单个事件注册：element.事件(fuction(){})

（1）.hover：模仿鼠标悬停事件

（2）参数

        ①函数1：鼠标移上去触发什么事件

        ②函数2：鼠标离开触发什么事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        button{
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
    <button>鼠标悬浮</button>
    <script>
        $('button').hover(
            function(){
                $(this).css('background','red')
            },
            function(){
                $(this).css('background','')
            }
        )
    </script>
</body>
</html>

2、事件处理on()绑定事件：$('选择器').on('类型',fuction(){})

（1）优点一：可以绑定多个函数，处理相同或不同的程序

①处理相同的程序

<script>
    $('button').on('click mouseenter',function(){
        console.log('成功');
    })
</script>

②处理不同的程序

<script>
    $('button').on({
        click:function(){
            console.log('点击成功');
        },
        mouseenter:function(){
            console.log('成功');
        }
    })
</script>

（2）优点二： 可以给动态生成元素绑定，绑定事件（必须是对子节点绑定）

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<button class="add">添加</button>
<button class="del">删除</button>
<script>
    $('.add').click(function(){
        var newli
        $('li').each(function(index,dom){
            newli = $(`<li>${index+2}</li>`)//``模板字符串
        })
        $('ul').append(newli)
    })
    $('.del').click(function(){
        $('ul').html('')
    })
    $('ul').on('click','li',function(){
        console.log('点击');
    })
</script>
</body>

3、事件处理off()解绑事件

（1）移除全部事件：ele.off()

<script>
    $('button').on({
        click:function(){
            console.log('点击成功');
        },
        mouseenter:function(){
            console.log('成功');
        }
    })
    $('button').off()
</script>

（2）移除某一个事件：ele.off('类型')

$('button').off('click')

4、事件只触发一次：one()

$('button').one('click',function(){
        console.log('仅一次');
})

5、自动触发事件

$('button').click()

五、插件

jQuery插件库-收集最全最新最好的jQuery插件

小伙伴可以在这个网站找喜欢的作品，下载压缩包后，可以直接看效果，而且都有源码的哦🧐

五秒法则
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JQuery属性操作与循环用法示例
10-17
### jQuery属性操作 #### 1. 读取属性 jQuery提供`.prop()`方法用于获取或设置元素的属性值。例如，要获取`<img>`标签的`src`属性，我们可以使用以下代码： ```javascript var $src = $('#img1').prop('src'); ``...
jQuery中获取点击事件的元素及元素的id属性
找师父的小白的博客
03-24 6034
新问题： 怎么获取到点击的元素呢？ 在jQuery中，当想获取点击的元素时，我们可以用下面的方法，代码如下： $('.top-menu .el-menu-item').click(function(e){ var v = $(e.target);//获取当前点击事件的元素 }); 当你获取当前的元素后，就可以对元素进行操作了，比如获取元素的innerHTML，代码如下： $('.top-menu .el-menu-item').click(function(e){ var v = $(e.target
Jquery事件和DOM操作
qq_45895931的博客
06-23 405
$(“选择器”).click(function(){ })；常用$(“选择器”).on("事件类型1 事件类型2。。。 "，“子元素” , function(){});常用动态绑定 如果想给某个父元素中的子元素绑定事件，但是 这个子元素 不存在不是我们自己写 的，而是通过js代码动态添加的时候，此时绑定事件用。 2.DOM操作 模板法。 增：创建，美化，添加 document.createElement(“标签名”)； 删: 自已.remove() 父.removeChild(“子节点”); 改：父.rep
JavaScript之DOM(一)(获取元素、事件基础、操作元素），2024年最新大厂面试必备知识点
最新发布
I8929545452_VD的博客
04-17 901
疯狂编程学习效果可视化写博客阅读优秀代码心态调整。
在input加了disabled属性后，如何触发点击事件?
weixin_47020721的博客
03-07 5980
点击子标签，会一层一层往上传，并触发父标签的绑定事件。
Jquery中事件
m0_73030012的博客
09-17 1382
事件是Web浏览器通知应用程序（比如我们的js）发生了某个事情！我们可以为这些特定的事情，事先安排好处理方案，这样就能够实现互动！事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。jquery是为事件处理特别设计的语法：$(selector).toggle(fun1, fun2,fun3-----)第一个方法和第二个方法是必须的，后面是可选的。注意：这个方法在1.8之前可以使用的，目前已经不支持！！
jquery获取dom元素身上的绑定事件
qq_43985303的博客
03-09 1223
转载jQuery** 1.8.0版本之前，我们要想获取某个DOM绑定的事件处理程序可以这样：**
JQuery节点元素属性操作方法
01-19
本文实例讲述了JQuery节点元素属性操作方法。分享给大家供大家参考。具体分析如下： 在JQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。 获取属性和设置属性 如果要获取p元素的属性...
jQuery操作属性和样式详解
10-22
本文将深入探讨jQuery如何操作属性和样式，帮助开发者更好地理解和应用这一强大的工具。 首先，我们需要理解DOM（Document Object Model）属性与元素属性的区别。在HTML中，像`id`、`src`和`alt`这样的属性被称为...
jquery 获取某个元素下面所有事件
热门推荐
一名普通码农的菜地
02-28 1万+
jquery的给元素绑定的事件可以用data方法取出来 通过$(element).data("events")来获取 // 比如给一个button绑定两个click事件 $("button").click(function() { alert("1") }); $("button").click(function() { alert("2") }); // 这个时候点
【Jquery-06】jq获取元素的位置和jq的事件
前端代码小白的日常博客
11-10 661
position().top用于获取距离定位父级顶部的距离，position().left用于获取距离父级左侧的距离。有两个属性left/top，offset().top用于获取距离可视区域顶部的位置，offset().left用于获取距离可视区域左侧的位置。position()方法用于返回被选元素相对于带有定位父级偏移坐标，如果父级没有定位则相对于html。可以事件委派操作，事件委派的定义就是把原来加给子元素身上的事件绑定在父元素身上。第一个参数：事件名，可以同时添加多个事件，用空格分开。
jquery用data方法获取某个元素上的事件
12-01
jquery的给元素绑定的事件可以用data方法取出来 通过$(element).data(“events”)来获取 // 比如给一个button绑定两个click事件 $("button").click(function() { alert("1") }); $("button").click(function() { alert("2") }); // 这个时候点击该button会分别弹出 2 和1的alert框 // 取出该button的所有click事件，是个数组 $("button").data('events').click 会看到两个click事件的数组 得到该数组，你可以调
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
01-21
本文实例讲述了jquery获取并修改触发事件的DOM元素。分享给大家供大家参考，具体如下： 需求 当点击关注后，改变按钮样式并显示取消关注，如图     实现 利用jQuery的 target获取到触发该事件的dom,然后修改它 target 属性 代码： HTML <div class=people-desc> <div class=people-name>{$vo['nickname']}</div> <div class=people-state u03bfnclick=toFollow({$vo[>+关注</div> </div>
jq 下拉列表选中事件_JQuery select各种事件
weixin_35748610的博客
01-27 5253
最近工作中总出现select 和 option问题，整理一下，内容大部分源于网络资料一、基础取值问题例如1、设置value为pxx的项选中$(".selector").val("pxx");2、设置text为pxx的项选中$(".selector").find("option:contains('pxx')").attr("selected",true);注意：之前$(".selector").f...
jQuery常用的方法（获取元素，事件等）
xiaoded的博客
04-18 400
一直在想着写点儿东西，来记录一下编程路程，但是，一直在拖延着（拖延癌症晚期），慢慢来吧，写一些博客也是对自己的一个考验和磨砺，“积土成山，风雨兴焉；积水成渊，蛟龙生焉”，一点一点做就好了。 记录一些浅显的知识，慢慢的成长 jQuery获取标签常用的方法 $('#id') //通过id获取元素 $('.class') //通过class 来获取元素 $('#id...
jQuery的on方法获取发生事件的元素对象
XUYIGE的博客
02-14 587
一个元素绑定事件： 方式一：使用$(this)获取 如下代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <ul> &lt...
jquery 的on方法获取发生事件的元素对象
xinghuo0007的博客
05-08 1万+
jquery 的on方法获取发生事件的元素对象方法一：一个元素绑定事件的时候方式一：使用$(this)获取 如下代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.2.1.js"></script>
jquery获取元素绑定的事件
jvortex的专栏
06-29 4346
在调试jquery的事件绑定时会用到。查看某元素是否绑定上了事件。 在JQuery1.8之前： var obj=$('div');var events=obj.data('events'); 在JQuery1.8中： var objs=$('div');var events=$._data(objs[0],'events'); 如果想查看events里具体都哪些事件。可
jquery简单的语法
10-15
在使用jquery时，我们可以通过一些简单的语法来实现一些常见的操作，比如绑定事件、操作属性和样式等等。下面是一些关于jquery的常见语法简介： 1. mouseout()方法： 这个方法可以将mouseout事件绑定到指定的元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

五秒法则

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值