必威-必威-欢迎您

必威,必威官网企业自成立以来,以策略先行,经营致胜,管理为本的商,业推广理念,一步一个脚印发展成为同类企业中经营范围最广,在行业内颇具影响力的企业。

对登录的响应 dologin.必威jsp,具体源码地址  

2019-10-03 23:16 来源:未知

源码如下:

对登陆的响应 dologin.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库,它是多个由 John Resig 创立于二〇〇七年10月的开源项目。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 创立于二〇〇五年6月的开源项目。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选择器

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(选择第3个要素)

必威 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

看到这些就回想匈牙利(Hungary)语单词里的,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浏览器(理论篇) 详解...

在各样相配成分的外界插入新因素的点子

 本文为我们介绍下在每一种相配成分的表面插入新因素的艺术,下边有个科学的身体力行,感兴趣的恋人能够仿效下

一、方法 

 

wrap :把全部相配的因素,用任何因素的结构化包裹起来 

 

wrapAll : 把持有相称的因素,用单个成分包裹起来 

 

wrapInner : 把相配成分的子类用html结构包裹起来 

 

二、实例 

 

(1)wrap 

代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title>Insert title here</title> 

<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script> 

<script type="text/javascript"> 

$(function() { 

$("div a").wrap("<div id='id'></div>"); 

}); 

</script> 

</head> 

<body> 

<div> 

<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> 

</div> 

</body> 

</html> 

 

firebug展现结果: 

 代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title>Insert title here</title> 

<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript"> 

<script type="text/javascript"> 

</head> 

<body> 

<div> 

<div id="id"> 

<a>liuxingyu</a> 

</div> 

<div id="id"> 

<a>liuxingyu</a> 

</div> 

<div id="id"> 

<a>liuxingyu</a> 

</div> 

<div id="id"> 

<a>liuxingyu</a> 

</div> 

</div> 

</body> 

</html> 

 

(2)wrapAll 

代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title>Insert title here</title> 

<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script> 

<script type="text/javascript"> 

$(function() { 

$("div a").wrapAll("<div id='id'></div>"); 

}); 

</script> 

</head> 

<body> 

<div> 

<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> 

</div> 

</body> 

</html> 

 

firebug展现结果: 

代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title>Insert title here</title> 

<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript"> 

<script type="text/javascript"> 

$(function() { 

$("div a").wrapAll("<div id='id'></div>"); 

}); 

</script> 

</head> 

<body> 

<div> 

<div id="id"> 

<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> 

</div> 

</div> 

</body> 

</html> 

 

(3)wrapInner 

代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title>Insert title here</title> 

<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript"> 

<script type="text/javascript"> 

$(function() { 

$("div").wrapInner("<div id='id'></div>"); 

}); 

</script> 

</head> 

<body> 

<div> 

<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> 

</div> 

</body> 

</html> 

 

firebug显示结果: 

代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title>Insert title here</title> 

<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript"> 

<script type="text/javascript"> 

$(function() { 

$("div").wrapInner("<div id='id'></div>"); 

}); 

</script> 

</head> 

<body> 

<div> 

<div id="id"> 

<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> 

</div> 

</div> 

</body> 

</html> 

 

本文为大家介绍下在各种相称成分的外表插入新因素的艺术,上边有个准确的示范,感兴趣的相恋的人...

 

 

jquery 事件中的事件难题

试一下在tr的风云里加几个推断,看<a>有未有大旨.有就重回.  

jQuery中的事件,第四章jQuery事件 1.加载DOM jQuery中,在$(document).ready()方法内注册的平地风波,只要DOM就绪就可以被实行,此时大概成分的关...

前段时间用nodeclub达成股票(stock)的输加入关贸总协定协会键字自动补全股票(stock)消息举办检索效果,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用别样插件,最后选项接纳autocomplete.js,控件轻松用着方便。留下记录

  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>  

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');});  

实际源码地址  

 

<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>

  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. %>  
TAG标签:
版权声明:本文由必威发布于必威-操作系统,转载请注明出处:对登录的响应 dologin.必威jsp,具体源码地址