关闭

jQuery选择器和事件

标签: javascriptprototypejquery对象
216人阅读 评论(0) 收藏 举报
分类:

选择器:

根据元素类型选择

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <p class="pclass"<span style="font-family: Arial, Helvetica, sans-serif;">>p1</p></span>
    <p id="pid">p2</p>
    <button>click me</button>
</body>
</html>

$(document).ready(function(){
    $("button").click(function(){
        $("p").text("p元素被修改了");
    });
});

执行结果 两个p元素都变了

根据元素id选择器:

$(document).ready(function(){
    $("button").click(function(){
        $("#pid").text("p元素被修改了");
    });
});

根据元素class选择:

$(document).ready(function(){
    $("button").click(function(){
        $(".pclass").text("p元素被修改了");
    });
});

事件:

单击、双击、移动消失:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <button>click me</button>
</body>
</html>
$(document).ready(function(){
   $("button").click(function(){
        $(this).hide();
   }) ;
    $("button").dblclick(function(){
        $(this).hide();
    }) ;
    /*$("button").mouseenter(function(){
        $(this).hide();
    });*/
    $("button").mouseleave(function(){
        $(this).hide();
    });
});

事件绑定、解除绑定:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <button id="click">click me</button>
</body>
</html>

$(document).ready(function(){
    $("#click").bind("click",clickHandler1);
    $("#click").bind("click",clickHandler2);
    $("#click").unbind("click");//所有的都解除绑定
    $("#click").unbind("click",clickHandler2);//只解除绑定2
});
function clickHandler1(e){
    console.log("clickhandler1");
}
function clickHandler2(e){
    console.log("clickhandler2");
}

由于bind unbind实际上是调用了底层的on off所以代码还可以这么写:
$(document).ready(function(){
    $("#click").on("click",clickHandler1);
    $("#click").on("click",clickHandler2);
   // $("#click").off("click");//所有的都解除绑定
    $("#click").off("click",clickHandler2);//只解除绑定2
});
function clickHandler1(e){
    console.log("clickhandler1");
}
function clickHandler2(e){
    console.log("clickhandler2");
}$(document).ready(function(){
    $("#click").on("click",clickHandler1);
    $("#click").on("click",clickHandler2);
   // $("#click").off("click");//所有的都解除绑定
    $("#click").off("click",clickHandler2);//只解除绑定2
});
function clickHandler1(e){
    console.log("clickhandler1");
}
function clickHandler2(e){
    console.log("clickhandler2");
}

事件之事件目标与冒泡

目标:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <div style="width:300px;height:300px;background-color: chartreuse">
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
        </ul>
    </div>
</body>
</html>
$(document).ready(function(){
    $("body").bind("click",bodyHander);
    $("div").bind("click",divHander);
});
function bodyHander(event){
    console.log(event);
}
function divHander(event){
    console.log(event);
}
效果:


事件冒泡:
阻止事件冒泡:

event.stopImmediatePropagation()阻止所有事件冒泡

Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

event.stopPropagation()阻止父级事件冒泡

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$(document).ready(function(){
    $("body").bind("click",bodyHander);
    $("div").bind("click",divHander1);
    $("div").bind("click",divHander2);
});
function bodyHander(event){
    conlog(event);
}
function divHander1(event){
    conlog(event);
  //  event.stopPropagation();
    event.stopImmediatePropagation();
}
function divHander2(event){
    conlog(event);
}
function conlog(event){
    console.log(event);
}//防止console编译出错

事件之自定义事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <button id="Click">click me</button>
</body>
</html>
$(document).ready(function(){
    $("#Click").click(function(){
        var e=jQuery.Event("myEvent");
        $("#Click").trigger(e);
    });
    $("#Click").bind("myEvent",function(event){
        console.log(event);
    });
});

可以精简为:
var ClickMeBtn;
$(document).ready(function(){
    ClickMeBtn=$("#Click");
    ClickMeBtn.click(function(){
        var e=jQuery.Event("myEvent");
        $("#Click").trigger(e);
    });
    ClickMeBtn.bind("myEvent",function(event){
        console.log(event);
    });
});

也说明了var是多么的强大==










0
0
查看评论

jQuery 之 选择器与事件类型(二)

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。 jQuery 中所有选...
  • u013630349
  • u013630349
  • 2016-07-08 17:48
  • 328

jQuery各种选择器、节点、事件,删除、复制、插入元素的使用方法总结

《jQuery全面提速》笔记(2015年12月19日)  (1)表单域选择器     :input选择器,  用于选择所有input、textarea、select和button元素, $(":input").each(function()...
  • u012767607
  • u012767607
  • 2017-03-13 21:00
  • 618

jquery keyup事件与on事件

今天在写一个注册网页时,用到jquery中的keyup事件来验证邮箱格式、密码长度等等是正确,但发现当第一个事件触发时,后面的inpu绑定的事件没有触发,然后我就试了下on事件,发现也不行,最后我返回原先的keyup事件,结果问题来了,第一个事件都不触发了,不知道为什么? 希望有大侠指点 附代码...
  • momode27
  • momode27
  • 2015-12-31 15:22
  • 228

[jQuery] 选择器和事件

jQuery选择器 类选择器 属性选择器 id选择器 jQuery事件
  • bless2015
  • bless2015
  • 2015-06-05 11:29
  • 675

zepto和jquery的区别,zepto的不同使用8条小结

1. Zepto 对象 不能自定义事件   例如执行: $({}).bind('cust', function(){});  结果:  TypeError: Object has no method 'addEventListener' ...
  • kongjiea
  • kongjiea
  • 2015-01-08 11:54
  • 83723

jquery 联合选择器,相对选择和层级选择器__多类交集选择器,多属性选择器

1、多条件选择器 用途:使用多个条件同时选择多个标签 用法:$(“条件1,条件2,条件3,……,条件n “); 特征:多个条件在“”内用逗号隔开; 用例:$(“div#id,span.tip,p”); //同时选择id为“id”的div标签,class为“tip”的span标签和p标签; ...
  • h330531987
  • h330531987
  • 2017-10-26 10:26
  • 187

jQuery与CSS3的选择器

jQuery与CSS在选择器方面,有很多的相似之处,本文稍加总结。 注:本文以jQuery1.9.1版本和CSS3为例进行说明,CSS在选择器方面存在兼容问题,请自行分辨。1 jQuery的版本 jQuery 分 3 个系列版本 1.x 、 2.x与3.x,主要的区别: a、2...
  • aiolos1111
  • aiolos1111
  • 2016-08-02 16:52
  • 1904

jQuery: 在this的环境中使用选择器

jQuery: 在this的环境中使用选择器   $(XXX,this) $(XXX,this) 第一个参数是查询字符串或dom元素 第二个参数是查询的上下文 等价于$(this).find(xxx); 意思就是在第二个参数所代表的节点下寻找符合...
  • lululove19870526
  • lululove19870526
  • 2015-03-03 17:25
  • 1260

jQuery选择器和事件

1)选择器    $(".className")——类选择器;    $("#IDName")——ID选择器;    $("ElementTagName")——元素名选择器; &#...
  • bboyjoe
  • bboyjoe
  • 2015-07-31 16:00
  • 458

JQuery 选择器和事件

PS、//不是所有浏览器都支持 console.log 解决办法定义一个输出函数 调用即可 若出错则注释掉function conlog(event){ console.log(event); }1、事件常用方法2、事件之绑定3、事件目标和冒泡 关注两个点:currenttarg...
  • summergreenhtml
  • summergreenhtml
  • 2015-08-19 23:22
  • 297
    碎碎念
    周小姐,你还想毕业找不到工作吗????
    个人资料
    • 访问:280743次
    • 积分:8817
    • 等级:
    • 排名:第2600名
    • 原创:608篇
    • 转载:25篇
    • 译文:0篇
    • 评论:38条
    友情链接