1. jQuery定义和特点

1.1 jQuery 入门

对 JavaScript 进行了封装，降低了使用JavaScript的难度，可以大幅提高开发效率（Write less, do more）

jQuery 广泛使用的是 1.x 版本，兼容 ie678

jQuery 实例：隔行变色（页面结构）

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">.datalist{border:1px solid #007108;font-family:"微软雅黑";border-collapse:collapse;background-color:#d9ffdc;font-size:14px;}.datalist th{border:1px solid #007108;background-color:#00a40c;color:#FFFFFF;padding: 4px 12px;text-align:center;}.datalist td{border:1px solid #007108;text-align: center;padding: 4px 10px;}.datalist tr.altrow{background-color:#a5e5aa;}</style><script type="application/javascript" src="../js/jquery-1.9.1.js"></script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable"><tr><th scope="col">Name</th><th scope="col">Class</th><th scope="col">Birthday</th><th scope="col">Constellation</th><th scope="col">Mobile</th></tr><tr>                   <!-- 奇数行 --><td>isaac</td><td>W13</td><td>Jun 24th</td><td>Cancer</td><td>1118159</td></tr><tr>       <!-- 偶数行 --><td>fresheggs</td><td>W610</td><td>Nov 5th</td><td>Scorpio</td><td>1038818</td></tr><tr>                  <!-- 奇数行 --><td>girlwing</td><td>W210</td><td>Sep 16th</td><td>Virgo</td><td>1307994</td></tr><tr>        <!-- 偶数行 --><td>tastestory</td><td>W15</td><td>Nov 29th</td><td>Sagittarius</td><td>1095245</td></tr><tr>                 <!-- 奇数行 --><td>lovehate</td><td>W47</td><td>Sep 5th</td><td>Virgo</td><td>6098017</td></tr>
</table>
</body>
</html>
<!--  区分HTML注释和CSS注释
-->

script代码：

// JavaScript 形式
/** window.onload = function (){var arr = document.getElementsByTagName("tr");for (var i = 0; i < arr.length; i++) {if (i % 2 == 0) {arr[i].className = "altrow";}}} */// jQuery形式
$(function () {$("tr:even").addClass("altrow")
})

$(func)：

相当于 window.οnlοad=function(){}
功能比window.onload更强大
- window onload一个页面只能写一个，但是可以写多个$() 而不冲突
- window onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早

$(selector)：选择器

jQuery的基本语法： $(selector).action

获取页面内容：$(selector)
操作页面的内容：action
- 控制页面样式
- 访问和操作DOM元素
- 事件处理功能
- 动画功能
- Ajax功能（jQuey不仅封装了JavaScript，还封装了Ajax）

1.2 jQuery对象和DOM对象

DOM对象：直接使用 JavaScript 获取的节点对象

className、innerHTML、value

jQuery对象：使用 jQuery 选择器获取的节点对象

addClass()、html()、val()

DOM对象 ----> jQuery对象： $(DOM对象)

jQuery对象 ----> DOM对象： jQuery对象[index] （使用索引）

2. jQuery 选择器

jQuery提供了丰富的选择器功能，针对于 JavaScript 的 getElementById( )、getElementsByName( )、getElementsByTagName( )，强大的多

2.1 基本选择器

标签选择器： $("元素标签(例如 p )")
ID选择器： $("#id")，选择某个标签内部的id： $("p#id")
类选择器： $(".class")， $("h2.class")
通配（*）选择器：$("*")
并集选择器：$("elem1, elem2, elem3)
后代（爷爷的儿子，爷爷的儿子的儿子等）选择器：$("ul li")
父子选择器：$("ul>li")
后面第一个next兄弟元素：$("prev + next")

例如 $(“h2+p”) 代表所有 h2 标签后面的第一个兄弟p 元素，如果 h2 和 p 之间有其他元素，其他元素也不会选中
后面所有的next兄弟元素：$("prev ~ next")

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>基本选择器</title><style type="text/css">.myClass{background-color: aqua;}</style><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><h3 id="h31">JSP</h3><span>span</span><p> JSP全名为Java Server Pages，中文名叫java服务器页面，其根本是一个简化的<span>Servlet</span>设计，它[1]  是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页<em><span>HTML</span></em>（标准通用标记语言的子集）文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件，后缀名为(*.jsp)。 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。</p><h3 id="h32" class="red1">Servlet</h3><p>Servlet（Server Applet）是Java Servlet的简称，是为小服务程序或服务连接器，用Java编写的服务器端程序，主要功能在于交互式地浏览和修改数据，生成动态Web内容。</p><p class="red1">狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。Servlet运行于支持Java的应用服务器中。从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器。</p><div><p>div p</p></div><span>span</span><p class="red1">狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。Servlet运行于支持Java的应用服务器中。从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器。</p></body>
</html>

关键的jQuery操作代码：

$(function(){//•标签选择器 $("a")   $("h3").addClass("myClass");$("p").addClass("myClass");//•ID选择器 $("#id")     $("p#id") $("#h31").addClass("myClass");//•类选择器 $(".class")    $("h2.class") $(".red1").addClass("myClass");//•通配选择器 $("*") $("*").addClass("myClass");//•并集选择器$("elem1,elem2,elem3") $("h3, p").addClass("myClass");//•后代选择器$(ul li) $("span").addClass("myClass");$("p span").addClass("myClass");//•父子选择器 $(ul>li)  $("p>span").addClass("myClass");//•后面第一个next兄弟元素 prev + next $("h3+p").addClass("myClass");//•后面所有的兄弟元素 prev ~ next $("h3~p").addClass("myClass");
});

2.2 属性选择器

使用 [] 选择属性

匹配 包含给定属性（ [attribute] ）的元素：$("元素[attribute]")
复合属性选择器，需要同时满足多个属性：$("元素[attribute1][attribute2]")
匹配给定的属性是某个特定值（ [attribute = value] ）的元素：$("元素[attribute=value]")
匹配所有属性不等于特定值（ [attribute != value] ）的元素：$("元素[attribute!=value]")
匹配给定的属性是以某些值开始 （ [attribute ^= value] ）的元素：$(“元素[attribute^=value]”)`
匹配给定的属性是以某些值结尾 （ [attribute =value]）的元素：= value] ）的元素：=value]）的元素：(“元素[attribute$=value]”)`
匹配给定的属性包含某些值的元素：$(“元素[attribute*=value]”)`

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>属性选择器</title><style type="text/css">.myClass{background-color: aqua;}</style><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><ul  id="sxt"><li><a href="http://www.bjsxt.com/score.html">积分管理制度</a><li><a href="http://www.bjsxt.com/dorm">宿舍管理制度</a><li><a href="http://www.bjsxt.com/mobile">班级手机入袋制度</a><li><a href="http://www.bjsxt.com/flag">班级流动红旗制度</a><li><a href="http://www.bjsxt.com/film">周末经典电影剧场</a><ul id="film">                                        <li><a href="film-1.html">乱世佳人</a></li><li><a href="film-2.html" title="阿郎的故事">阿郎的故事</a></li><li id="film3"><a href="film-3.html" >阿甘正传</a></li><li><a href="http://www.bjsxt.com/film/film-4.htm" title="鲁冰花">鲁冰花</a></li><li><a name="film-5.htm" title="太行山上">太行山上</a></li><li>无问西东</li></ul></li>                </ul></body>
</html>

关键的jQuery操作代码：

window.onload=function(){//•[attribute] 匹配包含给定属性的元素$("a").addClass("myClass");$("a[href]").addClass("myClass");   // 所有包含 href 属性的 a 标签//•[attribute1][attribute2] 复合属性选择器，需要同时满足多个属性$("a[href][title]").addClass("myClass");  // 包含 href 和 title 属性的 a 标签//•[attribute=value] 匹配给定的属性是某个特定值的元素$("a[href='http://www.bjsxt.com/score.html']").addClass("myClass");//•[attribute!=value] 匹配所有属性不等于特定值的元素$("a[href!='http://www.bjsxt.com/score.html']").addClass("myClass");//•[attribute^=value] 匹配给定的属性是以某些值开始的元素$("a[href^=http]").addClass("myClass");//•[attribute$=value] 匹配给定的属性是以某些值结尾的元素$("a[href$=htm]").addClass("myClass");//•[attribute*=value] 匹配给定的属性是以包含某些值的元素$("a[href*=film]").addClass("myClass");
}

2.3 位置选择器

针对整个页面而言的位置选择器
- 获取第一个元素： :first
  
  （例如 $("p:first") 代表整个页面的第一个 p 元素）
- 获取最后一个元素： :last
- 匹配所有索引值为奇数 的元素（索引从 0 开始）： :odd
  
  （例如 $("p:odd") 代表整个页面的索引为奇数的 p 元素）
- 匹配所有索引值为偶数 的元素（索引从 0 开始）： :even
- 匹配一个等于给定索引值的元素（索引从 0 开始）： eq(n)
  
  （例如 $("p:eq(5)") 代表整个页面的索引为5的 p 元素）
- 匹配所有大于给定索引值的元素（索引从 0 开始）： gt(n)
- 匹配所有小于给定索引值的元素（索引从 0 开始）： lt(n)
针对上级标签而言的（所有有父子结构的父级标签）
- 匹配每个标签的第一个子元素： :first-child
  
  （例如 $("p:first-child") 代表每个有**父子结构(例如div中有p元素)**的元素的第一个子元素 p）
- 匹配每个标签的最后一个子元素： :last-child
- 针对每个标签，如果某个元素是其唯一的子元素，将会被匹配： :only-child
- 匹配每个标签的第 N 个子元素（索引从 1 开始）： :nth-child(n)
  
  :nth-child(xn+y) 此时的 n 从 0 开始 3n+1 则是 1, 4, 7,
- 匹配每个标签下的奇偶元素： :nth-child(odd|even)

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>位置选择器</title><style type="text/css">div{border: 1px solid red;}.myClass{background-color: aqua;}</style><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><div><p>1. JavaSE</p><p>2. Oracle</p></div><div><p>3. HTML/CSS/JS</p><p>4. jQuery/EasyUI</p><p>5. JSP/Servlet/Ajax</p></div><div><p>6. SSM</p><p>7. SpringBoot/SpringCloud/SpringData</p><p>8. Maven/Linux/p><p>9. Redis/Solr/Nginx</p><p>10. SpringBoot/SpringCloud/SpringData</p>        <p>10. SpringBoot/SpringCloud/SpringData</p>   <p>10. SpringBoot/SpringCloud/SpringData</p>   </div><div><p>11. 就业指导</p></div></body>
</html>

关键的jQuery操作代码：

$(function(){// ====================针对整个页面而言的位置选择器====================//•:first  获取第一个元素$("p:first").addClass("myClass");//•:last  获取最后一个元素$("p:last").addClass("myClass");//•:odd 匹配所有索引值为奇数的元素，从 0 开始计数  $("p:odd").addClass("myClass");//•:even匹配所有索引值为偶数的元素，从 0 开始计数 $("p:even").addClass("myClass");//•:eq(n) 匹配一个给定索引值的元素 equals，从 0 开始计数 $("p:eq(5)").addClass("myClass");//•:gt(n) 匹配所有大于给定索引值的元素 great than gt，从 0 开始计数 $("p:gt(5)").addClass("myClass");//•:lt(n) 匹配所有小于给定索引值的元素 less than lt，从 0 开始计数 $("p:lt(5)").addClass("myClass");// ====================针对上级标签而言的位置选择器====================//•:first-child  匹配每个标签的第一个子元素$("p:first-child").addClass("myClass");//•:last-child   匹配每个标签的最后一个子元素  $("p:last-child").addClass("myClass");//•:only-child   针对每个标签，如果某个元素是父元素中唯一的子元素，将会被匹配$("p:only-child").addClass("myClass");//•:nth-child(n)   匹配每个标签下的第N个子元素$("p:nth-child(2)").addClass("myClass");// :nth-child(odd|even)    匹配每个标签下的第奇偶数个元素$("p:nth-child(odd)").addClass("myClass");$("p:nth-child(even)").addClass("myClass");// :nth-child(xn+y) $("p:nth-child(3n+2)").addClass("myClass");  // 3n+1  n分别取值0，1，2，3....     1，4，7，10
});

2.4 表单选择器

针对表单项的选择器
- :text、 :password、 :radio、 :checkbox、 :hidden、 :file、 :submit
- :input 匹配所有 input、 textarea、 select、 button 元素
针对表单项状态的选择器
- :selected、 :checked、 :enabled、 :disabled
- :hidden、 :visable、 :not

注意： $(“input”) 和 $(“:input”) 的区别

$(“input”)：标签选择器，只匹配 input 标签
$(“:input”)：匹配所有 input、 textarea、 select、 button 元素

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单选择器</title><style type="text/css">.myClass{background-color: aqua;}</style><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><h3>注册用户</h3><form action="doRegister.jsp" method="get"><table border="1" width="40%">                     <tr><td>用户名</td><td><input  type="hidden" name="username" value="请输入姓名" /><input  type="text" name="username" id="username" value="请输入姓名" disabled="disabled"/></td></tr><tr><td>密&nbsp;码</td><td><input  type="password" name="pwd" id="pwd" /></td></tr><tr><td>确认密码</td><td><input type="color" name="repwd" id="repwd"/></td></tr><tr><td>性别</td><td><input  type="radio" name="sex" value="男"/>男<input  type="radio" name="sex" checked="checked" value="女"/>女</td></tr><tr><td>年龄</td><td><input type="text" min="6" max="30"   name="age" id="age" value="18"/></td></tr><tr><td>电子邮箱</td><td><input type="text" name="email" id="email"/></td></tr><tr><td>爱好</td><td><input  type="checkbox" name="hobby" value="music"/>音乐<input  type="checkbox" name="hobby" value="sports" checked="checked"/>体育<input  type="checkbox" name="hobby" value="art" checked/>美术</td></tr><tr><td>身份</td><td><select name="professional" multiple="multiple"><option value="1">工人</option><option value="2" selected="selected">农民</option><option value="3" selected="selected">解放军</option><option value="4">知识分子</option></select></td></tr><tr><td>简历</td><td><textarea name="resume" rows="5" cols="40">请输入简历</textarea></td></tr><tr><td>照片</td><td><input type="file" name="photo" id="photo"/></td></tr><tr><td colspan="2"  align="center"><input  type="submit" value="提交" disabled="disabled"/><input type="reset" value="重置"/><input type="button" value="返回" onclick="alert('back')"/><button onclick="confirm('返回2')">返回2</button></td></tr></table></form></body>
</html>

关键的jQuery操作代码：

$(function(){//•:text   :password  :radio  :checkbox  :hidden  :file  :submit //var arr = $("input[type=text]");//var arr = $("input[type=password]");//var arr = $(":text")//var arr = $(":password");//var arr = $("input[type=color]");//var arr = $(":checkbox");//:input  匹配所有 input, textarea, select 和 button 元素 //var arr = $("input");//var arr = $("form");  // 拿到整个表单项//var arr = $(":input");//var arr = $("input,select,textarea,button");//•:selected  :checked  :enabled  :disabled //var arr = $(":selected");//var arr = $(":checked");//var arr = $("input:checked");//var arr = $(":disabled");var arr = $(":enabled");    // 只针对于表单项启用的元素//•:hidden  :visible  :not //var arr = $(":hidden");   // 针对于所有的元素 例如 head, meta, title 等//var arr = $("input:hidden");//var arr = $(":input:visible");//var arr = $("input:not(:text):not(:password):not(:radio)")  // 所有的 input，除了 text类型、password类型、 radio类型的 for(var i=0;i<arr.length;i++){console.info(arr[i])}
});

2.5 内容选择器

匹配所有不包含子元素或者文本的空元素： :empty
匹配含有子元素或者文本的元素： :parent
匹配含有包含给定元素的元素： :has 【 $(“div:has(‘p’)”)，查找内容中有p元素的div元素】
匹配包含给定文本的元素： :contains

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><table border="1"><tr><td>Value 1</td><td></td></tr><tr><td>Value 2</td><td></td></tr></table><div>John Resig</div><div>George Martin</div><div>Malcom John Sinclair</div><div>J. Ohn</div><div><p>Hello</p></div><div>Hello again!</div><h1>Header 1</h1><p>Contents 1</p><h2>Header 2</h2><p>Contents 2</p></body>
</html>

关键的jQuery操作代码：

//•:empty  匹配所有【不包含】子元素或者文本的空元素
$("td:empty").css("background-color","yellow");//•:parent 匹配【含有】子元素或者文本的元素
$("td:parent").css("background-color","blue");//•:has  匹配含有选择器所匹配的元素的元素
$("div:has(p)").css("background-color","blue");
//•:contains  匹配包含给定文本的元素
$("div:contains('John')").css("background-color","yellow");//:header:匹配如 h1, h2, h3之类的标题元素
$(":header").css("background-color","green");

3. 事件和动画

3.1 事件 event

绑定事件
- 方法1： click()、mousemove()、mouseout()、mouseover()等，直接使用函数名
- 方法2： bind(“函数名”, function() { })
解除绑定
- unbind()：不传参表示解除所有事件，传参表示解除特定的事件

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><div style="background-color: #7FFFD4;">div1</div><p></p><div style="background-color: #7FFFD4;" >div2</div><p></p><div style="background-color: #7FFFD4;">div3</div><p></p><input id="btn1" type="button" value="绑定" /><input id="btn2" type="button" value="解除绑定" /></body>
</html>

关键的jQuery操作代码：

$(function(){// 给按钮 btn1 绑定单击click事件$("#btn1").bind("click", function() {// 给所有的 div 绑定 mouseover 事件$("div").mouseover(function() {// this：当前mouseover的div，但这是一个 DOM对象，所以使用 $() 转为 jQuery对象$(this).css("background-color", "blue");});/** 也可以使用 bind 函数$("div").bind("mouseover", function() {$(this)..css("background-color", "blue");})*/// 给所有的 div 绑定 mouseout 事件$("div").mouseout(function() {$(this).css("background-color", "#7FFFD4");});})// 给按钮 btn2 绑定单击 click事件$("#btn2").bind("click", function() {$("div").unbind("mouseout")})// 使用代码点击 btn1按钮$("#btn1").click();
})

3.2 动画 animate

显示隐藏： show()、 hide() 【改变 width、height、opacity】
淡入淡出： fadeIn()、fadeOut() 【改变 opacity】
滑入滑出： slideUp()、 slideDown() 【改变 height】

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><input  type="button" value="立刻隐藏" onclick="hideElem()"/><input  type="button" value="立刻显示" onclick="showElem()"/><input  type="button" value="3秒隐藏" onclick="hideElem()"/><input  type="button" value="3秒显示" onclick="showElem()"/>|<input  type="button" value="3秒淡出" onclick="hideElem()"/><input  type="button" value="3秒淡入" onclick="showElem()"/>|<input  type="button" value="3秒滑入" onclick="hideElem()"/><input  type="button" value="3秒滑出" onclick="showElem()"/><br><img id="img1"  src="img/IDEA.jpg"  width="40%"/><img id="img2"  src="img/IDEA.jpg"  width="40%"/><div id="div1" style="border: 1px solid red;background-color:green;width:300px; height:100px;"></div></body>
</html>

关键的jQuery操作代码：

function hideElem() {$("img").hide();$("div").hide();// 可以添加动画时间$("img").hide(3000); // 3秒的隐藏时间$("div").fadeIn(3000);$("div").slideUp(4000);
}function showElem() {$("img").show();$("div").show();
}

4. DOM 编程

4.1 操作文本

对应 innerHTML： html() 取值、 html(txt) 赋值
- 获取时：获取完整的内容，如果有标签也会获取到
- 赋值时：如果有标签，自动对标签进行转换处理
对应 innerText：text() 取值、text(txt) 赋值【赋值时不会处理标签，直接显示】
- 获取时：只会获取文本信息
- 赋值时：如果有标签，不会处理标签，原样显示
对应 value：val() 取值、 val(txt) 赋值

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><div id="div1" style="border:1px solid red; background-color: aqua;"><h3>测试操作文本</h3></div><div id="div2" style="border:1px solid red;background-color:bisque;">1</div>     <input id="username" type="text" value="zhangsan" /><br><input type="button" value="func1" onclick="func1()" /><input type="button" value="func2" onclick="func2()" /></body>
</html>

关键的jQuery操作代码：

function func1() {var txt = $("#div1").html();  // <h3>测试操作文本</h3>alert(txt);// 写到第二个div中$("#div2").html(txt);
}function func2() {var val = $("#username").val();$("#username").val(val+'123')
}

4.2 操作属性

获取属性的值： attr(attr)
给指定属性赋值： attr(attr, val)
去掉指定属性：removeAttr(attr)

特殊的：针对 checked， selected， readonly， disabled，使用 prop() 返回值是 true 和 false，更加方便操作

获取属性的值：prop(prop)
给指定属性赋值： prop(prop, val)
对符合条件的元素逐个处理： each(index)

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><a id="a1"  href="http://www.taobao.com" target="_blank">淘宝</a><input type="button" value="改变超链接" onclick="changeA()"/><h3>注册用户</h3><form action="doRegister.jsp" method="get"><table border="0" width="40%">                      <tr><td>手机号码</td><td><input  type="text"  name="username" id="username" value="请输入姓名"/></td></tr><tr><td>密&nbsp;码</td><td><input  type="password" name="pwd" id="pwd" /></td></tr><tr><td>确认密码</td><td><input type="password" name="repwd" id="repwd"/></td></tr><tr><td>&nbsp;</td><td><input type="checkbox" name="agreement" id="agreement" checked="checked" onchange="changeSubmit()"/>我同意该协议</td></tr><tr><td colspan="2"  align="center"><input id="sub1" type="submit" disabled="disabled"  value="提交"  /><input type="reset" value="重置"/></td></tr></table></form><hr /><img  src="img/img1.jpg"/><img  src="img/img2.jpg"/><img  src="img/img3.jpg"/><img  src="img/img4.jpg"/><img  src="img/img5.jpg"/><input  type="button" value="改变图片" onclick="changeImg()"/></body>
</html>

关键的jQuery操作代码：

function changeA() {// 改变超链接的文本： 淘宝 ---- 京东$("#a1").html("京东");// 改变超链接的 href 属性： http://www.taobao.com ---- http://www.jd.com$("#a1").attr("href", "http://www.jd.com")// 改变超链接的 target 属性： _blank ----  _self$("#a1").attr("target", "_self")
}function changeSubmit() {// 获取复选框的值var flag = $("#agreement").prop("checked");  // 使用 prop() 返回值为 true和 falseif (flag) {$("#sub1").prop("disabled", false);} else {$("#sub1").prop("disabled", true);}
}function changeImg() {// 使用 each，函数里如果有参数，则代表为 索引$("img").each(function(index) {$(this).attr("src", "img/img" + (5 - index) + ".jpg");});
}

4.3 操作元素

添加子元素（末尾）：append()、 appendTo()

$(“#div1”).append(newElem)； newElem.appendTo(“#div1”) 是相同的操作
添加子元素（前置）：prepend()、 prependTo()
添加平级元素（前面）： insertBefore()、 before()
添加平级元素（后面）： insertAfter()、 after()
替换某个节点： replaceWith()、 replaceAll()
删除元素：remove()
删除子元素：empty()

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{font-size:16px;border:1px solid #003a75;margin:5px;}.myClass{background-color:#7FFFD4;}</style><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><div id="div1"><p id="p1">1. JavaSE</p><p>2. Oracle</p></div><div>            <p>3. HTML/CSS/JS</p><p>4. jQuery/EasyUI</p><p>5. JSP/Servlet/Ajax</p></div><div><p>6. SSM</p><p>7. SpringBoot/SpringCloud/SpringData</p><p id="p8">8. Maven/Linux</p><p>123<span>9. Redis/Solr/Nginx</span></p><p>10. SpringBoot/SpringCloud/SpringData</p></div><div><p>11. 就业指导</p></div></body>
</html>

关键的jQuery操作代码：

$(function() {// 准备一个新的段落var newDiv = $("<div><p>口才训练课</p></div>");  // !!!!创建新元素，jQuery对象！！！// 添加$("#div1").append(newDiv);  // newDiv.appendTo("#div1")    子元素添加$("div:first").after(newDiv);  // 平级元素添加// 替换$("div:last").replaceWith(newDiv);  // 用newDiv 替换最后一个div// 删除$("div:last").remove(); // 删除元素$("div:last").empty(); // 删除子元素// 间接查询！！！!!// 平级元素  first()  last()  next()  nextAll()   prev()   prevAll()  siblings()所有的兄弟  has()// 上级元素：parent()  parents("具体到某个父类元素")// 下级元素：children()   find("标签名")
})

4.4 简单实例

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><h3>注册用户</h3><form action="doRegister.jsp" method="get"><table id="table1" border="1" width="40%">                      <tr><td>用户名</td><td><input  type="text" name="username" id="username" value="请输入姓名"/></td></tr><tr><td>照片 </td><td><input type="file" name="photo" id="photo"/><input type="button"  value="添加"  onclick="addFileItem()"/> </td>                  </tr><tr id="lastrow"><td colspan="2"  align="center"><input  type="submit" value="提交" /><input type="reset" value="重置"/>                        </td>                 </tr></table></form></body>
</html>

关键的jQuery操作代码：

function addFileItem() {var newTr = $('<tr><td> &nbsp; </td>' + '<td>' + '<input type="file" name="photo" id="photo"/>' + '<input type="button"  value="删除"  οnclick="delFileItem(this)"/>' +'</td></tr>')$("#lastrow").before(newTr);
}function delFileItem(obj) { // obj为 DOM对象$(this).parents("tr").remove();
}

5. 操作CSS

5.1 直接操作CSS样式

获取css样式： css()
设置css样式： css(css, val)
同时设置多个css样式： css({css1:val1, css2:val2})

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">li{font-size: 12px;color: #ffffff;background-color:gray;border-radius:5px;height: 33px;width:104px;text-align: center;line-height:38px;list-style:none;float:left;}</style><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><ul><li style="background-color: red; color:yellow; font-size: 16px;">前端技术</li><li>编程技术</li><li>数据库</li> </ul></body>
</html>

关键的jQuery操作代码：

$(function() {$("li").mouseover(function() {$(this).css({"background-color" : "red","color" : "yellow","font-size" : "16px"});});$("li").bind("mouseout", function() {$(this).css("background-color", "gray").css("color", "#fff").css("font-size", "12px");});
})

5.2 使用类样式

判断是否具有类样式： hasClass(class)
追加类样式： addClass(class) 注意不是覆盖
删除类样式： removeClass(class)
切换类样式： toggleClass(class) 如果有就去掉，没有就加上

将样式提取为：

.over {"background-color" : "red","color" : "yellow","font-size" : "16px"
}.out {"background-color" : "gray","color" : "#fff","font-size" : "1px"
}

关键的jQuery操作代码：

$(function() {$("li").mouseover(function() {$(this).addClass("over").removeClass("out");});$("li").bind("mouseout", function() {$(this).addClass("out");$(this).removeClass("over");});
})

6. 表单验证

为了降低服务器端负担，所以在前端进行表单验证，保证数据的有效性。表单验证通过后还可以进行服务器验证（JSP）

6.1 基本表单验证

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><table  id="center" border="0" cellspacing="0" cellpadding="0"><!-- 表单提交到的jsp后面进行学习 --><form action="demo.jsp" method="post" name="myform" onsubmit="return checkForm()" > <!-- return必须有 --><tr><td >您的姓名：</td><td><input id="user" type="text" onblur="checkUser()"/><span id="userError"></span></td></tr><tr><td >输入密码：</td><td><input id="pwd" name="pwd" type="password"/></td></tr><tr><td >再输入一遍密码：</td><td><input id="repwd" type="password"/></td></tr><tr><td >您的Email：</td><td><input id="email" type="text" onblur="checkEmail()"/><span id="emailError"></span></td></tr>   <tr><td>&nbsp;</td><td ><input name="btn"  type="submit"  value="注册" class="rb1" /></td></tr></form></table></body>
</html>

关键的jQuery操作代码：

/** 1.表单的提交事件要在form上绑定【onsubmit事件】才会向action提交，而不是绑定onclick事件* 2.如果表单项没有输入内容，【内容是空字符串""】，不是null判断表单项内容为空的表达式  user == ""   或者  user.length==0* 3.不管表单项是用户名、年龄，入学时间，接收数据后【都是String 】 "bjsxt"  "20"  "1999-12-23"* 4.进行表单提交验证注意事项*   1）出现错误要return false。一切正常建议return true;*   2）οnsubmit="return checkForm()"  【return不可少】* 6.表单验证【【和String】】有密切关系*  user.length <=6*  var ch = user.charAt(i);*  email.indexOf('@')<0* * 7.缺点*   1）需要等到点击提交按钮时才进行表单验证，应该输入完成一个表单项后立刻进行该表单项的验证   ==>   使用 onblur *   2）验证信息的输出是通过alert给出，不方便，建议在文本框后面直接输出信息    ==>   在文本框后面加 <span>*/
function checkForm(){if(checkUser() && checkEmail()) {return true;}return false;
}function checkUser() {$("#userError").css("color", "white").html("")// 用户名不能为空var user = $("#user").val();if (user == "") {$("#userError").css("color", "red").html("用户名不能为空")return false;}//  用户名长度大于6if (user.length <= 6) {$("#userError").css("color", "red").html("用户名长度大于6")return false;}//  用户名中不能有数字  ad34adffor (var i = 0; i < user.length; i++) {var ch = user.charAt(i);if(ch >= '0' && ch <= '9' ){$("#userError").css("color", "red").html("用户名中不能有数字")return false;}}return true;  // 方便【调用】的时候直接以返回值进行判断
}function checkEmail() {$("#emailError").css("color", "white").html("")//  邮箱格式正确var email = $("#email").val();if (email.indexOf('@') < 0) {$("#emailError").css("color", "red").html("邮箱中必须有@")return false;}if (email.indexOf('.') < 0) {$("#emailError").css("color", "red").html("邮箱中必须有.")return false;}return true;
}

还可以在 文本框上添加 onfocus() 事件：获得焦点后执行什么操作。

function onfocusFun() {$("#user").select();  // 获取焦点后，选中内容
}

6.2 正则表达式

使用简洁的代码，严谨的验证文本框中的内容

正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串

创建方法：

var reg = /china/;  // 使用两个 / 括起来
var reg = new RegExp("china")  // 使用 new创建对象// 使用创建好的正则表达式进行验证
reg.test("字符串内容");

通配符号：

重复字符：

注意： [ ]里面的内容不管写多少都代表一位，例如[1-10]，表示1-1，0这两个取值的其中1个数字

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><form name="form1" id="form11">            邮政编码：<input id="code1" name="code2" type="text" onblur="checkCode()" /><div id="code_prompt"></div>手机号码：<input id="mobile" type="text" onblur="checkMobile()" /><div id="mobile_prompt"></div>邮箱：<input id="email" name="email" type="text" onblur="checkEmail()" /><div id="email_prompt"></div></form></body>
</html>

关键的jQuery操作代码：

function checkCode() {// 获取内容var code = $("#code1").val();// 给出正则表达式var reg = /^\d{6}$/;   // ^表示开始， $表示结束// 使用正则表达式进行验证，并给出结果if (reg.test(code)) {$("#code_prompt").html("格式正确");} else {$("#code_prompt").html('<font color="red">格式错误</font>');}
}function checkMobile() {var mobile = $("#mobile").val();var reg = /^1[3578]\d{9}$/;//if().....
}function checkEmail() {var email = $("#email").val();var reg = /^\w{6,}@[a-zA-Z0-9]{2,}(\.[a-zA-Z]{2,3}){1,2}$/;//if().....
}

常用的正则表达式：

匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
匹配腾讯QQ号：[1-9][0-9]{4,}
匹配中国邮政编码：\d{6}
匹配由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
匹配Email地址：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匹配中文字符：[\u4e00-\u9fa5]

7. jQuery案例

7.1 购物车

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>购物车</title><style type="text/css">tr{height: 50px;}</style><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><h3>jQuery操作表格</h3><hr /><input type="button" id="fx" value="反选" /><input type="button" id="addRow" value="新增一行" /><input type="button" id="delRow" value="删除行"/><input type="button" id="copyRow" value="复制行" /><table border="1px" cellpadding="10px" cellspacing="0" id="ta"><tr><td width="50px"><input type="checkbox" name="chks" id="chks"  value="1" /></td><td width="200px">书名</td><td width="200px">作者</td><td width="200px">数量</td><td width="200px">操作</td></tr><tr id=""><td><input type="checkbox" name="chk" id="" value="2"/></td><td>《Java编程之道》</td><td>wollo</td><td>10</td><td><input type="button" name="aa" id="" value="修改数量" /><input type="button" name="" id="" value="删除" /></td></tr>          <tr><td><input type="checkbox" name="chk" id="" value="3" /></td><td>《Python和我的故事》</td><td>赵老师</td><td>10</td><td>                    <input type="button" name="" id="" value="修改数量" onclick="updateAmount(this)"/><input type="button" name="" id="" value="删除" onclick="delRow(this)" /></td></tr><tr><td><input type="checkbox" name="chk" id="" value="4" /></td><td>《web开发详解》</td><td>张老师</td><td>30</td><td><input type="button" name="" id="" value="修改数量"onclick="updateAmount(this)"/><input type="button" name="" id="" value="删除" /></td></tr></table></body>
</html>

全选反选操作：

$(function() {// 全选$("#chks").click(function() {// 获取当前选中状态var flag = $("#chks").prop("checked");$("input[name='chk']").prop("checked", flag);})// 全选的完善：改变复选框的状态时，要判断所有的复选框是否都被选中，以此决定全选框的值$("input[name='chk']").click(judgeAll);// 反选$("#fx").bind("click", function() {$("input[name='chk']").each(function() {$(this).prop("checked", !$(this).prop("checked"));})judgeAll();})
})function judgeAll() {var flag = true;$("input[name='chk']").each(function() {if (!$(this).prop("checked")) {flag = false;return;}})$("#chks").prop("checked", flag);
}

增加、删除、复制行

$(function() {// 新增一行$("#addRow").click(function() {var newRow = $('<tr>' +'<td><input type="checkbox" name="chk" id="" value="3" /></td>' + '<td>《Python从入门到入狱》</td>' + '<td>Tom老师</td>' + '<td>10</td>' + '<td>' + '<input type="button" name="" id="" value="修改数量" οnclick="updateAmount(this)"/>&nbsp;' + '<input type="button" name="" id="" value="删除" οnclick="delRow(this)" />' + '</td></tr>');$("#ta").append(newRow);});// 复制多行$("#copyRow").click(function() {var toCopyArr = $("input[name='chk']:checked");if (toCopyArr.length == 0) {alert("至少选中一行");return;}toCopyArr.each(function() {var newRow = $(this).parents("tr").clone();  // 复制一份！！！$("#ta").append(newRow);})});// 删除多行$("#delRow").click(function() {// 获取被选中的行var toDelArr = $("input[name='chk']:checked");if (toDelArr.length == 0) {alert("至少选中一行");return;}toDelArr.parents("tr").remove();  // 删除操作是相同的，不需要使用 each});
});

修改数量、单条删除：

// 删除行
function delRow(obj) {$(obj).parents("tr").remove();
}// 修改数量
function updateAmount(obj) {var numObj = $(obj).parent().prev();// 获取数量var num = numObj.text();// 将数量赋给输入框var newInput = $('<input type="text" value="' + num + '" οnblur="checkNum(this)"/>');numObj.html(newInput);// 修改数量按钮变为确定var confirmBtn = $('<input type="button" name="" id="" value="确定" οnclick="confirmNum(this)"/>')$(obj).replaceWith(confirmBtn);
}// 确定数量
function confirmNum(obj) {var inputObj = $(obj).parent().prev();// 获取数量var num = inputObj.find("input").val();judgeNum(num);// 将输入框赋给数量inputObj.html(num);// 修改确定按钮变为修改数量var updateBtn = $('<input type="button" name="" id="" value="修改数量" οnclick="updateAmount(this)"/>')$(obj).replaceWith(updateBtn);
}function checkNum(obj) {var num = $(obj).val();judgeNum(num);
}function judgeNum(num) {if (isNaN(num) || parseInt(num) != num || num <= 0) {alert("必须是大于0的整数")}
}

7.2 Tab切换

HTML素材：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Tab切换</title><style type="text/css">#ul1 li{border: 1px solid red;width: 100px;text-align: center;float: left;list-style-type: none;}.liselected{background-color: white;}.linoselected{background-color:darkgray;}</style><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script></head><body><ul id="ul1"><li id="li1">发布通知</li><li id="li2" class="linoselected">自定义</li><li id="li3" class="linoselected">数据图片表</li></ul><div style="clear:left"></div><div id="tab1">第一个页面</div><div id="tab2" style="display: none;">2222222</div><div id="tab3" style="display: none;">这是333</div></body>
</html>

关键的jQuery操作代码：

$(function() {$("#ul1 li").click(function() {// 当前点击的元素$(this).addClass("liselected").removeClass("linoselected");// 其他兄弟  siblings()！！！！$(this).siblings().addClass("linoselected").removeClass("liselected");var idVal = $(this).attr("id").replace("li", "tab");$("div:gt(0)").each(function() {if ($(this).attr("id") == idVal) {$(this).css("display", "inline");} else{$(this).css("display", "none");}});});
})

【JavaLearn】#（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证相关推荐

table中加表单元素怎么验证_045、DOM编程实例和表单
1.DOM编程实例1 JavaScript this 关键词指的是它所属的对象. 它拥有不同的值,具体取决于它的使用位置: 在方法中,this 指的是所有者对象. 单独的情况下,this 指的是全局对 ...
JQuery 总结（7） index() data() each() 选项卡表单验证
index() 当前标签的索引,data()给标签身上添加属性,each()循环遍历 1 2 3 4 5 6 7 8 9 10 $("h1").click(function () ...
(转)强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
jquery表单验证学习心得
jquery validate的官方演示和文档地址: 引用块内容官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/ ...
【JavaLearn】（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
目录 1. jQuery定义和特点 1.1 jQuery 入门 1.2 jQuery对象和DOM对象 2. jQuery 选择器 2.1 基本选择器 2.2 属性选择器 2.3 位置选择器 2.4 表 ...
【前端】JS的BOM和DOM，事件，表单验证案例
先看小练习1:开关灯用到的Dom相关知识点 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Element* document.getElementById("id值&qu ...
表单验证插件jQuery Validation Engine使用介绍
jQuery Validation Engine是一款非常好用的表单验证工具,对常见的验证如:非空.长度.数字验证等,都有非常好的支持.详细可参考:http://code.ciaoca.com/jqu ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...

【JavaLearn】#（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证

1. jQuery定义和特点

1.1 jQuery 入门

1.2 jQuery对象和DOM对象

2. jQuery 选择器

2.1 基本选择器

2.2 属性选择器

2.3 位置选择器

2.4 表单选择器

2.5 内容选择器

3. 事件和动画

3.1 事件 event

3.2 动画 animate

4. DOM 编程

4.1 操作文本

4.2 操作属性

4.3 操作元素

4.4 简单实例

5. 操作CSS

5.1 直接操作CSS样式

5.2 使用类样式

6. 表单验证

6.1 基本表单验证

6.2 正则表达式

7. jQuery案例

7.1 购物车

7.2 Tab切换

【JavaLearn】#（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证相关推荐

最新文章

热门文章