jQuery选择器和事件
选择器：
根据元素类型选择
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.min.js"></script>
<script src="app.js"></script>
<!--上下不能写反 依赖关系-->
</head>
<body>
<p class="pclass"<span style="font-family: Arial, Helvetica, sans-serif;">>p1</p></span>
<p id="pid">p2</p>
<button>click me</button>
</body>
</html>
$(document).ready(function(){
$("button").click(function(){
$("p").text("p元素被修改了");
});
});
执行结果 两个p元素都变了
根据元素id选择器：$(document).ready(function(){
$("button").click(function(){
$("#pid").text("p元素被修改了");
});
});
根据元素class选择：
$(document).ready(function(){
$("button").click(function(){
$(".pclass").text("p元素被修改了");
});
});
事件：
单击、双击、移动消失：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.min.js"></script>
<script src="app.js"></script>
<!--上下不能写反 依赖关系-->
</head>
<body>
<button>click me</button>
</body>
</html>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
}) ;
$("button").dblclick(function(){
$(this).hide();
}) ;
/*$("button").mouseenter(function(){
$(this).hide();
});*/
$("button").mouseleave(function(){
$(this).hide();
});
});
事件绑定、解除绑定：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.min.js"></script>
<script src="app.js"></script>
<!--上下不能写反 依赖关系-->
</head>
<body>
<button id="click">click me</button>
</body>
</html>
$(document).ready(function(){
$("#click").bind("click",clickHandler1);
$("#click").bind("click",clickHandler2);
$("#click").unbind("click");//所有的都解除绑定
$("#click").unbind("click",clickHandler2);//只解除绑定2
});
function clickHandler1(e){
console.log("clickhandler1");
}
function clickHandler2(e){
console.log("clickhandler2");
}
由于bind unbind实际上是调用了底层的on off所以代码还可以这么写：
$(document).ready(function(){
$("#click").on("click",clickHandler1);
$("#click").on("click",clickHandler2);
// $("#click").off("click");//所有的都解除绑定
$("#click").off("click",clickHandler2);//只解除绑定2
});
function clickHandler1(e){
console.log("clickhandler1");
}
function clickHandler2(e){
console.log("clickhandler2");
}$(document).ready(function(){
$("#click").on("click",clickHandler1);
$("#click").on("click",clickHandler2);
// $("#click").off("click");//所有的都解除绑定
$("#click").off("click",clickHandler2);//只解除绑定2
});
function clickHandler1(e){
console.log("clickhandler1");
}
function clickHandler2(e){
console.log("clickhandler2");
}
事件之事件目标与冒泡
目标：<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.min.js"></script>
<script src="app.js"></script>
<!--上下不能写反 依赖关系-->
</head>
<body>
<div style="width:300px;height:300px;background-color: chartreuse">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</div>
</body>
</html>
$(document).ready(function(){
$("body").bind("click",bodyHander);
$("div").bind("click",divHander);
});
function bodyHander(event){
console.log(event);
}
function divHander(event){
console.log(event);
}效果：
事件冒泡：
阻止事件冒泡：
event.stopImmediatePropagation()阻止所有事件冒泡
Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.
event.stopPropagation()阻止父级事件冒泡
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
$(document).ready(function(){
$("body").bind("click",bodyHander);
$("div").bind("click",divHander1);
$("div").bind("click",divHander2);
});
function bodyHander(event){
conlog(event);
}
function divHander1(event){
conlog(event);
// event.stopPropagation();
event.stopImmediatePropagation();
}
function divHander2(event){
conlog(event);
}
function conlog(event){
console.log(event);
}//防止console编译出错
事件之自定义事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.min.js"></script>
<script src="app.js"></script>
<!--上下不能写反 依赖关系-->
</head>
<body>
<button id="Click">click me</button>
</body>
</html>
$(document).ready(function(){
$("#Click").click(function(){
var e=jQuery.Event("myEvent");
$("#Click").trigger(e);
});
$("#Click").bind("myEvent",function(event){
console.log(event);
});
});
可以精简为：
var ClickMeBtn;
$(document).ready(function(){
ClickMeBtn=$("#Click");
ClickMeBtn.click(function(){
var e=jQuery.Event("myEvent");
$("#Click").trigger(e);
});
ClickMeBtn.bind("myEvent",function(event){
console.log(event);
});
});
也说明了var是多么的强大==