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="width: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