码迷,mamicode.com
首页 > Web开发 > 详细

jQuery选择器和事件

时间:2018-09-29 19:23:34      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:分享   put   文档加载   detail   doc   .text   art   就是   点击事件   

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. 冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。

      技术分享图片

       

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

jQuery选择器和事件

标签:分享   put   文档加载   detail   doc   .text   art   就是   点击事件   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!