jQuery选择器和事件

来源：互联网发布：广州淘宝家具拍摄编辑：程序博客网时间：2024/05/24 01:45

1）选择器

$(".className")——类选择器；

$("#IDName")——ID选择器；

$("ElementTagName")——元素名选择器；

更多选择器点击打开链接

2）事件

click()——点击事件；

dblclick()——双击事件；

mouseenter()——鼠标进入事件；

mouseleave()——鼠标离开事件；

更多事件点击打开链接

3）事件的绑定和解绑

bind()、on()——事件绑定;

unbind()、off()——事件解绑；

注意on()、off()需要在jQuery1.7版本以上；

<button id="btn1">事件绑定</button>

<pre name="code" class="javascript">$(document).ready(function(){    $("#btn1").bind("click",clickHandler);    $("#btn1").bind("click",clickHandler2);    $("#btn1").unbind("click",clickHandler2);});function clickHandler(e){    console.log(e.target.innerHTML);}function clickHandler2(e){    console.log(e.target.id);}

4)事件的目标

currentTarget与target的区别:

1、target发生在事件流的目标阶段，而currentTarget发生在事件流的整个阶段（捕获、目标和冒泡阶段）;
2、只有当目标流处于目标阶段的时候才相同;
3、而当事件流处于捕获和冒泡阶段时，target指向被点击的对象，而currentTarget指向当前事件活动的对象，通常是事件的祖元素。

5）事件的冒泡

event.stopImmediatePropagation()——阻止所有元素的事件冒泡；

event.stopPropagation()——阻止父级元素的事件冒泡；

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>Dom元素的设置</title>    <script src="jquery-1.11.2.min.js"></script>    <script src="eventTarget.js"></script>    <style type="text/css">        #div1{            width:200px;            height: 200px;            background-color: #0088bb;        }        #div1 ul{            list-style-type: none;        }    </style></head><body><div id="div1">    <ul>        <li>广州恒大</li>        <li>山东鲁能</li>        <li>上海上港</li>        <li>北京国安</li>        <li>上海申花</li>    </ul></div></body></html>

eventTarget.js的代码：

$(document).ready(function(){    $("body").bind("click",bodyHandler);    $("div").bind("click",divHandler);    $("div").bind("click",divHandler2);});function bodyHandler(e){    //currentTarget:body; target:div    console.log(e);}function divHandler(e){    //currentTarget:div; target:div    console.log(e);    //阻止父级元素的冒泡    //e.stopPropagation();    //阻止所有元素的冒泡    e.stopImmediatePropagation();}function divHandler2(e){    console.log(e);}

6）自定义事件：

jQuery.Event("myEvent")——指定自定义事件的类型为myEvent;

$(selector).trigger(event,[param1,param2])——规定被选元素触发的事件；

第一种书写方式：

//给element绑定hello事件element.bind("hello",function(){    alert("hello world!");});       //触发hello事件element.trigger("hello");

第二种书写方式：

<!DOCTYPE html><html><head lang="zh-CN">    <meta charset="UTF-8">    <title>trigger demo</title>    <script src="jquery-1.11.2.min.js"></script>    <script src="myEvent.js"></script></head><body><button id="btn">click me</button></body></html>

myEvent.js代码：

    //自定义事件var btn;$(document).ready(function(){    btn=$("#btn");    btn.click(function(){        //自定义事件类型        var e=jQuery.Event("myEvent");        //触发自定义事件        btn.trigger(e);    });    //绑定自定义事件    btn.on("myEvent",function(e){        console.log(e);    });});

0 0