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>
- $(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>
- //自定义事件
- 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);
- });