1、处理在容器中指定元素事件是否冒泡
冒泡事件，在本例中，祖父孙节点都有单击事件，所谓冒泡，在本例中指单击子节点，会向上触发父节点、祖先节点的单击事件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>处理在容器中指定元素事件是否冒泡</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("#content").on("click",function(){
var txt=$("#msg").html()+"<p>外层div元素被单击</p>";
$("#msg").html(txt);
});
$("body").on("click",function(){
var txt=$("#msg").html()+"<p>body元素被单击</p>";
$("#msg").html(txt);
});
});
$(document).ready(function(){
//允许冒泡
$("#myBtnEnable").click(function(){
$("span").on('click',function(){
var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
$("#msg").html(txt);
});
});
//禁止冒泡
$("#myBtnDisable").click(function(){
$("span").on({
"mouseover":function(event){
var txt=$("#msg").html()+"<p>内层span元素被单击1</p>";
$("#msg").html(txt);
event.stopPropagation();//停止事件冒泡
},
"mousemove":function(event){
var txt=$("#msg").html()+"<p>内层span元素被单击2</p>";
$("#msg").html(txt);
event.stopImmediatePropagation();//停止事件冒泡并阻止该元素其他事件方法的运行
}
});
});
});
</script>
</head>
<body style="background: #ffd800;">
<!--
使用方法:event.stopPropagation()
该方法只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理方法的函数
使用方法:event.stopImmediatePropagation()
该方法不仅阻止事件向祖辈元素的传播，还会阻止该元素自身绑定的其他事件处理方法的函数
-->
<button id="myBtnEnable" style="width: 300px">允许span元素的事件冒泡</button><br/><br/>
<button id="myBtnDisable" style="width: 300px">禁止span元素的事件冒泡</button><br/><br/>
<div id="content" style="background: #00ffff;width: 300px;">
外层div元素
<span style="background: #00ff90;">内层span元素</span>
</div>
<div id="msg"></div>
</body>
</html>
默认下，点击span触发事件冒泡
点击禁止span元素的冒泡事件
2、清除元素的HTML标记同时保留元素内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>a清除元素的HTML标记同时保留元素内容</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.stripHtmlTag=function(){
var regexp=/<("[^"]*"|'[^']*'|[^'">])*>/gi;
$(this).each(function(){//根据正则表达式清除元素标记
$(this).html($(this).html().replace(regexp,''));
});
return $(this);
};
//单击事件
$("#myBtn").click(function(){
$("#div").stripHtmlTag();
});
});
</script>
</head>
<body>
<!--
使用方法：each()方法用于为每个匹配元素规定运行的函数，当使用each()方法遍历函数时，如果需要提前终止遍历操作
，可以通过放回false值终止。
replac()方法用于执行正则表达式的替换操作
-->
<div style="margin-bottom: 8px;margin-left: 400px;">
<button id="myBtn" style="width:400px">清空所有的表格线</button>
</div>
<div style="width:400px;margin-left: 400px;" id="div">
<table id="mytable" border="1" align="center" style="margin: 0 auto;width: 400px;border-collapse: collapse;text-align: center;font-size:small;">
<tr style="background-color: lightgray;font-size: medium;">
<td>葡萄酒名称</td>
<td>原产地</td>
<td>葡萄品种</td>
</tr>
<tr>
<td>罗博克葡萄酒</td>
<td>西班牙</td>
<td>歌海娜</td>
</tr>
<tr>
<td>克洛文红葡萄酒</td>
<td>法国</td>
<td>丹魄</td>
</tr>
<tr>
<td>马迪尔伯爵葡萄酒</td>
<td>意大利</td>
<td>朗布罗斯科</td>
</tr>
</table>
</div>
</body>
</html>
运行结果：
3、is()判断鼠标是否单击了无序列表ul的节点
//event.target返回哪个DOM触发了事件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>is()判断鼠标是否单击了无序列表ul的节点</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul").mousemove(function(event){
var targets=$(event.target);
if(targets.is("li")){
targets.css("background-color","lightgray");
}else{
targets.css("background-color","green");
}
});
$("ul li").mouseout(function(){
$(this).css("background-color","white");
});
});
</script>
</head>
<body>
<!--
使用方法:is(selector)用于根据选择器、元素或jQuery对象来检测匹配元素集合，如果这些元素中至少有一个
元素匹配给定的参数，则返回true。
is()方法不创建新的jQuery对象
event.target返回哪个DOM触发了事件
-->
<p style="text-align: center;margin-top:15px;">
<ul>
<li>js菜鸟教程</li>
<li>sql菜鸟教程</li>
<li>HTML菜鸟教程</li>
<li>Linux菜鸟教程</li>
<li>bootstrap教程</li>
</ul>
</p>
</body>
</html>
运行结果：
4、筛选无序列表指定的li元素N种方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筛选无序列表的N中方法</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#mybtn_filter_odd").click(function(){
$("li").filter(":odd").css("background-color","lightgray");
//$("li:odd").css("background-color","lightgray");
});
$("#mybtn_filter_even").click(function(){
$("li").filter(":even").css("background-color","lightgray");
//$("li:even").css("background-color",'lightgray');
});
$("#mybtn_gt").click(function(){
$("li:gt(2)").css("background-color","lightgray");
//$("li").filter(":gt(2)").css("background-color","lightgray");
});
$("#mybtn_lt").click(function(){
$("li:lt(2)").css("background-color","lightgray");
//$("li").filter(":lt(2)").css("background-color","lightgray");
});
$("#mybtn_contains").click(function(){
$("li:contains('东')").css("background-color",'lightgray');
//$("li").filter(":contains('东')").css("background-color","lightgray");
});
$("#mybtn_nth").click(function(){
$("li:nth-last-child(3)").css("background-color","lightgray");//倒数第三个li的颜色
});
$("#mybtn_prevAll").click(function(){
$("li").eq(2).prevAll().css("background-color","lightgray");
//$("li:eq(2)").prevAll().css("background-color","lightgray");
});
$("#mybtn_nextAll").click(function(){
$("li").eq(2).nextAll().css("background-color",'lightgray');
});
$("#mybtn_slice").click(function(){
$("li").slice(2,4).css("background-color","lightgray");//li第三、四行的颜色
$("li").slice(-2).css("background-color",'gray');//li最后两行的颜色
});
$("#mybtn_reset").click(function(){
$("li").css("background-color","white");
});
});
</script>
</head>
<body>
<ul>
<li>山东省</li>
<li>广东省</li>
<li>陕西省</li>
<li>山西省</li>
<li>云南省</li>
<li>辽宁省</li>
<li>四川省</li>
</ul>
<div>
<button id="mybtn_filter_odd" style="width:300px;">filter(":odd")奇数行改变背景</button><br/>
<button id="mybtn_filter_even" style="width:300px;">filter(":even")偶数行改变背景</button><br/>
<button id="mybtn_gt" style="width: 300px">$("li:gt(n)")某行前改变背景</button><br/>
<button id="mybtn_lt" style="width:300px">$("li:lt(n))某行之后改变背景</button><br/>
<button id="mybtn_contains" style="width:300px">$("li:contains(text)")根据内容筛选li</button><br>
<button id="mybtn_nth" style="width: 300px;">$("ul li:nth-last-child(n))父元素倒数第n个li</button><br/>
<button id="mybtn_prevAll" style="width:300px">prevAll()某个元素之前</button><br>
<button id="mybtn_nextAll" style="width: 300px">nextAll()某个元素之后</button><br>
<button id="mybtn_slice" style="width: 300px">slice(startIndex[,endIndex])指定范围</button><br/>
<button id="mybtn_reset" style="width:300px">重置背景颜色</button>
</div>
</body>
</html>
5、将多个事件和方法同时绑定到指定元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>将多个事件和方法同时绑定到指定元素</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//为图片绑定click、mouseover、mouseout三种事件
/*
$("#myImage").bind({click:function(){$("#myText").toggle();},
mouseover:function(){$("#myText").css("color",'red');},
mouseout:function(){$("#myText").css("color","black");}
});
*/
$("#myImage").bind({click:imgClick,mouseover:imgMouseover,mouseout:imgMouseout});
});
function imgClick(){
$("#myText").toggle();
}
function imgMouseover(){
$("#myText").css("color",'red');
}
function imgMouseout(){
$("#myText").css("color","black");
}
</script>
</head>
<body>
<!--
使用方法：$(selector).bind({event:function,event:function,...})
参数{event:function,event:function,...}规定事件映射，其中包含一个或多个添加到元素的事件以及事件发生时执行的函数
-->
<div style="text-align:center;">
<img src="../../../../百度背景皮肤/star_img/img1.jpg" id="myImage" height="400"/>
<p style="text-indent: 2em;" id="myText">Angelababy（杨颖），1989年2月28日出生于上海市，华语影视女演员、时尚模特。2003年，Angelababy以模特身份出道，此后，她因担任时尚模特而在香港崭露头角。2007年，她开始将工作重心转向大银幕。2011年，她在爱情片《夏日乐悠悠》中首次担任女主角。2012年，凭借言情片《第一次》获得第13届华语电影传媒大奖最受瞩目女演员奖。2013年，Angelababy与其她三位女艺人被《南都娱乐周刊》选为新“四小花旦”；同年，她还完成了个人的荧屏处女作《大汉情缘之云中歌》....</p>
</div>
</body>
</html>
运行结果 :
单击图片字体消失，鼠标移动到图片字体变为红色，移出字体变为黑色
6、根据输入字符智能匹配符合要求的li元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据输入字符智能匹配符合要求的li元素</title>
<style type="text/css">
body{margin: 0px;padding: 0px;}
ul{position: relative;left:-40px;top:-12px;}
li{
width:140px;
background-color: antiquewhite;
margin-bottom: 1px;
list-style-type: none;
padding-left: 15px;
}
.myBox{
width:200px;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
padding: 10px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
//jquery.fastLiveFilter插件
jQuery.fn.fastLiveFilter=function(list,options){
options=options||{};
list=jQuery(list);
var input=this;
var lastFilter='';
var timeout=options.timeout||0;
var callback=options.callback||function(){};
var keyTimeout;
var lis=list.children();
var len=lis.length;
var oldDisplay=len>0?lis[0].style.display:"block";
callback(len);
input.change(function(){
var filter=input.val().toLowerCase();
var li,innerText;
var numShown=0;
for(var i=0;i<len;i++){
li=lis[i];
innerText=!options.selector?(li.textContent||li.innerText||""):$(li).find(options.selector).text();
if(innerText.toLowerCase().indexOf(filter)>=0){
if(li.style.display=="none"){
li.style.display=oldDisplay;
}
numShown++;
}else{
if(li.style.display!="none"){
li.style.display="none";
}
}
}
callback(numShown);
return false;
}).keydown(function(){
clearTimeout(keyTimeout);
keyTimeout=setTimeout(function(){
if(input.val()===lastFilter)
return;
lastFilter=input.val();
input.change();
},timeout);
});
return this;
}
$(function(){
$("#search_input").fastLiveFilter("#search_li");
});
$(document).ready(function(){
$("ul").click(function(event){
var targets=$(event.target);
if(targets.is("li")){//判断鼠标是否击中了某个列表项
$("#search_input").val(targets.text());
}
});
});
</script>
</head>
<body>
<div class="myBox">
<input type="text" placeholder="输入文字开始筛选" value="" id="search_input"/>
<ul id="search_li">
<li>Tokyo</li>
<li>Seoul</li>
<li>Manila</li>
<li>Jakarta</li>
<li>Singpore</li>
<li>Tashkent</li>
<li>sanna</li>
<li>Budapest</li>
<li>San Marino</li>
<li>sofia</li>
<li>Abuja</li>
<li>Apia</li>
<li>Bern</li>
<li>Suva</li>
<li>Santiago</li>
<li>Brasila</li>
</ul>
</div>
</body>
</html>
运行结果：