- 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
