jQuery选择器
属性选择器
<p>p1</p>
<span style="font-size:24px;"></span><pre name="code" class="html" style="font-size: 24px;">$(document).ready(function(){
$("button").click(function(){
$("p").text("你好aaaa123");
});
});
类选择器
<p class="pclass">p1</p>
$(document).ready(function(){
$("button").click(function(){
$(".pclass").text("你好aaaa123");
});
});
id选择器
<p id="pid">p1</p>
$(document).ready(function(){
$("button").click(function(){
$("#pclass").text("你好aaaa123");
});
});
jQuery事件
经常使用事件方法
$(document).ready(function(){
//$("button").click(function(){ <span style="white-space:pre"> </span>点击隐藏
//$("button").dblclick(function(){<span style="white-space:pre"> </span>双击隐藏
//$("button").mouseenter(function(){<span style="white-space:pre"> </span>鼠标进入隐藏
$("button").mouseleave(function(){<span style="white-space:pre"> </span>鼠标移开隐藏
$(this).hide();
});
});绑定事件
<span style="font-size:24px;">$(document).ready(function(){
$("#clickMeBtn").bind("click",clickHandler1);
$("#clickMeBtn").bind("click",clickHandler2);
});
function clickHandler1(e){
console.log("clickHandler1");
}
function clickHandler2(e){
console.log("clickHandler2");
}</span>运行打印两行。没有问题。
解除绑定事件
(官方推荐使用on和offkeyword。事实上bind和unbind底层也是调用的on和off方法。一样，可是on和offkeyword在1.7版本号之后才有)
$(document).ready(function(){
$("#clickMeBtn").on("click",clickHandler1);
$("#clickMeBtn").on("click",clickHandler2);
$("#clickMeBtn").off("click",clickHandler2);
});
function clickHandler1(e){
console.log("clickHandler1");
}
function clickHandler2(e){
console.log("clickHandler2");
}仅仅打印出来事件1了。
事件的目标
js代码
$(document).ready(function(){
$("body").bind("click",bodyHandler);
$("div").bind("click",divHandler);
});
function bodyHandler(event){
console.log(event);
}
function divHandler(event){
console.log(event);
}HTML代码
<body> <div style="300px;height:300px;background-color:aqua"> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> </body>
点击div后，div的事件是
同一时候该事件也触发了body的点击
并且点击一次出来两个点击事件：
发生了事件冒泡。
事件的目标并不同。currentTarget指向body是由于给body设置的监听事件。而target是div是由于，是div触发的点击事件。这是事件冒泡。
对于当前div和父级body。假设仅仅想让div响应点击事件，能够阻止事件冒泡
事件的冒泡
在网上找到一段解释时间冒泡的：
在一个对象上触发某类事件（比方单击onclick事件），假设此对象定义了此事件的处理程序。那么此事件就会调用这个处理程序，假设未定义此事件处理程序或者事件返回true。那么这个事件会向这个对象的父级对象传播。从里到外，直至它被处理（父级对象全部同类事件都将被激活），或者它到达了对象层次的最顶层。即document对象（有些浏览器是window）。
打个比方说：你在地方法院要上诉一件案子，假设地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉。比方从市级到省级，直至到中央法院。终于使你的案件得以处理。
打个比方说：你在地方法院要上诉一件案子，假设地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉。比方从市级到省级，直至到中央法院。终于使你的案件得以处理。
jQuery防止事件冒泡的方法：
1、event.stopPropagation();阻止父级的冒泡事假
2、event.stopImmediatePropagation();阻止全部冒泡事件
<span style="font-size:24px;">function divHandler(event){
console.log(event);
event.stopPropagation();
}</span>这样。控制台仅仅打印了div的响应事件，没有body的。
event.stopImmediatePropagation()也非常好理解。阻止全部的事件冒泡。
自己定义事件
HTML文件
<head> <meta charset="UTF-8"> <script src = "jquery-2.1.4.min.js"></script> <script src = "CustomEvent.js"></script> <title>Document</title> </head> <body> <button id="ClickMeBtn">ClickMe</button> </body>
JS文件
<span style="font-size:24px;">var ClickMeBtn;
$(document).ready(function(){
ClickMeBtn = $("#ClickMeBtn");
ClickMeBtn.click(function(){
var e = jQuery.Event("MyEvent");
ClickMeBtn.trigger(e);
});
$(ClickMeBtn).bind("MyEvent",function(event){
console.log(event);
})
});</span>控制台：新类型的事件MyEvent
