第41天(就业班) jQuery入门

来源：互联网发布：unity3d 双摄像机分屏编辑：程序博客网时间：2024/05/16 08:12

1.验证码

<%@ page language="java" pageEncoding="UTF-8" %><%@ page contentType="image/jpeg"  import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %><%!public Color getColor(){  Random random = new Random();  int r = random.nextInt(256);//0-255  int g = random.nextInt(256);  int b = random.nextInt(256);  return new Color(r,g,b);}public String getNum(){  String str = "";  Random random = new Random();  for(int i=0;i<4;i++){    str += random.nextInt(10);//0-9  }  return str;}%><%response.setHeader("pragma", "mo-cache");response.setHeader("cache-control", "no-cache");response.setDateHeader("expires", 0);BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();g.setColor(new Color(200,200,200));g.fillRect(0,0,80,30);for (int i = 0; i < 30; i++) {  Random random = new Random();  int x = random.nextInt(80);  int y = random.nextInt(30);  int xl = random.nextInt(x+10);  int yl = random.nextInt(y+10);  g.setColor(getColor());  g.drawLine(x, y, x + xl, y + yl);}g.setFont(new Font("serif", Font.BOLD,16));g.setColor(Color.BLACK);String checkNum = getNum();//"2525"StringBuffer sb = new StringBuffer();for(int i=0;i<checkNum.length();i++){  sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"}g.drawString(sb.toString(),15,20);session.setAttribute("CHECKNUM",checkNum);//2525ImageIO.write(image,"jpeg",response.getOutputStream());out.clear();out = pageContext.pushBody();%>验证码检查Ajax.js//创建AJAX异步对象，即XMLHttpRequestfunction createAJAX(){var ajax = null;try{ajax = new ActiveXObject("microsoft.xmlhttp");}catch(e1){try{ajax = new XMLHttpRequest();}catch(e2){alert("你的浏览器不支持ajax，请更换浏览器");}}return ajax;}01_image.jsp<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>验证码检查</title>    <script type="text/javascript" src="js/ajax.js"></script>  </head>  <body><form><table border="0" align="center"><tr><th>验证码：</th><td><input size="2" type="text" name="checkcode" id="checkcodeID" maxlength="4"/></td><td><img src="01_image.jsp"/><td id="res"></td></tr></table></form><script type="text/javascript">//去掉二边的空格function trim(str){"  zhaojun  "str = str.replace(/^\s*/,"");//"zhaojun  " str = str.replace(/\s*$/,"");//"zhaojun"return str; }</script><script type="text/javascript">document.getElementById("checkcodeID").onkeyup = function(){var checkcode = this.value;checkcode = trim(checkcode);//2525if(checkcode.length == 4){//NO1)var ajax = createAJAX();//NO2)var method = "POST";var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();ajax.open(method,url);//NO3)ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//NO4)var content = "checkcode=" + checkcode;ajax.send(content);//--------------------------------------------------------等待//NO5)ajax.onreadystatechange = function(){if(ajax.readyState == 4){if(ajax.status == 200){//NO6)var tip = ajax.responseText;//NO7)var img = document.createElement("img");img.src = tip;img.style.width = "14px";img.style.height = "14px";var td = document.getElementById("res");td.innerHTML = "";td.appendChild(img);}}}}else{//清空图片var td = document.getElementById("res");td.innerHTML = "";}}</script>  </body></html>Web.xml<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">  <display-name>day41_jquery</display-name>  <!-- 核心过滤器 --><filter><filter-name>StrutsPrepareAndExecuteFilter</filter-name><filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class></filter><filter-mapping><filter-name>StrutsPrepareAndExecuteFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping>  <welcome-file-list>    <welcome-file>index.jsp</welcome-file>  </welcome-file-list></web-app>package com.xp.javaee.js.checkcode;import java.io.PrintWriter;import javax.servlet.http.HttpServletResponse;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionContext;import com.opensymphony.xwork2.ActionSupport;/** * 验证码检查 */public class CheckcodeAction extends ActionSupport{private static final long serialVersionUID = 1L;//客户端验证码private String checkcode;//2525//注入客户端验证码public void setCheckcode(String checkcode) {this.checkcode = checkcode;}/** * 验证 */public String check() throws Exception {//图片路径String tip = "images/MsgError.gif";//从服务器获取session中的验证码String checkcodeServer = (String) ActionContext.getContext().getSession().get("CHECKNUM");//将客户端的验证码与服务端的验证码进行比较if(checkcode.equals(checkcodeServer)){tip = "images/MsgSent.gif";}//以IO流的方式将tip变量的值输出到AJAX异步对象中HttpServletResponse response = ServletActionContext.getResponse();response.setContentType("text/html;charset=UTF-8");PrintWriter pw = response.getWriter();pw.write(tip);pw.flush();pw.close();//以下方式不是最好的，但可以完成AJAX异步交互return null;}}<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"    "http://struts.apache.org/dtds/struts-2.0.dtd"><struts><package name="myPackage" extends="json-default" namespace="/"><!-- 全局结果类型 --><global-results><result name="success" type="json"/></global-results><action name="checkRequest" class="com.xp.javaee.js.checkcode.CheckcodeAction" method="check"></action></package></struts>

2.json

一）什么是JSON

（1）JSON（Java Script Object Notation（记号,标记））是一种轻量级的数据交换语言，

以文本字符串为基础，且易于让人阅读

注意：XML就是一个重量级的数据交换语言

（2）JSON采用完全独立于任何程序语言的文本格式，使JSON成为理想的数据交换语言

二）JSON的作用

（1）简化创建自定义对象的方式

注意：JSON就是用JS语法来书写，所以必须放在<script>标签中

  <!-- js方式定义Person对象<script type="text/javascript">function Person(id,name,sal){this.id = id;this.name = name;this.sal = sal;}var p = new Person(1,"波波",7000);document.write("编号:" + p.id + "<br/>");document.write("姓名:" + p.name + "<br/>");document.write("薪水:" + p.sal + "<br/>");</script>--><hr/><!-- json方式定义Person对象 --><script type="text/javascript">//采用js语言来书写var p = {id:1,name:"包包",sal:8000};//属性可以''或""符号//字符串必加''或""符号，其它类型不用加符号document.write("编号:" + p.id + "<br/>");document.write("姓名:" + p.name + "<br/>");document.write("薪水:" + p.sal + "<br/>");</script><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>创建一个数组，数组中有三个对象</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head>  <body><script type="text/javascript">var ps = [{id:1,name:'哈哈'},{id:2,name:'呵呵'},{id:3,name:'嘻嘻'}];</script><script type="text/javascript">document.write("共有" + ps.length + "个学生<br/>");for(var i=0;i<ps.length;i++){document.write("编号：" + ps[i].id + "<br/>");document.write("姓名：" + ps[i].name + "<br/>");}</script>  </body></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>创建一个对象，其它一个属性是数组</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head>  <body><script type="text/javascript">var p = {id:1,name:'哈哈',home:['湘潭','长沙','广州']};for(var i=0;i<p.home.length;i++){document.write(p.home[i]+"  ");}</script>  </body></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>创建一个对象，使用function做为属性值</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head>  <body><script type="text/javascript">var p = {id:1,name:'哈哈',isLove:true,home:['广州','深圳'],show : function(str){alert("你是" + str);}};//document.write(p.isLove?"已婚":"单身"+"<br/>");p.show("赵君");</script>  </body></html>   （2）在AJAX中，作为数据载体之一        注意：JS可以直接解析JSON格式的文本，前提是：该JSON必须采用JS格式书写的才行，如果该JSON是采用Java格式写的，必须使用eval()函数转换后，方可被JS解析，该eval("")函数接收一个字符串格式的内容。

3.省份-城市-区域三级联动【Struts2 + JSON版】

    切记：将来JSON是不能完完全全替代XML的，只能在定义对象和数据交换语言方面替代   <%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>省份-城市-区域三级联动【Struts2 + JSON版】</title>    <script type="text/javascript" src="js/ajax.js"></script>  </head>  <body><select id="provinceID" style="width:111px"><option>选择省份</option><option>湖北</option><option>湖南</option><option>广东</option></select><select id="cityID" style="width:111px"><option>选择城市</option></select><select id="areaID" style="width:111px"><option>选择区域</option></select><!-- 省份->城市 --><script type="text/javascript">document.getElementById("provinceID").onchange = function(){//清空城市下拉框var cityElement = document.getElementById("cityID");cityElement.options.length = 1;//清空区域下拉框var areaElement = document.getElementById("areaID");areaElement.options.length = 1;var province = this[this.selectedIndex].innerHTML;if("选择省份" != province){//NO1)var ajax = createAJAX();//NO2)var method = "POST";var url = "${pageContext.request.contextPath}/findCityByProvinceRequest?time="+new Date().getTime();ajax.open(method,url);//NO3)ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")//NO4)var content = "bean.province=" + province;ajax.send(content);//-------------------------------------------等待//NO5ajax.onreadystatechange = function(){if(ajax.readyState == 4){if(ajax.status == 200){//NO6)返回JAVA格式的JSON文本var jsonJAVA = ajax.responseText;//p所代表的是java格式的json文本，是不能直接被js执行的//解决方案：将java格式的json文本，转成js格式的json文本//如何做：用js提供的一个函数搞定var jsonJS = eval("("+jsonJAVA+")");var array = jsonJS.cityList;var size = array.length;for(var i=0;i<size;i++){var city = array[i];var option = document.createElement("option");option.innerHTML = city;cityElement.appendChild(option);}}}}}}</script><!-- 城市->区域 --><script type="text/javascript">document.getElementById("cityID").onchange = function(){var areaElement = document.getElementById("areaID");areaElement.options.length = 1;var city = this[this.selectedIndex].innerHTML;if("选择城市" != city){//NO1)var ajax = createAJAX();//NO2)var method = "POST";var url = "${pageContext.request.contextPath}/findAreaByCityRequest?time="+new Date().getTime();ajax.open(method,url);//NO3)ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")//NO4)var content = "bean.city=" + city;ajax.send(content);//------------------------------------------等待//NO5)ajax.onreadystatechange = function(){if(ajax.readyState == 4){if(ajax.status == 200){//NO6)var jsonJAVA = ajax.responseText;var jsonJS = eval("("+jsonJAVA+")");var array = jsonJS.areaList;var size = array.length;for(var i=0;i<size;i++){var area = array[i];var option = document.createElement("option");option.innerHTML = area;areaElement.appendChild(option);}}}}}}</script>  </body></html>package com.xp.javaee.js.provincecityarea;public class Bean {private String province;//省份private String city;//城市public Bean(){}public String getProvince() {return province;}public void setProvince(String province) {this.province = province;}public String getCity() {return city;}public void setCity(String city) {this.city = city;}}package com.xp.javaee.js.provincecityarea;import java.util.ArrayList;import java.util.List;import com.opensymphony.xwork2.ActionSupport;/** * 省份-城市-区域三级联动【Struts2 + JSON版】*/public class ProvinceCityAreaAction extends ActionSupport {private Bean bean;public Bean getBean(){return(bean);}public void setBean( Bean bean ){this.bean = bean;}/** * 根据省份获取城市 */public String findCityByProvince() throws Exception{cityList = new ArrayList<String>();if ( "湖北".equals( bean.getProvince() ) ){cityList.add( "武汉" );cityList.add( "赤壁" );}else if ( "湖南".equals( bean.getProvince() ) ){cityList.add( "郴州" );cityList.add( "张家界" );cityList.add( "浏阳" );}else if ( "广东".equals( bean.getProvince() ) ){cityList.add( "阳江" );cityList.add( "清远" );cityList.add( "佛山" );cityList.add( "湛江" );}/* 让struts2框架帮你将List/Set/Map<String>转成JSON文本 */return(SUCCESS);}/** * 根据城市获取区域 */public String findAreaByCity() throws Exception{areaList = new ArrayList<String>();if ( "阳江".equals( bean.getCity() ) ){areaList.add( "AA" );areaList.add( "BB" );}else if ( "清远".equals( bean.getCity() ) ){areaList.add( "CC" );areaList.add( "DD" );;}else if ( "佛山".equals( bean.getCity() ) ){areaList.add( "EE" );areaList.add( "FF" );}else if ( "湛江".equals( bean.getCity() ) ){areaList.add( "GG" );areaList.add( "HH" );}return(SUCCESS);}private List<String>areaList; /* 区域的集合 */private List<String>cityList; /* 城市的集合 */public List<String> getCityList(){return(cityList);}public List<String> getAreaList(){return(areaList);}}             导入：struts2-json-plugin-2.3.1.1.jar <!-- 省份->城市 --><action name="findCityByProvinceRequest" class="com.xp.javaee.js.provincecityarea.ProvinceCityAreaAction" method="findCityByProvince"></action><!-- 城市->区域 --><action name="findAreaByCityRequest" class="com.xp.javaee.js.provincecityarea.ProvinceCityAreaAction" method="findAreaByCity"></action>

4.使用第三方工具，将JavaBean对象/List或Set或Map对象转成JSON

准备导入第三方jar包：
》commons-beanutils-1.7.0.jar
》commons-collections-3.1.jar
》commons-lang-2.5.jar
》commons-logging-1.1.1.jar
》ezmorph-1.0.3.jar
》json-lib-2.1-jdk15.jar
（1）JavaBean----->JSON
》JSONArray jsonArray = JSONArray.fromObject(city);
》String jsonJAVA = jsonArray.toString();
（2）List<JavaBean>----->JSON
》JSONArray jsonArray = JSONArray.fromObject(cityList);
》String jsonJAVA = jsonArray.toString();
（3）List<String>----->JSON
》JSONArray jsonArray = JSONArray.fromObject(stringList);
》String jsonJAVA = jsonArray.toString();
（4）Set<JavaBean>----->JSON
》JSONArray jsonArray = JSONArray.fromObject(citySet);
》String jsonJAVA = jsonArray.toString();
（5）Map<String,Object>----->JSON
》JSONArray jsonArray = JSONArray.fromObject(map);
》String jsonJAVA = jsonArray.toString();
最后一个例子切记，将来jQuery-EasyUI-DataGrid组件时我们还要用到
将来，在企业中，就算脱离struts2的环境，也能用第三方工具，将Java类型转成JSON文本

package com.xp.javaee.js.bean2json;/** * 城市 */public class City {private Integer id;private String name;public City(){}public City(Integer id, String name) {this.id = id;this.name = name;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}}package com.xp.javaee.js.bean2json;import java.util.ArrayList;import java.util.List;/** * 省份 * @author AdminTC */public class Province {private Integer id;//编号private String name;//名字private List<City> cityList = new ArrayList<City>();public Province(){}public Province(Integer id, String name, List<City> cityList) {this.id = id;this.name = name;this.cityList = cityList;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public List<City> getCityList() {return cityList;}public void setCityList(List<City> cityList) {this.cityList = cityList;}}package com.xp.javaee.js.bean2json;import java.util.ArrayList;import java.util.LinkedHashMap;import java.util.LinkedHashSet;import java.util.List;import java.util.Map;import java.util.Set;import net.sf.json.JSONArray;/** * 使用第三方工具，将JavaBean对象/List或Set或Map对象转成JSON  * @author AdminTC */public class TestBean2Json {private static void javabean2json() {City city = new City(1,"广州");JSONArray jSONArray = JSONArray.fromObject(city);String jsonJAVA = jSONArray.toString();System.out.println(jsonJAVA);//[{"id":1,"name":"广州"}]}private static void list2json() {List<City> cityList = new ArrayList<City>();cityList.add(new City(1,"广州"));cityList.add(new City(2,"珠海"));JSONArray jSONArray = JSONArray.fromObject(cityList);String jsonJAVA = jSONArray.toString();System.out.println(jsonJAVA);//[{"id":1,"name":"广州"},{"id":2,"name":"珠海"}]}private static void set2json() {Set<City> citySet = new LinkedHashSet<City>();citySet.add(new City(1,"广州"));citySet.add(new City(2,"珠海"));JSONArray jSONArray = JSONArray.fromObject(citySet);String jsonJAVA = jSONArray.toString();System.out.println(jsonJAVA);//[{"id":1,"name":"广州"},{"id":2,"name":"珠海"}]}private static void javabeanlist2json() {List<City> cityList = new ArrayList<City>();cityList.add(new City(1,"中山"));cityList.add(new City(2,"佛山"));Province province = new Province(1,"广东",cityList);JSONArray jSONArray = JSONArray.fromObject(province);String jsonJAVA = jSONArray.toString();System.out.println(jsonJAVA);/*  [ {  "id":1,  "name":"广东"  "cityList":[{"id":1,"name":"中山"},{"id":2,"name":"佛山"}],     }  ]  */}private static void map2json() {List<City> cityList = new ArrayList<City>();cityList.add(new City(1,"中山"));cityList.add(new City(2,"佛山"));Map<String,Object> map = new LinkedHashMap<String,Object>();map.put("total",cityList.size());//表示集合的长度map.put("rows",cityList);//rows表示集合JSONArray jSONArray = JSONArray.fromObject(map);String jsonJAVA = jSONArray.toString();System.out.println(jsonJAVA);//[{"total":2,"rows":[{"id":1,"name":"中山"},{"id":2,"name":"佛山"}]}]jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1);System.out.println(jsonJAVA);}public static void main(String[] args) {//javabean2json();//list2json();//set2json();//javabeanlist2json();map2json();}}总结JSON的特点（1）在客户端（特指PC浏览器），直接使用JavaScript语言解析JSON，无需第三方jar包（2）本质上，就是一个文本，只是该文本有特定的书写格式（3）可以使用第三方工具，将JavaBean对象或者List/Set/Map<JavaBean>对象转成JSON（4）优点：JSON与XML很相似，但是它更加轻巧，服务器只需发送一个html普通字符串，不用发送复杂的xml格式文档了（5）缺点：语法过于严谨，初学者可能觉得代码不易读，写错一点都不行（6）JSON本质上，就是用JS语法写的特殊文本记号，用JS可以直接解析

5.模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head>  <body><img src="images/zgl.jpg"/><input id="hide" type="button" value="隐藏" style="position:absolute;top:250;left:50"/>    <input id="show" type="button" value="显示" style="position:absolute;top:250;left:120"/><script type="text/javascript">//定位隐藏按钮，同时提供单击事件document.getElementById("hide").onclick = function(){//定位图片var img = document.images[0];//隐藏图片img.style.visibility = "hidden";}//定位显示按钮，同时提供单击事件document.getElementById("show").onclick = function(){//定位图片var img = document.images[0];//隐藏图片img.style.visibility = "visible";}</script>  </body></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head>  <body><img src="images/zgl.jpg"/><input id="hide" type="button" value="隐藏" style="position:absolute;top:250;left:50"/>    <input id="show" type="button" value="显示" style="position:absolute;top:250;left:120"/><script type="text/javascript">function Photo(){//相像var img = document.images[0];//隐藏方法this.hide = function(){img.style.visibility = "hidden";} //显示方法this.show = function(){img.style.visibility = "visible";}}</script><script type="text/javascript">var p = new Photo();document.getElementById("hide").onclick = function(){p.hide();}document.getElementById("show").onclick = function(){p.show();}</script>  </body></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head>  <body><img src="images/zgl.jpg"/><input id="hide" type="button" value="隐藏" style="position:absolute;top:250;left:50"/>    <input id="show" type="button" value="显示" style="position:absolute;top:250;left:120"/><script type="text/javascript">function Photo(){//相像var img = document.images[0];//隐藏方法this.hide = function(){img.style.visibility = "hidden";} //显示方法this.show = function(){img.style.visibility = "visible";}}</script><script type="text/javascript">//$()表示定位指定的标签function $(str){//获取str变量的类型var type = typeof(str);//如果是string类型的话if(type == "string"){//截取字符串的第一个字符var first = str.substring(0,1);//如果是#号的话if("#" == first){//获取#号之后的所有字符串var end = str.substring(1,str.length);//根据id定位标签var element = document.getElementById(end);//如果找到了if(element != null){//返回标签return element;}else{alert("查无此标签");}}else{}}else{alert("参数必须是字符串类型");}}</script><script type="text/javascript">var p = new Photo();$("#hide").onclick = function(){p.hide();}$("#show").onclick = function(){p.show();}</script>  </body></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="js/photo.js"></script>  </head>  <body><img src="images/zgl.jpg"/><input id="hide" type="button" value="隐藏" style="position:absolute;top:250;left:50"/>    <input id="show" type="button" value="显示" style="position:absolute;top:250;left:120"/><script type="text/javascript">var p = new Photo();$("#hide").onclick = function(){p.hide();}$("#show").onclick = function(){p.show();}</script>  </body></html>

6.jQuery是什么

John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作

为什么要使用jQuery
（1）写少代码,做多事情【write less do more】
（2）免费，开源且轻量级的js库，容量很小
注意：项目中，提倡引用min版的js库
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
注意：jQuery不是将所有JS全部封装，只是有选择的封装
（4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择
（7）提倡对主要的html标签提供一个id属性，但不是必须的
（8）出错后，有一定的提示信息
（9）不用再在html里面通过<script>标签插入一大堆js来调用命令了

7.js对象与jQuery的互转

a.jQuery开发步骤

（1）引用第三方js库文件，<script type="text/javascript"src="js/jquery-1.8.2.js"></script>

（2）查阅并使用api手册，$("#divID").html()/val()/text()/css("color","red")/....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>jQuery入门</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>  </head>  <body><input id="inputID" type="button" value="这就是jQuery库,写少代码，做多事情"/><div id="divID">哈哈哈</div><script type="text/javascript">//取得<input>标签中的value属性的内容/*js方式var inputElement = document.getElementById("inputID");var input = inputElement.value;alert(input);*//*jquery方式var $input = $("#inputID");var input = $input.val();alert(input);*///取得<div>标签中的文本内容/*js方式var divElement = document.getElementById("divID");var div = divElement.innerHTML;alert(div);*///jquery方式var $div = $("#divID");var div = $div.html();alert(div);</script>  </body></html>b.js对象和jQuery对象相互转换   （1）什么是js对象及代码规则        就是使用js-API，即Node接口中的API或是传统JS语法定义的对象，叫做js对象        js代码规则----divElement    var divElement = document.getElementById("divID");        var nameArray = new Array(3);   （2）什么是jQuery对象及代码规则        就是使用jQuery-API，返回的对象就叫做jQuery对象        jQuery代码规则----$div        var $div = $("#divID")        声明：上述代码规则，只是老师个人规则，不代表所有企业都这样做   （3）js对象转成jQuery对象【重点】        语法：$(js对象)---->jQuery对象        例如：$(divElement)---->$div        例如：$(this)---->$this        注意：jQuery对象将js对象做了封装，js对象二边无引号var inputElement = document.getElementById("inputID");//js对象 var $input = $(inputElement);//jquery对象var txt = $input.val();alert(txt);   （4）jQuery对象转成js对象        语法1：jQuery对象[下标，从0开始]        语法2：jQuery对象.get(下标，从0开始)        例如：$div[0]---->divElement        注意：不同的对象只能调用对应的api方法，即jQuery对象不能调用js对象的api，反之亦然    $div.innerHTML（错）    divElement.html(错) var $div = $("#divID");//jquery对象var divElement = $div[0];//js对象(方式一)//var divElement = $div.get(0);//js对象(方式二)var txt = divElement.innerHTML;  alert(txt);<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>js对象和jquery对象的相互转换</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>  </head>  <body><input id="inputID" type="button" value="这就是jQuery库,写少代码，做多事情"/><div id="divID">哈哈</div><script type="text/javascript">/*取得<input>标签中的value属性的内容[js对象->jquery对象]var inputElement = document.getElementById("inputID");//js对象var $input = $( inputElement );//jquery对象var input = $input.val();alert(input);*///取得<div>标签中的文本内容[jquery对象->js对象]var $div = $("#divID");//jquery对象//var divElement = $div.get(0);//js对象var divElement = $div[0];//js对象var div = divElement.innerHTML;alert(div);</script>  </body></html>

8.js对象和jQuery对象的区别

（1）js对象的三种基本定位方式
（A）通过ID属性：document.getElementById()
（B）通过NAME属性：document.getElementsByName()
（C）通过标签名：document.getElementsByTagName()
（2）jQuery对象的三种基本定位方式
（A）通过ID属性：$("#id属性值")
（B）通过标签名：$("标签名")
（C）通过CLASS属性：$(".样式名")
（3）js对象出错的显示
没有合理的提示信息
例如：alert(document.getElementById("usernameIDD").value)
（4）jQuery对象出错的显示
有合理的提示信息，例如：undefined
例如：alert($("#usernameIDD").val())

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>js操作与jQuery操作对错误的处理方式的比较</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">.oneClass {font-size: 44px;color: red}</style><script type="text/javascript" src="js/jquery-1.8.2.min.js"></script></head><body><input type="text" id="usernameID" value="这就是jQuery库"/><div id="divID" class="oneClass">这是div标签中的内容</div><script type="text/javascript">  //通过"#id"定位<input>  //alert( $("#usernameID").val() );  //通过"标签名"定位<input><div>  //alert( $("input").val() );  //alert( $("div").html() );  //通过"样式名"定位<div>  //alert( $(".oneClass").html() );  //js错误处理和jquery错误处理  //alert( document.getElementById("usernameTD").value );  alert( $("#usernameID").val() );  </script></body></html>

9.jQuery九类选择器（上）【参见jQueryAPI.chm手册】

目的：通过选择器，能定位web页面（HTML/JSP/XML）中的任何标签
（1）基本选择器【参见selector_1.html】

   <div id="div1ID">div1</div>  <div id="div2ID">div2</div>  <span class="myClass">span</span>  <p>p</p>    <script type="text/javascript">     //1)查找ID为"div1ID"的元素个数   //alert( $("#div1ID").size() );     //2)查找DIV元素的个数  //alert( $("div").length );    //3)查找所有样式是"myClass"的元素的个数  //alert( $(".myClass").size() );    //4)查找所有DIV,SPAN,P元素的个数  //alert( $("DIV,span,p").size() );    //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数  alert( $("#div1ID,.myClass,p").size() );    </script>

（2）层次选择器【参见selector_2.html】<!--     <input type="radio" value="z"/><input type="radio" value="e"/><input type="radio" value="y"/>--><form><input type="text" value="a"/><table><tr><td><input type="checkbox" value="b"/></td></tr></table></form><input type="radio" value="ccccccccc"/><input type="radio" value="d"/><input type="radio" value="e"/><script type="text/javascript">//1)找到表单form里所有的input元素的个数//alert( $("form input").size() );  //2)找到表单form里所有的子级input元素个数  //alert( $("form>input").size() );    //3)找到表单form同级第一个input元素的value属性值  //alert( $("form+input").val() );    //4)找到所有与表单form同级的input元素个数  alert( $("form~input").size() );  </script>（3）增强基本选择器【参见selector_3.html】//1)查找UL中第一个元素的内容alert( $("ul li:first").text() );  //2)查找UL中最后个元素的内容alert( $("ul li:last").text() );  //4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始alert( $("table tr:odd").size() );  //5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始alert( $("table tr:even").size() );  //6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式      alert( $("table tr td:eq(1)").text() );  //7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大alert( $("table tr:gt(0)").size() );  //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小alert( $("table tr:lt(2)").size() );  //9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色$(":header").css("background-color","red").css("color","blue");  //3)查找所有未选中的input为checkbox的元素个数alert( $(":checkbox:NOT(:checked)").size() );（4）内容选择器【参见selector_4.html】//1)查找所有包含文本"John"的div元素的个数    alert( $("div:contains('John')").size() );      //2)查找所有p元素为空的元素个数      alert( $("p:empty").size() );    //3)给所有包含p元素的div元素添加一个myClass样式  $("div:has(p)").addClass("myClass");    //4)查找所有含有子元素或者文本的p元素个数,即p为父元素      alert( $("p:parent").size() );

10.jQuery中常用方法

目的：通过方法，能操作web页面（HTML/JSP）中的任何标签
（1）val()：获取标签的value属性值，前提是该标签有value属性
（2）html()：获取标签之间的内容，不能用运于xml文件
（3）text()：获取标签之间的内容，可以用运于html/jsp和xml文件，(提倡)
（4）css()：加key-value形成的css样式
（5）addClass()：加已经定义好的一个css样式
（6）size()：获取jQuery对象/数组中元素的个数，提倡
（7）length：获取jQuery对象/数组中元素的个数
注意：在写jQuery代码时，不光可以使用jQuery的API，还能使用传统JS的API

0 0