JQuery选择器和事件

• JQuery选择器
• JQuery事件

JQuery选择器

可以通过官网查看Selector的API；
初步介绍元素选择器、id选择器、类选择器
在点击button 的时候更改三个不同标签的内容，可以看到比JavaScript更简单

<p>p1</p>
    <p id="pid">p2</p>
    <p class="pclass">p2</p>

    <button>click me</button>

document.ready 文档加载完成必须写，所有的方法必须执行在文档加载完成之后。三种选择器的语法和JavaScript的语法是一样的。

$(document).ready(function () {
     $("button").click (function () {
     $("p").text("p元素被修改了-元素选择器"); //元素选择器
         $("#pid").text("p元素被修改了- id选择器修改");//id 选择器
         $(".pclass").text("p元素被修改了- 类选择器");//类选择器
     });
});

jQuery事件

1、jquery 事件：
 常用事件方法
 绑定事件
 解除绑定事件
 事件的目标
 事件的冒泡
 自定义事件

(1)常用事件方法:

<button>click me </button>

$(document).ready(function () {
   // $("button").click (function () { //单击隐藏
   // $("button").dblclick (function () { //双击隐藏
   // $("button").mouseenter (function () { //鼠标移动到上面隐藏
   $("button").mouseleave (function () { //鼠标移开隐藏
      $(this).hide();
   });
});

(2)事件之绑定、解除绑定事件:
如果button 点击事件要绑定下面的事件,可以一次绑定多个事件，也可以指定绑定哪个事件

function clickHandle1(e) {
   console.log("clickHandle1")
}
function clickHandle2(e) {
   console.log("clickHandle2")
}

可以这样写，使用bind 绑定事件，unbind 进行解绑：

 $("#clickMeBtn").bind("click",clickHandle1);
    $("#clickMeBtn").bind("click",clickHandle1,clickHandle2);
//接触绑定
$("#clickMeBtn").unbind("click");

在jQuery 1.7之后，官方建议使用on 代替，on 方法是较底层的方法，off 用来接触绑定。

    $("#clickMeBtn").on("click",clickHandle1);
    $("#clickMeBtn").on("click",clickHandle2);
    $("#clickMeBtn").off("click");

(3)事件目标与冒泡:

body 里面添加一个div，给body 和div 都绑定事件，使用.stopPropagation()可以阻止父标签绑定的事件，使用.stopImmediatePropagation()可以阻止之后绑定的时间

/**
 * Created by chuanglong02 on 17/1/24.
 */
$(document).ready(function () {
   $("body").bind("click",bodyHandler);
   $("div").bind("click",divHandler);
});
function  bodyHandler(event) {
    console.log(event);
}
function divHandler(event) {
    console.log(event);
    event.stopPropagation();
    // event.stopImmediatePropagation();
}

(4)自定义事件:

$(document).ready(function () {


    $("#ClickMeBtn").click(function () {
      var e = jQuery.Event("MyEvent");
      $("#ClickMeBtn").trigger(e);
    });
    $("#ClickMeBtn").bind("MyEvent",function(event) {
        console.log(event);
       
    });
});

自定义事件.png