jQuery的核心函数和基本属性操作用法(二)

最新推荐文章于 2022-03-12 23:15:08 发布
原创 最新推荐文章于 2022-03-12 23:15:08 发布 · 377 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery

本文详细介绍jQuery中元素操作如类、代码、CSS调整及事件处理技巧，包括事件绑定、移除、冒泡与默认行为控制，适合前端开发者进阶学习。

文章目录

Class操作
addClass(class|fn)

作用: 添加一个类

如果要添加多个, 多个类名之间用空格隔开即可

GIF 2020 6 16 18 39 38

$(function () {
    var btns = document.getElementsByTagName("button")
    btns[0].onclick = function () {
        // $("div").addClass("class1")
        $("div").addClass("class1 class2")
    }
})
removeClass([class|fn])

作用: 删除一个类

如果想删除多个, 多个类名之间用空格隔开即可

$(function () {
    var btns = document.getElementsByTagName("button")
    btns[0].onclick = function () {
        // $("div").addClass("class1")
        $("div").addClass("class1 class2")
    }
})
toggleClass(class|fn[,sw])

作用: 切换类

有就删除, 没有就添加

GIF 2020 6 16 18 42 12

$(function () {
    var btns = document.getElementsByTagName("button")
    btns[2].onclick = function () {
    	$("div").toggleClass("class2 class1")
    }
})
代码/文本/值操作
html([val|fn])

和原生JS中的innerHTML一模一样

GIF 2020 6 16 18 45 46

$(function () {
    var btns = document.getElementsByTagName("button")
    btns[0].onclick = function () {
    	$("div").html("<p>我是段落<span>我是span</span></p>")
    }
    btns[1].onclick = function () {
    	console.log($("div").html())
    }
})
text([val|fn])

和原生JS中的innerText一模一样

GIF 2020 6 16 18 52 21

$(function () {
    var btns = document.getElementsByTagName("button")
    btns[2].onclick = function () {
    	$("div").text("<p>我是段落<span>我是span</span></p>")
    }
    btns[3].onclick = function () {
    	console.log($("div").text())
    }
})
val([val|fn|arr])

GIF 2020 6 16 18 53 34

$(function () {
    var btns = document.getElementsByTagName("button")
    btns[4].onclick = function () {
    	$("input").val("请输入内容")
    }
    btns[5].onclick = function () {
    	console.log($("input").val())
    }
})
CSS相关
操作CSS
逐个设置

QQ截图20200616203819

$(function () {
    $("div").css("width", "100px")
    $("div").css("height", "100px")
    $("div").css("background", "red")
})
链式设置

链式操作如果大于3步, 建议分开

QQ截图20200616203900

$(function () {
    $("div").css("width", "100px").css("height", "100px").css("background", "blue")
})
批量设置

QQ截图20200616203943

$(function () {
    $("div").css({
        width: "100px",
        height: "100px",
        background: "yellow"
    })
})
获取CSS样式值

QQ截图20200616204041

$(function () {
    console.log($("div").css("width"))
    console.log($("div").css("height"))
    console.log($("div").css("background"))
})
位置和尺寸
监听获取

offset([coordinates])

作用: 获取元素距离窗口的偏移位

position()

作用: 获取元素距离定位元素的偏移位

监听设置

position方法只能获取不能设置

GIF 2020 6 16 20 45 33

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            border: 50px solid #000;
            margin-left: 50px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            var btns = document.getElementsByTagName("button")
            // 监听获取
            btns[0].onclick = function () {
                // 获取元素的宽度
                // console.log($(".father").width())//200


                // offset([coordinates])
                // 作用: 获取元素距离窗口的偏移位
                // console.log($(".son").offset().left)//150
                // position()
                // 作用: 获取元素距离定位元素的偏移位


                console.log($(".son").position().left)//50
            }
            // 监听设置
            btns[1].onclick = function () {
                // 设置元素的宽度
                // $(".father").width("500px")

                // $(".son").offset({
                //     left: 10
                // })

                // 注意点: position方法只能获取不能设置
                // $(".son").position({
                //     left: 10
                // })

                $(".son").css({
                    left: "10px"
                })
            }
        })
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>监听获取</button>
    <button>监听设置</button>
</body>
</html>
scrollTop方法
监听设置

获取滚动的偏移位

console.log($(".scroll").scrollTop())

获取网页滚动的偏移位

为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法

console.log($("body").scrollTop()+$("html").scrollTop())
监听设置

设置滚动的偏移位

$(".scroll").scrollTop(300)

设置网页滚动偏移位

为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法

$("html,body").scrollTop(300)

GIF 2020 6 16 20 52 19

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            width: 100px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            var btns = document.getElementsByTagName("button")
            // 监听获取
            btns[0].onclick = function () {
                // 获取滚动的偏移位
                // console.log($(".scroll").scrollTop())
                // 获取网页滚动的偏移位
                // 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
                console.log($("body").scrollTop()+$("html").scrollTop())
            }
            btns[1].onclick = function () {
                // 设置滚动的偏移位
                $(".scroll").scrollTop(300)
                // 设置网页滚动偏移位
                // 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
                $("html,body").scrollTop(300)
            }
        })
    </script>
</head>
<body>
    <div class="scroll">我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
    </div>
    <button>获取</button>
    <button>设置</button>
</body>
</html>
事件处理
事件绑定

有两种绑定事件方式

  • eventName(fn)

编码效率略高/ 部分事件jQuery没有实现,所以不能添加

GIF 2020 6 17 11 37 02

$(function () {
    $("button").click(function () {
    	alert("hello lnj")
    })
    $("button").click(function () {
    	alert("hello 123")
    })
    $("button").mouseleave(function () {
    	alert("hello mouseleave")
    })
    $("button").mouseenter(function () {
    	alert("hello mouseenter")
    })
})
  • on(eventName, fn)

编码效率略低/ 所有js事件都可以添加

可以添加多个相同或者不同类型的事件,不会覆盖

GIF 2020 6 17 11 37 52

$(function () {
    $("button").on("click", function () {
    	alert("hello click1")
    })
    $("button").on("click", function () {
    	alert("hello click2")
    })
    $("button").on("mouseleave", function () {
    	alert("hello mouseleave")
    })
    $("button").on("mouseenter", function () {
    	alert("hello mouseenter")
    })
})
事件移除
  • off方法如果不传递参数, 会移除所有的事件
$("button").off()
  • off方法如果传递一个参数, 会移除所有指定类型的事件

GIF 2020 6 17 12 37 19

$("button").off("click")
  • off方法如果传递两个参数, 会移除所有指定类型的指定事件
("button").off("click", test1)
事件冒泡和默认行为
什么是事件冒泡?

GIF 2020 6 17 12 43 20

$(function () {
    $(".son").click(function (event) {
    	alert("son")
    })
    $(".father").click(function () {
    	alert("father")
    })
})
如何阻止事件冒泡
  • return false
  • event.stopPropagation()

GIF 2020 6 17 12 46 29

$(function () {
    $(".son").click(function (event) {
    	alert("son")
    	// return false
		event.stopPropagation()
    })
    $(".father").click(function () {
    	alert("father")
    })
})
什么是默认行为?

GIF 2020 6 17 12 49 07

$(function () {
    $("a").click(function (event) {
    	alert("弹出注册框")
    })
})
如何阻止默认行为
  • return false
  • event.stopPropagation()

GIF 2020 6 17 12 51 17

$(function () {
    $("a").click(function (event) {
    	alert("弹出注册框")
    	// return false
		event.preventDefault()
    })
})
事件自动触发
事件冒泡
  • trigger: 如果利用trigger自动触发事件,会触发事件冒泡
  • triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡

GIF 2020 6 17 13 00 22

$(function () {
    $(".son").click(function (event) {
    	alert("son")
    })
    $(".father").click(function () {
    	alert("father")
    })
    $(".father").trigger("click")
    $(".father").triggerHandler("click")
    // $(".son").trigger("click")
    // $(".son").triggerHandler("click")
})
默认行为
  • trigger: 如果利用trigger自动触发事件,会触发默认行为
  • triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为
$(function () {
    $("input[type='submit']").click(function () {
    	alert("submit")
    })
    $("input[type='submit']").trigger("click")
    $("input[type='submit']").triggerHandler("click")
    $("span").click(function () {
    	alert("a")
    })
    // $("a").triggerHandler("click")
    $("span").trigger("click")
})
自定义事件

满足条件

  • 事件必须是通过on绑定的
  • 事件必须通过trigger来触发

GIF 2020 6 17 13 10 43

$(function () {
    $(".son").on("myClick", function () {
    	alert("son")
    })
    $(".son").triggerHandler("myClick")
})
事件命名空间

满足条件

  • 事件是通过on来绑定的
  • 通过trigger触发事件

GIF 2020 6 17 13 13 34

$(function () {
    $(".son").on("click.zs", function () {
    	alert("click1")
    })
    $(".son").on("click.ls", function () {
    	alert("click2")
    })
    // $(".son").trigger("click.zs")
    $(".son").trigger("click.ls")
})
事件委托
什么是事件委托

请别人帮忙做事情, 然后将做完的结果反馈给我们

在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件

GIF 2020 6 17 13 16 16

$(function () {
    $(".son").on("click.zs", function () {
    	alert("click1")
    })
    $(".son").on("click.ls", function () {
    	alert("click2")
    })
    // $(".son").trigger("click.zs")
    $(".son").trigger("click.ls")
})

事件委托练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .mask{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            position: fixed;
            top: 0;
            left: 0;
        }
        .login{
            width: 521px;
            height: 292px;
            margin: 100px auto;
            position: relative;
        }
        .login>span{
            width: 50px;
            height: 50px;
            /*background: red;*/
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            $("a").click(function () {
                var $mask = $("<div class=\"mask\">\n" +
                    "    <div class=\"login\">\n" +
                    "        <img src=\"images/login.png\" alt=\"\">\n" +
                    "        <span></span>\n" +
                    "    </div>\n" +
                    "</div>")
                // 添加蒙版
                $("body").append($mask);
                $("body").delegate(".login>span", "click", function () {
                    // 移除蒙版
                    $mask.remove()
                })
                return false
            })
        })
    </script>
</head>
<body>
    <!-- <div class="mask">
        <div class="login">
            <images src="images/login.png" alt="">
            <span></span>
        </div>
    </div> -->
    <a href="http://www.baidu.com">点击登录</a>
    <div><img src="images/06.gif" width="100%" height="100%"></div>
</body>
</html>
移入移出事件
  • mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件

GIF 2020 6 17 13 22 28

$(function () {
    $(".father").mouseover(function () {
    	console.log("father被移入了")
    })
    $(".father").mouseout(function () {
    	console.log("father被移出了")
    })
})
  • mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件(推荐)

GIF 2020 6 17 13 23 35

$(function () {
    $(".father").mouseenter(function () {
    	console.log("father被移入了")
    })
    $(".father").mouseleave(function () {
    	console.log("father被移出了")
    })
})
_筱龙
关注
JQuery核心函数是什么及使用方法介绍
10-22
JQuery核心函数除了用于元素选择和创建外，还有许多强大的方法可以链式调用。例如，size()函数用于获取jQuery对象集合中的元素个数，get(index)函数用于获取集合中指定位置的元素，val()函数则可以获取或设置表单...
jQuery 核心函数以及jQuery对象
10-29
本文将探讨jQuery的几个核心函数及其工作方式，以及由这些核心函数返回的jQuery对象的性质和用法。 首先，jQuery的核心函数主要包含以下几种： 1. jQuery(elements) 这个函数将DOM元素转化为jQuery对象。通过传入...
技术论文（超详系列）：javascript表格处理案例研究
特殊程序
01-28 1047
javascript表格处理案例研究 摘 要：随着网页开发的流行，一些基础的开发过程变得越来越频繁，如数据的显示功能，在数据的显示过程中，往往采用表格来批量显示数据，如学生信息表、学生成绩表、订单状态表、物流跟踪表等都采用表格来显示数据。本文试图发表关于javascript处理表格的一个案例，用javaScript语言封装表格的数据处理功能。提供源码、详细设计、编程实践。 文 章 分 类：javascript编程实践;javascript基础; 标签：javascript基础;组件化 关 键 字：表
for循环/btns/adiv
qq_41880978的博客
09-15 1076
当在一个for循环中，给每个btns加事件，在事件中，当前选中的btns会改变样式，其他不变，同时对应序号的div也会改变宽度（或高幅度其他样式）。 实现过程中，因为是给btns加事件，所以只要使用this.className就可以改变，但是对应序号的div无法选中。 ①做出几下几种改变： for(var i =0 ; i ...
$(‘#first-step .next-btn‘).off().on(‘click‘, function (){})) 的详解
qq_41353397的博客
07-15 382
html代码 <div class="content-wrapper" id="first-step"> <div class="div-content-div-btn"> <div class="next-btn">下一步</div> </div> </div> JS代码 //$('#first-step .next-btn' 先获取到id为first-step的div，在获取到class为next-btn
jquery给某个标签如<button>等，添加点击事件，$("#XX").click(function(){ });
Ideality_hunter的专栏
06-08 5304
jquery给某个标签如等，添加点击事件，$("#XX").click(function(){  });
浅谈Jquery核心函数
10-24
总结以上内容，我们了解到jQuery核心函数的多种重载形式为开发者提供了灵活的操作DOM元素的能力，并且能够方便地将普通的DOM对象转换为功能强大的jQuery对象。同时，通过jQuery的选择器和各种方法，开发者能够高效地...
jQuery 常见操作实现方式和常用函数方法总结
12-08
jQuery 是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本篇文章将深入探讨jQuery中的常见操作...这些基本操作和方法构成了jQuery的核心，让JavaScript编程变得更加简洁和优雅。
jQuery ajax提交
lxlpokie的博客
06-07 228
&lt;script&gt;            $(function(){                $("#submit").on('click',function(){                    $.ajax({                        type: 'POST',                        url: "{:url('admin/up...
jQuery()函数的使用方法
愤怒的菜鸟
10-08 668
jQuery()函数的4种调用方法 $(“CSS选择器”,context) $(Element or Document or Window);//将对象封装为jQuery()对象 $(HTML字符串,{css:{},click:Function ,src:url})； $(Function); &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
关于js中的onclick事件和JQuery中的click方法以及on方法事件的详解以及区别
热门推荐
王金龙
07-03 4万+
jquey事件处理
html iframe 导航,html 后台导航 iframe 点击换url
weixin_34406844的博客
06-08 320
写了个小项目，上网随便找了个后台模板 ，又不想重复加载head，footer......javascript想到了用iframe .... 哈哈哈哈 随便写写.... 随意挑错 .... 欢迎你们指教javaid=“nav_menu” 加在了二级菜单的 ul 上........ide//导航$('#nav_menu a').click(function(){//选中样式$(".am-fr").r...
jquery实现导航栏点击样式改变问题
u010027670的博客
03-26 2901
$("ul.menus-list&gt;li.menus-item&gt;a").click(function () { $(this).addClass('active');    // 设置被点击元素为红色         $(this).siblings('ul.menus-list&gt;li.menus-item&gt;a').removeClass('active'); // 去除所有...
$().click()和$().on('click','要选择的元素'，function(){})的区别
demiling的博客
10-24 8253
$(选择器).click(function(){})：选择器已经在页面中已经存在的。 $(选择器).on(‘click’,‘要选择的元素’,function(){})：动态创建的元素也能触发事件， 且这里的选择器是页面已经存在，而不是动态添加的。 on方法包含很多事件，点击，双击等等事件。 ...
Submit disabled Dropdown
mybwu_com的专栏
09-09 150
需求：完成一个不可以改的dropdown，（符合一定logic）在js中设value，并且提交表单时把值提交到server1.尝试readonly&lt;script src="jquery-1.11.1.min.js"&gt;&lt;/script&gt; &lt;form name="frm" method="post"&gt; &lt;select id="sel&qu
jQuery事件以及动态效果
m0_67768699的博客
03-12 1033
一、事件 加载Dom两种方式 window.onload方式 执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行 编写个数：1个 jQuery方式 执行时间：网页结构绘制完成后，执行 编写个数：多个 两个都有的情况下执行顺序【面试题】 jQuery3.0：window.onload比jQuery先执行 ...
两种表单提交验证方法
weixin_38047955的博客
08-14 463
1.直接绑定id进行判断 Appid： AppSecret： pid： js：$('#submitform').on('click',function(){ var appid=$('input[name="Appid"]').val(); var AppSecret=$('input[name="AppSecret"]').val
jQuery核心函数与对象操作方法整理
资源摘要信息:"jquery详细整理"是一份针对jQuery框架在实际开发中使用经验的系统性总结文档，内容涵盖了jQuery的核心函数、对象访问方法、数据缓存机制以及插件扩展机制等多个关键知识点。该文档由开发者在实际项目...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值