分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

jQuery选择器和事件

发布时间:2023-09-06 02:16责任编辑:赖小花关键词:jQuery选择器

jQuery选择器

其实官网中已经有很完全和很好的解释了--jQuery选择器
以下是一些常用选择器总结

 1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title></title>
6    <!--引入jQuery-->
7    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
8</head>
9<body>
10    <p id="pId">one</p>
11    <p class="pClass">two</p>
12    <button>click me</button>
13</body>
14    <script>
15        // 确定文档加载完全
16        $("document").ready(function () {
17            $("button").click(function () {
18                // 元素选择器
19                $("p").text("p元素被修改");
20                // id选择器
21                $("#pId").text("id=pId的元素被修改")
22                // 类选择器
23                $(".pClass").text("class=pClass的元素被修改")
24            })
25        })
26    </script>
27</html>

jQuery事件

  • 常用事件方法:参考--jQuery事件
    例如:
    1$("button").click(function (){});   // 单击事件
    2$("button").dblclick(function (){});  // 双击事件
  • 绑定事件和解绑事件

    传统使用:

    1  $("document").ready(function () {
    2            $("button").click(function (){
    3                alert("clicked me")
    4            }); // 当事件非常多、文档很大、要书写的代码过于庞大时,这种方式非常消耗内存。所以选用jQuery提供的绑定和解除绑定的方式来做监听事件
    5        });

    使用绑定和解除绑定的方式来做监听事件

    1$("document").ready(function () {    
    2     $("button").bind("click", clickHandel); // 添加绑定,解除绑定就是unbind。
    3  });        
    4  function clickHandel(e) {
    5     alert("bind")
    6  }

    在jQuery 1.7之后,可以用on/off代替bind/unbind

  • 事件的目标和事件的冒泡

    DOM事件三个阶段
    当一个DOM事件被触发时,它不仅仅只是单纯地在本身对象上触发一次,而是会经历三个不同的阶段:

    1. 捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象;
    2. 目标阶段:到达目标事件位置(事发地),触发事件;
    3. 冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。
    4. ?

    产生现象
    多个元素相应一个事件.例如网页上有两个元素,其中一个元素嵌套在另一个元素中,并且2着都绑定了click事件,同时body也绑定了click事件,当点击里层元素,也会触发外层元素的点击事件
    阻止事件冒泡
    ?????????(1). 事件对象:为函数添加一个参数,这个事件的独有事件对象就创建了,当事件处理函数执行完毕,事件对象就被销毁
    ?????????(2). 停止事件冒泡:使用事件对象调用stopPropagation()函数
    ?????????(3). 博文参考--jQuery事件---阻止冒泡和默认行为

  • 自定义事件
    参考博文--JQuery 自定义事件

jQuery选择器和事件

原文地址:https://www.cnblogs.com/nnnlillian/p/9725188.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved