JQuery的常用选择器和常用事件绑定

最新推荐文章于 2022-11-16 21:35:54 发布

小龙爷ღ

最新推荐文章于 2022-11-16 21:35:54 发布

阅读量619

点赞数

分类专栏： JQuery 文章标签： JQuery JQuery选择器 JQuery事件绑定

本文链接：https://blog.csdn.net/qq_45086879/article/details/100041774

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一.常用的选择器

1.基本选择器

全局选择器：	$（"*"）
标签选择器：	$（"HTML标签名"）
类选择器：	$（".class类名"）
id选择器：	$（"#id值"）
交集选择器：	$（"选择器1 选择器2"）
并集选择器：	$（"选择器1，选择器2"）

2.层次选择器

后代选择器：	$（"选择器1 选择器2"）
子选择器：	$（"选择器1>选择器2"）
相邻元素选择器:	$（"选择器1+选择器2"）可用next()代替
同辈元素选择器:	$（"选择器1~选择器2"）可用 nextAll()代替

3.基本过滤选择器

：first	选取第一个元素
：last	选取最后一个元素
：even	选取索引是偶数的所有元素
：odd	选取索引是奇数的所有元素
：eq（index）	选取索引等于index的元素
：gt（index）	选取索引大于index的元素
：lt（index）	选取索引小于index的元素
：not(选择器)	去除所有与给定选择器匹配的元素
：hidden	选取所有不可见的元素
：visible	选取所有可见的元素

4.表单选择器

$("input[name='one']")	选择name值为‘one’的表单元素
：input	选择input、textarea、select和button元素
：text	选择所有的单行文本框
：checkbox	选择所有的多选框
：radio	选择所有的单选框
：checked	选取所有选中的元素（单选框复选框）

二.常见的事件与绑定

1.鼠标单击click()事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
   <p id="demo" style="display: none">这是一段测试文字</p>
   <input type="button" value="点我上面出现文字">
   <script>
       $("input[value='点我上面出现文字']").click(function () {
           $(this).prev().show();
       })
   </script>
</body>
</html>

2.mouseover(鼠标移到某元素上)与mouseout(鼠标移开)事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mouse事件绑定</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<span>show</span>
<p style="display: none">这是一段测试文字</p>
<script>
    $(function () {
        $("span").bind("mouseover",function () {
            $(this).next().show();
        }).bind("mouseout",function () {
            $(this).next().hide();
        })
    })
</script>
</body>
</html>

3.hover(enter，leave)复合事件：模拟光标悬停事件，当光标移到到元素上时，会触发指定的第一个函数（enter），当光标移出这个元素时，会触发指定的第二个函数（leave）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<span>show</span>
<p style="display: none">这是一段测试文字</p>
<script>
    $(function () {
        $("span").hover(function () {
            $(this).next().show();
        },function(){
            $(this).next().hide();
        })
    });
</script>
</body>
</html>

4.连续单击事件：toggle好像失效了，我们用条件判断来模拟连续单击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>连续单击事件绑定</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <span>show</span>
    <p>这是一段测试文字</p>
<script>
    $(function () {
        $("span").bind("click",function () {
            var $content = $(this).next();
            if ($content.is(":visible")){
                $content.hide();
            }else {
                $content.show();
            }
        })
    });
</script>
</body>
</html>

5.阻止默认行为：下例为阻止文本框为空时提交，需要提交一个参数event，event.preventDefault（）可简化为return false；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认行为</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<form action="">
    用户名：<input type="text" id="username">
    <input type="submit" value="提交" id="sub">
    <span></span>
</form>
<script>
    $(function () {
        $("#sub").bind("click",function (event) {
            var username = $("#username").val();
            if (username == ""){
             $(this).next().html("用户名不能为空");
             event.preventDefault();
            }
        })
    });
</script>
</body>
</html>

6.模拟操作触发自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟操作自动触发事件</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
  <h>点击显示下面的文字</h>
  <p style="display: none">这是隐藏的文字哦</p>
<script>
    $(function () {
        $("h").bind("click",function () {
           $(this).next().show();
        })
        //下面这句页面刷新后自动显示隐藏的文字，不需要点击h标签
        $("h").trigger("click");
    });
</script>
</body>
</html>

小龙爷ღ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery的常用选择器和常用事件绑定

一.常用的选择器1.基本选择器全局选择器： $（"*"）标签选择器： $（"HTML标签名"）类选择器： $（".class类名"） id选择器： $（"#id值"）交集选择器： $（"选择器1 选择器2"）并集选择器： $（"选择器1，选择器2"） 2.层次选择器后代选择器： $（"选择器1 选择器2"）...
复制链接

扫一扫