如今用nodeclub落成股票的输入关键字自动补全股票新闻进行搜寻效果，原先用jQuery-ui，结果jQuery-ui库太大，所以考虑用别的插件，最终选拔接纳autocomplete.js，控件简单用着方便。留下记录

登录界面 login.jsp:

第四章 jQuery中的事件，第四章jQuery事件

　　1.加载DOM

　　jQuery中，在$(document).ready()方法内注册的事件，只要DOM就绪就会被实施，此时或者元素的关系文件未下载完。

　　jQuery中的
load()方法，会在要素的onload事件中绑定一个处理函数。比如$(window).load(function(){…}),等价于JavaScript中的window.onload=function(){…}，该办法要求等网页所有因素都加载完（包蕴管理文件）。

　　2.事件绑定

　　在文档装载完将来，可以为因素绑定事件来成功部分操作。可以使用bind()方法来对匹配元素举行一定的轩然大波绑定。

　　语法： bind(type,[data],fn);

澳门金沙国际 1<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-2-3</title> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <link rel=”stylesheet”
type=”text/css” href=”../../css/style.css” /> <script
type=”text/javascript”> $(function(){ $(“#panel
h5.head”).bind(“click”,function(){ var $content = $(this).next();
if($content.is(“:visible”)){ $content.hide(); }else{ $content.show(); }
}) }) </script> </head> <body> <div id=”panel”>
<h5 class=”head”>什么是jQuery?</h5> <div
class=”content”>
jQuery是继Prototype之后又一个名特优的JavaScript库，它是一个由 约翰 Resig
创设于二零零六年六月的开源项目。jQuery凭借简洁的语法和跨平台的包容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和付出Ajax。它特有而又优雅的代码风格改变了JavaScript程序员的统筹思路和编写程序的章程。
</div> </div> </body> </html> View Code
澳门金沙国际 2<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-2-4</title> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <link rel=”stylesheet”
type=”text/css” href=”../../css/style.css” /> <script
type=”text/javascript”> $(function(){ $(“#panel
h5.head”).bind(“mouseover”,function(){ $(this).next().show(); });
$(“#panel h5.head”).bind(“mouseout”,function(){ $(this).next().hide();
}) }) </script> </head> <body> <div id=”panel”>
<h5 class=”head”>什么是jQuery?</h5> <div
class=”content”>
jQuery是继Prototype之后又一个得天独厚的JavaScript库，它是一个由 约翰(John) Resig
成立于二零零六年11月的开源项目。jQuery凭借简洁的语法和跨平台的包容性，极大地简化了JavaScript开发人士遍历HTML文档、操作DOM、处理事件、执行动画和支出Ajax。它杰出而又优雅的代码风格改变了JavaScript程序员的宏图思路和编写程序的艺术。
</div> </div> </body> </html> View Code

　　3.合成事件

　　jQuery中有2个合成事件，hover()方法与toggle()方法。

　　hover() 语法：hover(enter,leave);  用来效仿光标悬停事件。

澳门金沙国际 3<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-3-1</title> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <link rel=”stylesheet”
type=”text/css” href=”../../css/style.css” /> <script
type=”text/javascript”> $(function(){ $(“#panel
h5.head”).hover(function(){ $(this).next().show(); },function(){
$(this).next().hide(); }) }) </script> </head> <body>
<div id=”panel”> <h5 class=”head”>什么是jQuery?</h5>
<div class=”content”>
jQuery是继Prototype之后又一个一石两鸟的JavaScript库，它是一个由 John Resig
成立于二〇〇六年十二月的开源项目。jQuery凭借简洁的语法和跨平台的包容性，极大地简化了JavaScript开发人士遍历HTML文档、操作DOM、处理事件、执行动画和付出Ajax。它特有而又优雅的代码风格改变了JavaScript程序员的筹划思路和编写程序的章程。
</div> </div> </body> </html> View Code

　　toggle()语法：toggle(fn1,fn2,…fnN); 用来效仿鼠标三番五次单击事件。

澳门金沙国际 4<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-3-3</title> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <link rel=”stylesheet”
type=”text/css” href=”../../css/style.css” /> <script
type=”text/javascript”> $(function(){ $(“#panel
h5.head”).toggle(function(){ $(this).next().toggle(); },function(){
$(this).next().toggle(); }) }) /*$(function(){ $(“#panel
h5.head”).click(function(){ $(this).next().toggle(); }) })*/
</script> </head> <body> <div id=”panel”> <h5
class=”head”>什么是jQuery?</h5> <div class=”content”>
jQuery是继Prototype之后又一个得天独厚的JavaScript库，它是一个由 John Resig
创制于二零零六年3月的开源项目。jQuery凭借简洁的语法和跨平台的包容性，极大地简化了JavaScript开发人士遍历HTML文档、操作DOM、处理事件、执行动画和支付Ajax。它特殊而又优雅的代码风格改变了JavaScript程序员的筹划思路和编写程序的法子。
</div> </div> </body> </html> View Code

　　4.风浪冒泡

　　意思就是，页面上有五个要素响应同一个事变。事件会坚守DOM的层次结构像水泡一样持续往上至顶。

澳门金沙国际 5<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-4-1</title> <style type=”text/css”> * {
margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%;
padding: 60px; } #content { width: 220px; border: 1px solid #0050D0;
background: #96E555; } span { width: 200px; margin: 10px; background:
#666666; cursor: pointer; color: white; display: block; } p { width:
200px; background: #888; color: white; height: 16px; } </style>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { // 为span元素绑定click事件
$(‘span’).bind(“click”, function () { var txt = $(‘#msg’).html() +
“<p>内层span元素被点击.<p/>”; $(‘#msg’).html(txt); }); //
为div元素绑定click事件 $(‘#content’).bind(“click”, function () { var
txt = $(‘#msg’).html() + “<p>外层div元素被点击.<p/>”;
$(‘#msg’).html(txt); }); // 为body元素绑定click事件
$(“body”).bind(“click”, function () { var txt = $(‘#msg’).html() +
“<p>body元素被点击.<p/>”; $(‘#msg’).html(txt); }); })
</script> </head> <body> <div id=”content”>
外层div元素 <span>内层span元素</span> 外层div元素
</div> <div id=”msg”> </div> </body>
</html> View Code

　　截至冒泡

澳门金沙国际 6<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Panel</title> <style type=”text/css”> * {
margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%;
padding: 60px; } #content { width: 220px; border: 1px solid #0050D0;
background: #96E555; } span { width: 200px; margin: 10px; background:
#666666; cursor: pointer; color: white; display: block; } p { width:
200px; background: #888; color: white; height: 16px; } </style>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { // 为span元素绑定click事件
$(‘span’).bind(“click”, function (event) { var txt = $(‘#msg’).html() +
“<p>内层span元素被点击.<p/>”; $(‘#msg’).html(txt);
event.stopPropagation(); // 阻止事件冒泡 }); // 为div元素绑定click事件
$(‘#content’).bind(“click”, function (event) { var txt =
$(‘#msg’).html() + “<p>外层div元素被点击.<p/>”;
$(‘#msg’).html(txt); event.stopPropagation(); // 阻止事件冒泡 }); //
为body元素绑定click事件 $(“body”).bind(“click”, function () { var txt =
$(‘#msg’).html() + “<p>body元素被点击.<p/>”;
$(‘#msg’).html(txt); }); }) </script> </head> <body>
<div id=”content”> 外层div元素
<span>内层span元素</span> 外层div元素 </div> <div
id=”msg”> </div> </body> </html> View Code
澳门金沙国际 7<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-4-4</title> <style type=”text/css”> * {
margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%;
padding: 60px; } #content { width: 220px; border: 1px solid #0050D0;
background: #96E555; } span { width: 200px; margin: 10px; background:
#666666; cursor: pointer; color: white; display: block; } p { width:
200px; background: #888; color: white; height: 16px; } </style>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { // 为span元素绑定click事件
$(‘span’).bind(“click”, function (event) { var txt = $(‘#msg’).html() +
“<p>内层span元素被点击.<p/>”; $(‘#msg’).html(txt); return
false; }); // 为div元素绑定click事件 $(‘#content’).bind(“click”,
function (event) { var txt = $(‘#msg’).html() +
“<p>外层div元素被点击.<p/>”; $(‘#msg’).html(txt); return
false; }); // 为body元素绑定click事件 $(“body”).bind(“click”, function
() { var txt = $(‘#msg’).html() + “<p>body元素被点击.<p/>”;
$(‘#msg’).html(txt); }); }) </script> </head> <body>
<div id=”content”> 外层div元素
<span>内层span元素</span> 外层div元素 </div> <div
id=”msg”> </div> </body> </html> View Code

　　阻止默许行为

澳门金沙国际 8<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(“#sub”).bind(“click”,
function (event) { var username = $(“#username”).val(); //获取元素的值
if (username == “”) { //判断值是不是为空
$(“#msg”).html(“<p>文本框的值不能为空.</p>”); //提醒新闻event.preventDefault(); //阻止默许行为 ( 表单提交 ) } }) })
</script> </head> <body> <form
action=”test.html”> 用户名：<input type=”text” id=”username” />
<br /> <input type=”submit” value=”提交” id=”sub” />
</form> <div id=”msg”> </div> </body>
</html> View Code
澳门金沙国际 9<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(“#sub”).bind(“click”,
function (event) { var username = $(“#username”).val(); //获取元素的值
if (username == “”) { //判断值是或不是为空
$(“#msg”).html(“<p>文本框的值不能够为空.</p>”); //提醒音讯return false; } }) }) </script> </head> <body>
<form action=”test.html”> 用户名：<input type=”text”
id=”username” /> <br /> <input type=”submit” value=”提交”
id=”sub” /> </form> <div id=”msg”> </div>
</body> </html> View
Code

　　5.风浪目的的性质

　　jQuery对事件目标常用的特性举办了打包。

　　(1)event.type 可以博得事件的花色

澳门金沙国际 10<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head>
<title></title> <meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″ /> <!– 引入jQuery –>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script> $(function () {
$(“a”).click(function (event) { alert(event.type); //获取事件类型 return
false; //阻止链接跳转 }); }) </script> </head> <body>
<a href=’ me .</a> </body>
</html> View Code

　　(2)event.target 可以取得出发事件的元素

澳门金沙国际 11<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head>
<title></title> <meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″ /> <!– 引入jQuery –>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script> $(function () {
$(“a[href= (event) {
alert(event.target.href); //获取触发事件的<a>元素的href属性值
return false; //阻止链接跳转 }); }) </script> </head>
<body> <a href=’ me .</a>
</body> </html> View
Code

　　(3)event.pageX和event.pageY 可以得到光标相对于页面的x坐标与y坐标。

澳门金沙国际 12<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head>
<title></title> <meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″ /> <!– 引入jQuery –>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script> $(function () {
$(“a”).click(function (event) { alert(“Current mouse position: ” +
event.pageX + “, ” + event.pageY); //获取鼠标当前绝对于页面的坐标 return
false; //阻止链接跳转 }); }) </script> </head> <body>
<a href=’ me .</a> </body>
</html> View Code

　　(4)event.which
可以在鼠标单击事件中得到鼠标的左中右键，也可以得到键盘键。

澳门金沙国际 13<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head>
<title></title> <meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″ /> <!– 引入jQuery –>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script> $(function(){
$(“a”).mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 =
鼠标中键; 3 = 鼠标右键 return false;//阻止链接跳转 }) }) </script>
</head> <body> <a href=’ me
.</a> </body> </html> View Code
澳门金沙国际 14<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head>
<title></title> <meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″ /> <!– 引入jQuery –>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script> $(function () {
$(“input”).keyup(function (e) { alert(e.which); }) }) </script>
</head> <body> <input /> </body> </html>
View Code

　　6.移除事件

　　unbind([type],[data])方法用来移除事件。

澳门金沙国际 15<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-6-2</title> <style type=”text/css”> * {
margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%;
padding: 60px; } p { width: 200px; background: #888; color: white;
height: 16px; } </style> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(‘#btn’).bind(“click”,
function () { $(‘#test’).append(“<p>我的绑定函数1</p>”);
}).bind(“click”, function () {
$(‘#test’).append(“<p>我的绑定函数2</p>”); }).bind(“click”,
function () { $(‘#test’).append(“<p>我的绑定函数3</p>”);
}); $(‘#delAll’).click(function () { $(‘#btn’).unbind(“click”); }); })
</script> </head> <body> <button id=”btn”>
点击我</button> <div id=”test”> </div> <button
id=”delAll”> 删除所有事件</button> </body> </html>
View Code
澳门金沙国际 16<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Panel</title> <style type=”text/css”> * {
margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%;
padding: 60px; } p { width: 200px; background: #888; color: white;
height: 16px; } </style> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(‘#btn’).bind(“click”,
myFun1 = function () {
$(‘#test’).append(“<p>我的绑定函数1</p>”); }).bind(“click”,
myFun2 = function () {
$(‘#test’).append(“<p>我的绑定函数2</p>”); }).bind(“click”,
myFun3 = function () {
$(‘#test’).append(“<p>我的绑定函数3</p>”); });
$(‘#delTwo’).click(function () { $(‘#btn’).unbind(“click”, myFun2);
}); }) </script> </head> <body> <button
id=”btn”> 点击我</button> <div id=”test”> </div>
<button id=”delTwo”> 删除第一个事件</button> </body>
</html> View Code

　　one(type,[data],fn)方法可以为因素绑定处理函数，当处理函数触发四次后立即删除。

澳门金沙国际 17<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-6-4</title> <style type=”text/css”> * {
margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%;
padding: 60px; } p { width: 200px; background: #888; color: white;
height: 16px; } </style> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(‘#btn’).one(“click”,
function () { $(‘#test’).append(“<p>我的绑定函数1</p>”);
}).one(“click”, function () {
$(‘#test’).append(“<p>我的绑定函数2</p>”); }).one(“click”,
function () { $(‘#test’).append(“<p>我的绑定函数3</p>”);
}); }) </script> </head> <body> <button
id=”btn”> 点击我</button> <div id=”test”> </div>
</body> </html> View
Code

　　7.模仿操作

　　jQuery中可以动用trigger()方法成功模拟操作。

澳门金沙国际 18<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <style type=”text/css”> * { margin:
0; padding: 0; } body { font-size: 13px; line-height: 130%; padding:
60px; } p { width: 200px; background: #888; color: white; height: 16px;
} </style> <script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(‘#btn’).bind(“click”,
function () { $(‘#test’).append(“<p>我的绑定函数1</p>”);
}).bind(“click”, function () {
$(‘#test’).append(“<p>我的绑定函数2</p>”); }).bind(“click”,
function () { $(‘#test’).append(“<p>我的绑定函数3</p>”);
}); $(‘#btn’).trigger(“click”); }) </script> </head>
<body> <button id=”btn”> 点击我</button> <div
id=”test”> </div> </body> </html> View Code
澳门金沙国际 19<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <style type=”text/css”> * { margin:
0; padding: 0; } body { font-size: 13px; line-height: 130%; padding:
60px; } p { width: 200px; background: #888; color: white; height: 16px;
} </style> <script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(‘#btn’).bind(“myClick”,
function (event, message1, message2) { $(‘#test’).append(“<p>” +
message1 + message2 + “</p>”); }); $(‘#btn’).click(function () {
$(this).trigger(“myClick”, [“我的自定义”, “事件”]);
}).trigger(“myClick”, [“我的自定义”, “事件”]); }) </script>
</head> <body> <button id=”btn”> 点击我</button>
<div id=”test”> </div> </body> </html> View Code

 PS：参考文献《锋利的jQuery》

详解Jquery 选择器，详解jquery选择器

jQuery搜索框自动补全功用插件完结，jQuery中的事件。1   概述

 本篇小说为穿插文章，ASP.NET MVC体系近年来写了之类几篇：

  • 详解google Chrome浏览器（理论篇）
  • 详解Google Chrome浏览器（操作篇）（上）
  • 详解Google Chrome浏览器（操作篇）（下）
  • .NET 开发条件搭建
  • 详解ASP.NET MVC 路由
  • 详解ASP.NET MVC 控制器

写该篇小说主要目的是为接下去的ASP.NET MVC
连串，如页面之间传值，ADO.NET和EF，Bootstrap等打基础，本篇作品相比基础，但正如健全，分外适合基础连忙扫盲。

2   基本接纳器

2.1  一览表

澳门金沙国际 20

2.2  示例代码

 (1)id选择器

将id为lastname元素的背景观设置为灰色

澳门金沙国际 21 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“#lastname”).css(“background-color”, “#0000ff”); 11 12 }); 13 14
</script> 15 </head> 16 <body> 17 <div
id=”lastname”>id为lastname的精选器</div> 18 </body> 19
</html> View Code

(2)类拔取器

将class为intro元素的背景象设置为黑色

澳门金沙国际 22 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“.intro”).css(“background-color”, “#0000ff”); 11 12 }); 13 14
</script> 15 </head> 16 <body> 17 <div
class=”intro”>div选拔器测试</div> 18 <p
class=”intro”>p测试选拔器</p> 19 </body> 20 </html>
View Code

(3)元素选拔器

将p元素的背景象设置为肉色

澳门金沙国际 23 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“p”).css(“background-color”, “#0000ff”); 11 12 }); 13 14
</script> 15 </head> 16 <body> 17
<p>p测试接纳器</p> 18 </body> 19 </html> View Code

(4)所有选取器

遍历body下的有所因素，将其背景象设置为灰色

澳门金沙国际 24 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10 $(“body
*”).css(“background-color”, “#0000ff”); 11 12 }); 13 14
</script> 15 </head> 16 <body> 17
<div>拔取器测试</div> 18 <p>p元素</p> 19
</body> 20 </html> View
Code

(5)并列采取器

 将元素p和要素div背景观设置为紫色

澳门金沙国际 25 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“p,div”).css(“background-color”, “#0000ff”); 11 12 }); 13 14
</script> 15 </head> 16 <body> 17
<div>选用器测试</div> 18 <p>p元素</p> 19
</body> 20 </html> View
Code

3   层次选拔器

3.1 一览表

澳门金沙国际 26

3.2 示例代码

(1)parent>child(直系子元素，即间接下一代元素)

安装div元素的第一代元素为span的因素的背景象为青色

澳门金沙国际 27 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“div>span”).css(“background-color”, “#0000ff”); 11 12 }); 13 14
</script> 15 </head> 16 <body> 17 <div> 18
<span>DOM树，DIV第一代</span> 19 <p> 20
<span>DOM树，第二代</span> 21 </p> 22
<span>DOM树，DIV第一代</span> 23 </div> 24
</body> 25 </html> View
Code

测试结果：

澳门金沙国际 28

结果分析：依照如上代码画出的DOM树如下，可以很清楚看出，DIV有多个一向孩子，即首先代span,p,span，代码中div>span，表示div下的第一手第一代span，因此，测试结果就容易驾驭了。

澳门金沙国际 29

(2)prev+next(prev元素的下一个小兄弟元素，等同于next()方法)

设置类为intro元素的下一个弟兄元素背景观为红色

澳门金沙国际 30 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“.intro+div”).css(“background-color”, “#0000ff”); 11
//$(“.intro”).next(“div”).css(“background-color”, “#0000ff”); 12 13 });
14 15 </script> 16 </head> 17 <body> 18
<div>1</div> 19 <p class=”intro”>2</p> 20
<div>3</div> 21 <div>4</div> 22 <span
class=”item”>5</span> 23 <div>6</div> 24
</body> 25 </html> View
Code

测试结果：

澳门金沙国际 31

结果分析：根据如上代码画出DOM树如下图，测试结果肯定。

澳门金沙国际 32

(3)prev~siblings(prev元素的有所兄弟元素，等同于nextAll()方法)

 设置类为intro元素之后的兼具兄弟元素为div元素的背景观为肉色

澳门金沙国际 33 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“.intro~div”).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 </head> 15 <body> 16
<div>G0</div> 17 <div class=”intro”>G1</div> 18
<div>G2</div> 19 <span>G3</span> 20
<div>G4</div> 21 </body> 22 </html> View Code

测试结果：

澳门金沙国际 34

分析测试结果：根据如上代码画出DOM树如下图，测试结果肯定。

澳门金沙国际 35

4   过滤接纳器

4.1 基本过滤接纳器

4.1.1  一览表

澳门金沙国际 36

4.1.2  代码示例

(1):first(采纳第四个元素)

澳门金沙国际 37 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“span:first”).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 </head> 15 <body> 16
<span>G1</span> 17 <span>G2</span> 18
<span>G3</span> 19 </body> 20 </html> View Code

测试结果：

澳门金沙国际 38

(2):last(选拔最终一个因素)

澳门金沙国际 39 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“span:last”).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 </head> 15 <body> 16
<span>G1</span> 17 <span>G2</span> 18
<span>G3</span> 19 </body> 20 </html> View Code

测试结果：

澳门金沙国际 40

(3)：not(取非元素)

澳门金沙国际 41 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“div:not(.wrap)”).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 </head> 15 <body> 16
<div>G1</div> 17 <div class=”wrap”>G2</div> 18
</body> 19 </html> View
Code

可是，请留心上面的代码：当G1所在div和G2所在div是父子关系时，G1和G2都会变色。

澳门金沙国际 421
<div> 2     G1    <div class=”wrap”>G2</div> 3
</div> View Code

(4):even(索引为偶数，索引 index从0开首)

澳门金沙国际 43 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“div:even”).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 </head> 15 <body> 16
<div>G1</div> 17 <div>G2</div> 18
<div>G3</div> 19 <div>G4</div> 20 </body>
21 </html> View Code

测试结果：

澳门金沙国际 44

(5):odd(索引为奇数，索引 index从0起初)

澳门金沙国际 45 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“div:odd”).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 </head> 15 <body> 16
<div>G1</div> 17 <div>G2</div> 18
<div>G3</div> 19 <div>G4</div> 20 </body>
21 </html> View Code

测试结果：

澳门金沙国际 46

(6):eq(x)(取指定索引的元素，x为从0开端的目录)

安装索引为2的div元素背景为黑色

澳门金沙国际 47 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“div:eq(2)”).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 </head> 15 <body> 16
<div>G1</div> 17 <div>G2</div> 18
<div>G3</div> 19 <div>G4</div> 20 </body>
21 </html> View Code

测试结果：

澳门金沙国际 48

(7):lt(x))(取小于指定索引的因素，x为从0先河的目录)

澳门金沙国际 49 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“div:lt(2)”).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 </head> 15 <body> 16
<div>G1</div> 17 <div>G2</div> 18
<div>G3</div> 19 <div>G4</div> 20 </body>
21 </html> View Code

测试结果：

澳门金沙国际 50

(8):gt(x))(取大于指定索引的要素，x为从0起初的目录)

澳门金沙国际 51 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“div:gt(2)”).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 </head> 15 <body> 16
<div>G1</div> 17 <div>G2</div> 18
<div>G3</div> 19 <div>G4</div> 20 </body>
21 </html> View Code

测试结果：

澳门金沙国际 52

(8):header(取h1-h6标题元素)

澳门金沙国际 53 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“:header”).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 </head> 15 <body> 16
<h1>测试H1标题</h1> 17 <div>G1</div> 18
<div>G2</div> 19 <div>G3</div> 20
<h2>测试h2标题</h2> 21 <h3>测试h3标题</h3> 22
<h4>测试h4标题</h4> 23 <div>G4</div> 24
<h5>测试h5标题</h5> 25 <h6>测试h6标题</h6> 26
</body> 27 </html> View
Code

测试结果：

澳门金沙国际 54

(9):animated(所有动画元素)

澳门金沙国际 55 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10 function
aniDiv() { 11 $(“#box”).animate({ width: 300 }, “slow”); 12
$(“#box”).animate({ width: 100 }, “slow”, aniDiv); 13 } 14 aniDiv(); 15
$(“.btn1”).click(function () { 16 $(“:animated”).css(“background-color”,
“#0000ff”); 17 }); 18 }); 19 20 </script> 21 <style> 22 div
{ 23 background: #98bf21; 24 height: 40px; 25 width: 100px; 26
position: relative; 27 margin-bottom: 5px; 28 } 29 </style> 30
</head> 31 <body> 32 <div></div> 33 <div
id=”box”></div> 34 <div></div> 35 <button
class=”btn1″>Mark animated element</button> 36 </body> 37
</html> View Code

测试结果：

 澳门金沙国际 56

4.2 内容过滤选用器

4.2.1 一览表

澳门金沙国际 57

4.2.2 示例代码

(1):contains(text)(取包蕴text文本的因素)

澳门金沙国际 58 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(‘div:contains(“G2”)’).css(“background-color”, “#0000ff”); 11 }); 12
13 </script> 14 15 </head> 16 <body> 17
<div>G1</div> 18 <div>G2</div> 19
<div>G3</div> 20 </body> 21 </html> View Code

测试结果：

澳门金沙国际 59

(2):empty（取不带有子元素或文本为空的要素）

澳门金沙国际 60 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(‘div:empty’).html(‘没有内容’); 11 }); 12 13 </script> 14 15
</head> 16 <body> 17 <div>G1</div> 18
<div>G2</div> 19 <div>G3</div> 20
<div></div> 21 </body> 22 </html> View Code

测试结果：

澳门金沙国际 61

(3) :has(selector)（取选拔器匹配的要素）

不畏span不是div的直系子元素，也会收效

澳门金沙国际 62 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10 //
为含有span元素的div添加边框 11 $(‘div:has(span)’).css(‘border’, ‘1px
solid #000’); 12 }); 13 14 </script> 15 16 </head> 17
<body> 18 <div> 19 <h2> 20
A     <span>B</span> 21 </h2> 22 </div> 23
</body> 24 </html> View
Code

测试结果：

澳门金沙国际 63

(4):parent（取包括子元素或文本的要素）

澳门金沙国际 64 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10 $(‘ol
li:parent’).css(‘border’, ‘1px solid #000’); 11 }); 12 13
</script> 14 15 </head> 16 <body> 17 <ol> 18
<li></li> 19 <li>A</li> 20 <li></li>
21 <li>D</li> 22 </ol> 23 </body> 24
</html> View Code

测试结果：

澳门金沙国际 65

4.3 可知性过滤拔取器

4.3.1 一览表

澳门金沙国际 66

4.3.2 示例代码

(1):hidden（取不可知的要素）

匹配display:none，<input type=”hidden”
/>，visibility:hidden，capacity:0元素

澳门金沙国际 67 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(‘div:hidden’).show(500); 11 alert($(‘input:hidden’).val()); 12 }); 13
</script> 14 <style type=”text/css”> 15 div         16 { 17
margin: 10px; 18 width: 200px; 19 height: 40px; 20 border: 1px solid
#FF0000; 21 display:block; 22 } 23 24 .hid-1         25 { 26 display:
none; 27 } 28 29 .hid-2         30 { 31 visibility: hidden; 32 } 33 34
</style> 35 </head> 36 <body> 37 <div
class=”hid-1″>display: none</div> 38 <div
class=”hid-2″>visibility: hidden</div> 39 <input
type=”hidden” value=”hello” /> 40 </body> 41 </html>
View Code

测试结果：

澳门金沙国际 68

(2):visible（取可知的元素）

澳门金沙国际 69 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(‘div:visible’).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 15 </head> 16 <body> 17 <div
style=”display:none”>G1</div> 18 <div>G2</div> 19
<div style=”display:none”>G3</div> 20
<div>G4</div> 21 22 </body> 23 </html> 24 25 26
View Code

测试结果：

澳门金沙国际 70

4.4 属性过滤选用器

4.4.1 一览表

澳门金沙国际 71

4.4.2 代码示例

(1)[attribute]（取拥有attribute属性的元素）

澳门金沙国际 72 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(‘div[class]’).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 15 </head> 16 <body> 17
<div>G1</div> 18 <div>G2</div> 19
<div>G3</div> 20 <div class=”div4″>G4</div> 21
22 </body> 23 </html> 24 25 26 View Code

测试结果：

澳门金沙国际 73

(2)[attribute = value]（取attribute属性值等于value）

澳门金沙国际 74 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(‘div[class=div3]’).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 15 </head> 16 <body> 17
<div>G1</div> 18 <div>G2</div> 19 <div
class=”div3″>G3</div> 20 <div class=”div4″>G4</div>
21 22 </body> 23 </html> 24 25 26 View Code

测试结果：

澳门金沙国际 75

(3) [attribute != value](取attribute属性值不对等value的因素)

澳门金沙国际 76 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(‘div[class!=div3]’).css(“background-color”, “#0000ff”); 11 }); 12
13 </script> 14 15 </head> 16 <body> 17
<div>G1</div> 18 <div>G2</div> 19 <div
class=”div3″>G3</div> 20 <div class=”div4″>G4</div>
21 22 </body> 23 </html> 24 25 26 View Code

测试结果：

澳门金沙国际 77

(4)[attribute $= value](attribute属性值以value为止)

澳门金沙国际 78 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(‘[id$=div]’).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 15 </head> 16 <body> 17 <div
id=”first_div”>G1</div> 18 <div
id=”second_div”>G2</div> 19 <div class=”div3″
title=”3div”>G3</div> 20 <div class=”div4″>G4</div>
21 22 </body> 23 </html> View Code

测试结果：

澳门金沙国际 79

(5))[attribute^= value](attribute属性值以value伊始)

澳门金沙国际 80 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(‘[id^=first]’).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 15 </head> 16 <body> 17 <div
id=”first_div”>G1</div> 18 <div
id=”second_div”>G2</div> 19 <div class=”div3″
title=”3div”>G3</div> 20 <div class=”div4″>G4</div>
21 22 </body> 23 </html> 24 25 26 View Code

测试结果：

澳门金沙国际 81

(6)[attribute *= value]（attribute属性值包罗value值）

澳门金沙国际 82 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”澳门金沙国际，~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(‘[id*=first]’).css(“background-color”, “#0000ff”); 11 }); 12 13
</script> 14 15 </head> 16 <body> 17 <div
id=”first_div”>G1</div> 18 <div
id=”second_div”>G2</div> 19 <div class=”div3″
title=”3div”>G3</div> 20 <div class=”div4″>G4</div>
21 22 </body> 23 </html> View Code

测试结果：

澳门金沙国际 83

诠释：在性能选拔器中，^$符号和正则表明式的始发终结符号表示的意义是同等的，*漏洞相当多匹配，类似于sql中的like
‘%str%’。

(7)[selector1][selector2]（复合型属性过滤器，同时满意七个规范）

澳门金沙国际 84 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(‘div[class=div3][title=3div]’).css(“background-color”,
“#0000ff”); 11 }); 12 13 </script> 14 15 </head> 16
<body> 17 <div>G1</div> 18 <div>G2</div>
19 <div class=”div3″ title=”3div”>G3</div> 20 <div
class=”div4″>G4</div> 21 22 </body> 23 </html> 24
25 26 View Code

测试结果：

澳门金沙国际 85

4.5 子元素过滤拔取器

4.5.1 一览表

澳门金沙国际 86

4.5.2 代码示例

(1)first-child(表示万分的率先个要素)和last-child(表示相当的最终一个子元素)

 要求大家只顾的是，:fisrst和:last再次来到的都是单个元素，而:first-child和:last-child再次回到的都是集合元素。举个
例子：div:first再次回到的是百分之百DOM文档中首先个div元素，而div:first-child是重返所有div元素下的率先个元素合并后的集
合。

澳门金沙国际 87 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“div:first-child”).css(“background-color”, “#B2E0FF”); 11
$(“div:last-child”).css(“background-color”, “red”); 12 }); 13
</script> 14 </head> 15 <body> 16 <div> 17
<div>1</div> 18 <div>2</div> 19
<p>3</p> 20 </div> 21 <div>4</div> 22
<div>last</div> 23 </body> 24 </html> View Code

测试结果：

澳门金沙国际 88

(3)only-child(当某个元素有且仅有一个子元素时，:only-child才会卓有成效)

澳门金沙国际 89 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“div:only-child”).css(“background-color”, “red”); 11 }); 12
</script> 13 </head> 14 <body> 15 <div> 16
<div>1</div> 17 <div>2</div> 18
<p>3</p> 19 </div> 20 <div>4</div> 21
<div>last 22 <div>ddd</div> 23 </div> 24
</body> 25 </html> View
Code

测试结果：

澳门金沙国际 90

(4)nth-child

来看那么些就想起英文单词里的，fourth, fifth,
sixth……，nth表示第n个，:nth-child就代表第n个child元素。要小心的是，那儿的n不像eq(x)、gt(x)或lt(x)是从
0开头的，它是从1始发的，英文里好像也尚无zeroth那样的序号词吗。

:nth-child有三种用法：

1) :nth-child(x)，获取第x个子元素
2)
:nth-child(even)和:nth-child(odd)，从1先导，获取第偶数个要素或第奇数个元素

3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y =
0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是地点三种的通项式。（当x=0,y>=0时，等同于:hth-
child(x)；当x=2,y=0时，等同于nth-child(even)；当x=2,y=1时，等同于:nth-child(odd)）

4.6 表单对象属性过滤采用器

4.6.1 一览表

澳门金沙国际 91

4.6.2 代码示例

(1):enabled和:disabled（取可用或不可用元素）

:enabled和:diabled的匹配范围包括input, select, textarea

澳门金沙国际 92 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(‘:enabled’).css(‘border’, ‘1px solid #FF0000’); 11
$(‘:disabled’).css(‘border’, ‘1px solid #0000FF’); 12 }); 13 14
</script> 15 16 </head> 17 <body> 18 <div> 19
<input type=”text” value=”可用的文本框” /> 20 </div> 21
<div> 22 <input type=”text” disabled=”disabled”
value=”不可用的文本框” /> 23 </div> 24 <div> 25
<textarea disabled=”disabled”>不可用的文本域</textarea> 26
</div> 27 <div> 28 <select disabled=”disabled”> 29
<option>English</option> 30
<option>简体汉语</option> 31 </select> 32 </div>
33 </body> 34 </html> View Code

测试结果：

澳门金沙国际 93

(2):checked（取选中的单选框或复选框元素）

澳门金沙国际 94 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“.btn1”).click(function () { 11 $(“:checked”).hide(); 12 }); 13 }); 14
</script> 15 16 </head> 17 <body> 18 <input
type=”radio” name=”sex” value=”male” checked=”checked” /> Male 19
<br /> 20 <input type=”radio” name=”sex” value=”female” />
Female 21 <br /> 22 I have a bike: 23 <input type=”checkbox”
name=”vehicle” value=”Bike” /> 24 <br /> 25 I have a car: 26
<input type=”checkbox” name=”vehicle” value=”Car” checked=”checked”
/> 27 <br /> 28 I have an airplane: 29 <input
type=”checkbox” name=”vehicle” value=”Airplane” /> 30 <button
class=”btn1″>Hide Checked Options</button> 31 32 </body>
33 </html> View Code

(3):selected（取下拉列表被选中的元素）

澳门金沙国际 95 1
<html> 2 <head> 3 <script type=”text/javascript”
src=”/jquery/jquery.js”></script> 4 <script
type=”text/javascript”> 5 $(document).ready(function(){ 6
$(“.btn1”).click(function(){ 7 $(“:selected”).hide(); 8 }); 9 }); 10
</script> 11 </head> 12 <body> 13 14 <select
multiple=”multiple”> 15 <option>Volvo</option> 16
<option selected=”selected”>Saab</option> 17
<option>Mercedes</option> 18
<option>Audi</option> 19 </select> 20 <br /> 21
<button class=”btn1″>Hide Selected</button> 22 </body>
23 </html> View Code

5   表单选用器

5.1 一览表

澳门金沙国际 96

5.2 测试代码

(1):input()(选拔具有input元素)

澳门金沙国际 97 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“:input”).css(“background-color”, “#B2E0FF”); 11 }); 12
</script> 13 </head> 14 <body> 15 <form
action=””> 16 Name: <input type=”text” name=”user” /> 17 <br
/> 18 Password: <input type=”password” name=”password” /> 19
<br /> 20 <button type=”button”>Useless
Button</button> 21 <input type=”button” value=”Another useless
button” /> 22 <br /> 23 <input type=”reset” value=”Reset”
/> 24 <input type=”submit” value=”Submit” /> 25 <br /> 26
</form> 27 </body> 28 </html> View Code

测试结果：

澳门金沙国际 98

(2):text(选择所有text元素)

澳门金沙国际 99 1
<!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta
name=”viewport” content=”width=device-width” /> 6 <script
src=”~/Scripts/jquery-1.10.2.js”></script> 7
<title>JQuery函数</title> 8 <script
type=”text/javascript”> 9 $(document).ready(function () { 10
$(“:text”).css(“background-color”, “#B2E0FF”); 11 }); 12
</script> 13 </head> 14 <body> 15 <form
action=””> 16 Name: <input type=”text” name=”user” /> 17 <br
/> 18 Password: <input type=”password” name=”password” /> 19
<br /> 20 <button type=”button”>Useless
Button</button> 21 <input type=”button” value=”Another useless
button” /> 22 <br /> 23 <input type=”reset” value=”Reset”
/> 24 <input type=”submit” value=”Submit” /> 25 <br /> 26
</form> 27 </body> 28 </html> View Code

测试结果：

澳门金沙国际 100

(3):select和:button

(4)其他表单元素比较不难，在此不列举。

6   参考文献

【01】

【02】

【03】

【04】

 

采取器，详解jquery接纳器 1 概述
本篇小说为穿插小说，ASP.NET MVC种类近来写了如下几篇： 详解google
Chrome浏览器（理论篇） 详解…

源码如下：

 

jquery中的事件 通过prepend添加的情节可以赢得匹配事件不

你好!
1.
对此prepend()添加的因素，或者动态变化的要素，一般选择live()举行事件指定；2.
对此元素的toggle()事件，使用live()绑定事件时，可以透过先为其指定click()事件，然后在click()事件中装置该因素的toggle()事件，最终只要自动触发四回click()事件就足以了。那些进程差不离是如此的：live()—>指定click()事件—>完成该因素的toggle()事件的逻辑(此时click()事件不能够触发toggle()中的任何函数)—>trigger(“click”)，触发toggle()中的函数。
$(“#list .message input”).live(“click”,function(){ $(this).toggle(
function(){
$(this).parent(this).after(“<div>评论列表</div>”); },
function(){ $(this).parent(this).next(this).remove(); }
).trigger(‘click’);});
 

 

[java] view
plain copy

jquery 事件中的事件问题

试一下在tr的轩然大波里加一个断定,看<a>有没有大旨.有就重返.
 

jQuery中的事件，第四章jQuery事件 1.加载DOM
jQuery中，在$(document).ready()方法内注册的轩然大波，只要DOM就绪就会被实践，此时也许元素的关…

 

 

<!doctype html>
<html lang=”en-US”>
<head>
  <meta http-equiv=”Content-Type”
content=”text/html;charset=utf-8″>
  <title>Input Autocomplete Suggestions Demo</title>
  <link rel=”stylesheet” type=”text/css” media=”all”
href=”style.css”>
  <script type=”text/javascript”
src=”js/codedata.js”></script>
  <script type=”text/javascript”
src=”js/jquery-1.9.1.min.js”></script>
  <script type=”text/javascript”
src=”js/jquery.autocomplete.min.js”></script>
  <script type=”text/javascript”
src=”js/currency-autocomplete.js”></script>
</head>

  1. <%@ page language=”java” import=”java.util.*” contentType=”text/html; charset=utf-8″%>  
  2. <%  
  3.    String path = request.getContextPath();  
  4.    String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;  
  5. %>  
  6. <html>  
  7.     <head>  
  8.         <!– Page title –>  
  9.         <title>imooc – Login</title>  
  10.         <!– End of Page title –>  
  11.         <!– Libraries –>  
  12.         <link type=”text/css” href=”css/login.css” rel=”stylesheet” />      
  13.         <link type=”text/css” href=”css/smoothness/jquery-ui-1.7.2.custom.html” rel=”stylesheet” />     
  14.         <script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>  
  15.         <script type=”text/javascript” src=”js/easyTooltip.js”></script>  
  16.         <script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js”></script>  
  17.         <!– End of Libraries –>   
  18.     </head>  
  19.     <body>  
  20.     <div id=”container”>  
  21.         <div class=”logo”>  
  22.             <a href=”#”><img src=”logo.png” alt=”” /></a>  
  23.         </div>  
  24.         <div id=”box”>  
  25.             <form action=”dologin.jsp” method=”post”>  
  26.             <p class=”main”>  
  27.                 <label>用户名: </label>  
  28.                 <input name=”username” value=”” />   
  29.                 <label>密码: </label>  
  30.                 <input type=”password” name=”password” value=””>    
  31.             </p>  
  32.             <p class=”space”>  
  33.                 <input type=”submit” value=”登录” class=”login” style=”cursor: pointer;”/>  
  34.             </p>  
  35.             </form>  
  36.         </div>  
  37.     </div>  
  38.     </body>  
  39. </html>  

<body>
  <div id=”w”>
    <div id=”content”>
      <h1>World Currencies Autocomplete Search</h1>
      <p>Just start typing and results will be supplied from the
JavaScript. Check out <a
href=”
Autocomplete</a> on Github.</a></p>
      
      <div id=”searchfield”>
        <form><input type=”text” name=”currency”
class=”biginput” id=”autocomplete”></form>
      </div><!– @end #searchfield –>
      
      <div id=”outputbox”>
        <p id=”outputcontent”>Choose a currency and the results
will display here.</p>
      </div>
    </div><!– @end #content –>
  </div><!– @end #w –>
</body>
</html>

对登录的响应 dologin.jsp:

 

 

 

 

切实源码地址  

[java] view
plain copy

 

  1. <%@ page language=”java” import=”java.util.*” contentType=”text/html; charset=utf-8″%>  
  2. <%  
  3.   String path = request.getContextPath();  
  4.   String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;  
  5.   String username =””;  
  6.   String password =””;  
  7.   request.setCharacterEncoding(“utf-8”);//避免汉语乱码  
  8.     
  9.   username = request.getParameter(“username”);  
  10.   password = request.getParameter(“password”);  
  11.     
  12.   //即使用户和密码都等于admin,则登录成功  
  13.   if(“admin”.equals(username)&&”admin”.equals(password))  
  14.   {  
  15.      session.setAttribute(“loginUser”, username);  
  16.      request.getRequestDispatcher(“login_success.jsp”).forward(request, response);  
  17.        
  18.   }  
  19.   else  
  20.   {  
  21.      response.sendRedirect(“login_failure.jsp”);  
  22.   }  
  23. %>  

那里注意的是：

 

 
 request传送音信需求设置编码格局，request.setCharacterEncoding(“utf-8”);

 

   request.getRequestDispatcher("login_success.jsp")取得一个RequestDispatcher，一个请求分发器对象，它的方法forward(request,response)作用是将请求转发到login_success.jsp，request封装了请求信息，response封装了响应信息。注意是forward方式，这种方式只转发请求，不产生新的request对象。如下图：

澳门金沙国际 101

   成功界面：login_success.jsp

[java] view
plain
copy

 

  1. <%@ page language=”java” import=”java.util.*” contentType=”text/html; charset=utf-8″%>  
  2. <%  
  3.    String path = request.getContextPath();  
  4.    String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;  
  5. %>  
  6. <html>  
  7.     <head>  
  8.         <!– Page title –>  
  9.         <title>imooc – Login</title>  
  10.         <!– End of Page title –>  
  11.         <!– Libraries –>  
  12.         <link type=”text/css” href=”css/login.css” rel=”stylesheet” />      
  13.         <link type=”text/css” href=”css/smoothness/jquery-ui-1.7.2.custom.html” rel=”stylesheet” />     
  14.         <script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>  
  15.         <script type=”text/javascript” src=”js/easyTooltip.js”></script>  
  16.         <script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js”></script>  
  17.         <!– End of Libraries –>   
  18.     </head>  
  19.     <body>  
  20.     <div id=”container”>  
  21.         <div class=”logo”>  
  22.             <a href=”#”><img src=”logo.png” alt=”” /></a>  
  23.         </div>  
  24.         <div id=”box”>  
  25.         <%  
  26.             String loginUser = “”;  
  27.             if(session.getAttribute(“loginUser”) != null) {  
  28.                 loginUser = session.getAttribute(“loginUser”).toString();  
  29.             }  
  30.         %>  
  31.               
  32.             欢迎您<font color = “red”> <%=loginUser %></font>,登陆成功！  
  33.         </div>  
  34.     </div>  
  35.     </body>  

  36. </html>  

    login_failure.jsp:

[java] view
plain
copy

 

  1. <%@ page language=”java” import=”java.util.*” contentType=”text/html; charset=utf-8″%>  
  2. <%  
  3.    String path = request.getContextPath();  
  4.    String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;  
  5. %>  
  6. <html>  
  7.     <head>  
  8.         <!– Page title –>  
  9.         <title>imooc – Login</title>  
  10.         <!– End of Page title –>  
  11.         <!– Libraries –>  
  12.         <link type=”text/css” href=”css/login.css” rel=”stylesheet” />      
  13.         <link type=”text/css” href=”css/smoothness/jquery-ui-1.7.2.custom.html” rel=”stylesheet” />     
  14.         <script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>  
  15.         <script type=”text/javascript” src=”js/easyTooltip.js”></script>  
  16.         <script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js”></script>  
  17.         <!– End of Libraries –>   
  18.     </head>  
  19.     <body>  
  20.     <div id=”container”>  
  21.         <div class=”logo”>  
  22.             <a href=”#”><img src=”logo.png” alt=”” /></a>  
  23.         </div>  
  24.         <div id=”box”>  
  25.             登录失利！检查用户或者密码  
  26.             <a href=”login.jsp”>重回登录界面</a>  
  27.         </div>  
  28.     </div>  
  29.     </body>  
  30. </html>  

相关文章