版权声明：使用本品须Jack Gao同意，违者必究 https://blog.csdn.net/Mr_GaoYang/article/details/83615948
一、JSON基础
1、JSON的定义
① JSON（Java Script Object Notation）是一种轻量级的数据交换语言，以文本字符串为基础，且易于让人阅读
注意：XML就是一个重量级的数据交换语言
② JSON采用完全独立于任何程序语言的文本格式，使JSON成为理想的数据交换语言
2、JSON的作用
① 简化创建自定义对象的方式
注意：JSON就是用JS语法来书写，所以必须放在
<html>
<head>
<title>简化创建自定义对象的方式</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<!-- 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>
</body>
</html>
<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>
<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>
<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>
② 在AJAX中，作为数据载体之一
注意：JS可以直接解析JSON格式的文本，前提是：该JSON必须采用JS格式书写的才行，如果该JSON是采用Java格式写的，必须使用eval()函数转换后，方可被JS解析，该eval("")函数接收一个字符串格式的内容。
③ 省份-城市-区域三级联动【Struts2 + JSON版】
切记：将来JSON是不能完完全全替代XML的，只能在定义对象和数据交换语言方面替代
jsp：
<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);
//-------------------------------------------等待
//NO5
ajax.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>
bean.java：
/**
* 封装省份和城市
*/
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;
}
}
action：
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;
}
}
struts.xml：
<struts>
<package name="myPackage" extends="json-default" namespace="/">
<!-- 全局结果类型 -->
<global-results>
<result name="success" type="json"/>
</global-results>
<action
name="checkRequest"
class="cn.itcast.javaee.js.checkcode.CheckcodeAction"
method="check">
</action>
<!-- 省份->城市 -->
<action
name="findCityByProvinceRequest"
class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction"
method="findCityByProvince">
</action>
<!-- 城市->区域 -->
<action
name="findAreaByCityRequest"
class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction"
method="findAreaByCity">
</action>
</package>
</struts>
导入：struts2-json-plugin-2.3.1.1.jar
3、使用第三方工具，将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
② 最后一个例子切记，将来jQuery-EasyUI-DataGrid组件时我们还要用到，将来在企业中，就算脱离struts2的环境，也能用第三方工具将Java类型转成JSON文本
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();
}
}
4、总结JSON的特点
① 在客户端（特指PC浏览器），直接使用JavaScript语言解析JSON，无需第三方jar包
② 本质上，就是一个文本，只是该文本有特定的书写格式
③ 可以使用第三方工具，将JavaBean对象或者List/Set/Map<JavaBean>对象转成JSON
④ 优点：JSON与XML很相似，但是它更加轻巧，服务器只需发送一个html普通字符串，不用发送复杂的xml格式文档了
⑤ 缺点：语法过于严谨，初学者可能觉得代码不易读，写错一点都不行
⑥ JSON本质上，就是用JS语法写的特殊文本记号，用JS可以直接解析
5、模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】
学会：JS的封装思想
学会：创建自定义对象和优化方法
学会：引用第三方实用的库，该库中预定义大量实用的对象和函数
学会：查阅第三方实用的库提供的API手册
<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>
<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>
<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>
二、jQuery基础
1、jQuery定义
John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作
2、为什么要使用jQuery
① 写少代码，做多事情【write less do more】
② 免费，开源且轻量级的js库，容量很小
注意：项目中，提倡引用min版的js库
③ 兼容市面上主流浏览器，例如 IE，Firefox，Chrome
注意：jQuery不是将所有JS全部封装，只是有选择的封装
④ 能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
⑤ 文档手册很全，很详细
⑥ 成熟的插件可供选择
⑦ 提倡对主要的html标签提供一个id属性，但不是必须的
⑧ 出错后，有一定的提示信息
⑨ 不用再在html里面通过<script>标签插入一大堆js来调用命令了
3、jQuery开发步骤
① 引用第三方js库文件，
② 查阅并使用api手册，$("#divID").html()/val()/text()/css(“color”,“red”)/…
<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>
4、js对象和jQuery对象相互转换
① 什么是js对象及代码规则
就是使用js-API，即Node接口中的API或是传统JS语法定义的对象，叫做js对象
js代码规则----divElement
var divElement = document.getElementById(“divID”);
var nameArray = new Array(3);
② 什么是jQuery对象及代码规则
就是使用jQuery-API，返回的对象就叫做jQuery对象
jQuery代码规则----$div
var $div = $("#divID")
声明：上述代码规则，只是个人规则，不代表所有企业都这样做
③ js对象转成jQuery对象【重点】
语法：
(divElement)---->
(this)---->
div[0]---->divElement`
注意：不同的对象只能调用对应的api方法，即jQuery对象不能调用js对象的api，反之亦然
<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>
5、js对象和jQuery对象的区别
① js对象的三种基本定位方式
◇ 通过ID属性：document.getElementById()
◇ 通过NAME属性：document.getElementsByName()
◇ 通过标签名：document.getElementsByTagName()
② jQuery对象的三种基本定位方式
◇ 通过ID属性：$("#id属性值")
◇ 通过标签名：$("标签名")
◇ 通过CLASS属性：$(".样式名")
③ js对象出错的显示
没有合理的提示信息
例如：alert(document.getElementById(“usernameIDD”).value)
④ jQuery对象出错的显示
有合理的提示信息，例如：undefined
例如：alert($("#usernameIDD").val())
<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>
6、jQuery中常用方法
目的：通过方法，能操作web页面（HTML/JSP）中的任何标签
① val()：获取标签的value属性值，前提是该标签有value属性
② html()：获取标签之间的内容，不能用运于xml文件
③ text()：获取标签之间的内容，可以用运于html/jsp和xml文件【提倡】
④ css()：加key-value形成的css样式
⑤ addClass()：加已经定义好的一个css样式
⑥ size()：获取jQuery对象/数组中元素的个数【提倡】
⑦ length：获取jQuery对象/数组中元素的个数
注意：在写jQuery代码时，不光可以使用jQuery的API，还能使用传统JS的API
7、jQuery九类选择器及应用【参见jQueryAPI.chm手册】
目的：通过选择器，能定位web页面（HTML/JSP/XML）中的任何标签
① 基本选择器
<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>
② 层次选择器
<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>
③ 增强基本选择器
<script type="text/javascript">
//1)查找UL中第一个LI元素的内容
//html()要用于html/jsp，不能用在xml
//text()既能用于html/jsp，且能用于xml
//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开始，这是一种祖先 后代 的变化形式
//html()：强调的是标签中的内容，即便标签中的子标签，也会显示出来
//text()：强调的是标签中的文本内容，即便标签中的子标签，也只会显示出文本内容，不会显示子标签
//alert( $("table tr:eq(1)").text() );
//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
//alert( $("table tr:gt(0)").size() );
//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
//alert( $("table tr:lt(3)").size() );
//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
//$(":header").css("background-color","red").css("color","#ffff33");
//10)查找所有[未]选中的input为checkbox的元素个数
alert( $(":checkbox:not(:checked)").size() );
</script>
④ 内容选择器
<script type="text/javascript">
//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() );
</script>
⑤ 可见性选择器
<script type="text/javascript">
//1)查找隐藏的tr元素的个数
//alert( $("table tr:hidden").size() );
//2)查找所有可见的tr元素的个数
//alert( $("table tr:NOT(:hidden)").size() );
alert( $("table tr:visible").size() );//提倡
</script>
⑥ 属性选择器
<script type="text/javascript">
//1)查找所有含有id属性的div元素个数
//alert( $('div[id]').size() );
//2)查找所有name属性是newsletter的input元素，并将其选中
//$("input[name='newsletter']").attr("checked","checked");
//3)查找所有name属性不是newsletter的input元素，并将其选中
//$("input[name!='newsletter']").attr("checked","true");
//4)查找所有name属性以'news'开头的input元素，并将其选中
//$("input[name^='news']").attr("checked","checked");
//5)查找所有name属性以'letter'结尾的input元素，并将其选中
//$("input[name$='letter']").attr("checked","checked");
//6)查找所有name属性包含'news'的input元素，并将其选中
//$("input[name*='news']").attr("checked","checked");
//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
$("input[id][name$='letter']").attr("checked","true");
</script>
⑦ 子元素选择器
<script type="text/javascript">
/*用JS语法创建一个一维数组，存入string类型的姓名，再迭代
var nameArray = new Array("哈哈","呵呵","嘻嘻");
for(var i=0;i<nameArray.length;i++){
document.write(nameArray[i]+"<br/>");
}*/
/*用JSON语法创建一个一维数组，存入string类型的姓名，再迭代
var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js对象
var $nameArray = $(nameArray);//jquery对象
$nameArray.each(function(){
this表示数组中每一个元素，this属性js对象，this代表string类型
alert(this);
});*/
//用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代
var nameArray = [
{
name : "哈哈",
sal : 6000
},
{
name : "嘿嘿",
sal : 7000
},
{
name : "笨笨",
sal : 8000
}
];
var $nameArray = $(nameArray);
$nameArray.each(function(){
//this代表object类型
alert(this.name + ":"+this.sal);
});
</script>
<script type="text/javascript">
/*1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始
$("ul li:first-child").each(function(){
alert( $(this).text() );
});
*/
/*2)迭代每个ul中最后1个li元素中的内容,索引从1开始
$("ul li:last-child").each(function(){
alert( $(this).text() );
});
*/
/*3)迭代每个ul中第2个li元素中的内容,索引从1开始
$("ul li:nth-child(2)").each(function(){
alert( $(this).text() );
});*/
//4)在ul中查找是唯一子元素的li元素的内容
$("ul li:only-child").each(function(){
alert( $(this).text() );
});
</script>
⑧ 表单选择器
<script type="text/javascript">
//1)查找所有input元素的个数
//alert( $("input").size() );//10，找input标签
//alert( $(":input").size() );//13，找input标签和select/textarea/button
//2)查找所有文本框的个数
//alert( $(":text").size() );
//3)查找所有密码框的个数
//alert( $(":password").size() );
//4)查找所有单选按钮的个数
//alert( $(":radio").size() );
//5)查找所有复选框的个数
//alert( $(":checkbox").size() );
//6)查找所有提交按钮的个数
//alert( $(":submit").size() );
//7)匹配所有图像域的个数
//alert( $(":images").size() );
//8)查找所有重置按钮的个数
//alert( $(":reset").size() );
//9)查找所有普通按钮的个数
//alert( $(":button").size() );
//10)查找所有文件域的个数
//alert( $(":file").size() );
//11)查找所有input元素为隐藏域的个数
//alert( $(":input:hidden").size() );
</script>
⑨ 表单对象属性选择器
<script type="text/javascript">
//1)查找所有可用的input元素的个数
//alert( $("input:enabled").size() );
//2)查找所有不可用的input元素的个数
//alert( $("input:disabled").size() );
//3)查找所有选中的复选框元素的个数
//alert( $(":checkbox:checked").size() );
//4)查找所有未选中的复选框元素的个数
//alert( $(":checkbox:NOT(:checked)").size() );
//5)查找所有选中的选项元素的个数
//alert( $("select option:selected").size() );
alert( $("#provinceID option:NOT(:selected)").size() );
</script>
注意：项目中，通常是多种选择器一起使用
8、jQuery常用Method-API
目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查
① DOM简述与分类
◇ DOM是一种W3C官方标准规则，可访问任何标签语言的页面（HTML/JSP/XML）
◇ DOM是跨平台（window/linux/unix），跨语言（javascript/java），
跨浏览器（ie/firefox/Chrome）的标准规则
◇ 我们只需要按照DOM标准规则，针对主流浏览器（ie/firefox/Chrome）编程
◇ JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS
◇ DOM标准规则不是JS的专属，其它语言，也能适用，例如：VBScript，Java语言等
② DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用
| 方法 | 解释 |
|---|---|
| each() | 是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象 |
| append() | 追加到父元素之后 |
| prepend() | 追加到父元素之前 |
| after() | 追加到兄弟元素之后 |
| before() | 追加到兄弟元素之前 |
| attr(name) | 获取属性值 |
| attr(name,value) | 给符合条件的标签添加key-value属性对 |
| $(“
HTML代码
”) |
创建元素，属性，文本 |
| remove() | 删除自已及其后代节点 |
| val() | 获取value属性的值 |
| val("") | 设置value属性值为""空串，相当于清空 |
| text() | 获取HTML或XML标签之间的值 |
| text("") | 设置HTML或XML标签之间的值为""空串 |
| clone() | 只复制样式，不复制行为 |
| clone(true) | 既复制样式，又复制行为 |
| replaceWith() | 替代原来的节点 |
| removeAttr() | 删除已存在的属性 |
| addClass() | 增加已存在的样式 |
| removeClass() | 删除已存在的样式 |
| hasClass() | 判断标签是否有指定的样式，true表示有样式，false表示无样式 |
| toggleClass() | 如果标签有样式就删除，否则增加样式 |
| offset() | 获取对象的left和top坐标 |
| offset({top:100,left:200}) | 将对象直接定位到指定的left和top坐标 |
| width() | 获取对象的宽 |
| width(300) | 设置对象的宽 |
| height() | 获取对象的高 |
| height(500) | 设置对象的高 |
| children() | 只查询子节点，不含后代节点 |
| next() | 下一下兄弟节点 |
| prev() | 上一下兄弟节点 |
| siblings() | 上下兄弟节点 |
| show() | 显示对象 |
| hide() | 隐藏对象 |
| fadeIn() | 淡入显示对象 |
| fadeOut() | 淡出隐藏对象 |
| slideUp() | 向上滑动 |
| slideDown() | 向下滑动 |
| slideToggle() | 上下切换滑动，速度快点 |
<script type="text/javascript">
//DIV标签插入到UL标签之后(父子关系)
//$("ul").append( $("div") );
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend( $("div") );
//DIV标签插入到UL标签之后(兄弟关系)
//$("ul").after( $("div") );
//DIV标签插入到UL标签之前(兄弟关系)
$("ul").before( $("div") );
</script>
<script type="text/javascript">
//取得form里第一个input元素的type属性
//alert( $("form input:first").attr("type") );
//设置form里最后个input元素的为只读文本框
//$("form input:last").attr("readonly","readonly")
//$(":password").attr("readonly","readonly")
</script>
<script type="text/javascript">
//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
//<body><div id="2015">哈哈</div></body>
/*js方式
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈哈";
divElement.setAttribute("id","2015");
divElement.id = "2015";
document.body.appendChild(divElement);*/
//jquery方式
var $div = $("<div id='2015'>哈哈哈哈哈</div>");
//$("body").append( $div );
$(document.body).append( $div );
</script>
<script type="text/javascript">
//删除ID为secondID的LI元素
//$("#secondID").remove();
//删除所有LI元素
//$("#a li").remove();
//删除UL元素
$("#b").remove();
</script>
<script type="text/javascript">
//取得<div>中的内容
//alert( $("div").text() );
//取得<option>的值和描述
var $option = $("#city option");
var value = $option.val();
var html = $option.text();
alert(value + ":" + html);
</script>
<script type="text/javascript">
//复制原input元素，添加到原input元素后，与其同级
var $old = $(":button");
var $new = $old.clone();
$new.val("新按钮");
$old.after( $new );
//为原input元素动态添加单击事件，且复制原input元素，
//var $old = $(":button");
//$old.click(function(){
// alert("动态事件");
//});
//添加到原input元素后，与其同级，且和原按钮有一样的行为
//var $new = $old.clone(true);
//$new.val("新按钮");
//$old.after( $new );
</script>
<script type="text/javascript">
//双击<div>中的文本，用文本框替换文本
$("div").dblclick( function(){
var $text = $("<input type='text' style='width:165px;height:23px'/>");
//文本框替代div标签
$(this).replaceWith( $text );
} );
</script>
<script type="text/javascript">
//为<table>元素添加属性border/align/width
var $table = $("table").attr("border","2").attr("align","right").attr("width","60%")
//将<table>元素的align属性删除
$table.removeAttr("align");
</script>
<script type="text/javascript">
//为无样式的DIV添加样式
//$("div:first").addClass("myClass");
//为有样式的DIV删除样式
//$("div:last").removeClass("myClass");
//切换样式，即有样式的变成无样式，无样式的变成有样式
//$("div").toggleClass("myClass");
//最后一个DIV是否有样式
var flag = $("div:last").hasClass("myClass");
alert(flag?"有样式":"无样式");
</script>
<script type="text/javascript">
//获取图片的坐标
//var offset = $("img").offset();
//var x = offset.left;
//var y = offset.top;
//alert(x+":"+y);
//设置图片的坐标
//$("img").offset({
// top:100,
// left:200
//});
//获取图片的宽高
//var w = $("img").width();
//var h = $("img").height();
//alert(w+":"+h);
//设置图片的宽高
$("img").width(500);
$("img").height(600);
</script>
<script type="text/javascript">
//取得div元素的直接子元素内容，不含后代元素
//var $span = $("div").children();
//var content = $span.html();//包含子标签
//var content = $span.text();//不包含子标签
//alert(content);
//取得div元素的下一个同级的兄弟元素内容
//var $p = $("div").next();
//alert( $p.text() );
//取得div元素的上一个同级的兄弟元素内容
//alert( $("div").prev().text() );
//依次取得div元素的上下一个同级的所有兄弟元素的内容
var $all = $("div").siblings("p");
$all.each(function(){
alert( $(this).html() );
});
</script>
<script type="text/javascript">
//图片隐蔽
$("img").hide(5000);
//休息3秒
window.setTimeout(function(){
//图片显示
$("img").show(5000);
},3000);
//淡入显示图片
$("img").fadeIn(3000);
//淡出隐蔽图片
$("img").fadeOut(3000);
</script>
<script type="text/javascript">
//向上下滑动
$(":button").click(function(){
//div标标上下移动
$("div").slideToggle(100);
});
</script>
面试题：查询指定的节点和多重each()迭【使用jquery弹出奇数的tr标签下的td里的值】）
<script type="text/javascript">
function myclick(){
//使用jquery弹出奇数的tr标签下的td里的值，即A1,A2,A3,C1,C2,C3
var $tr = $("table tr:NOT(:last):even");
//在每个tr标签中查询td标签
$tr.each(function(){
//在tr标签中查询所有的td标签
var $td = $(this).find("td");
//迭代
$td.each(function(){
var content = $(this).text();
alert(content);
});
});
}
//写出另一种方式，比第一种更加easy
function myclick(){
var $td = $("table tr:NOT(:last):even td");
$td.each(function(){
alert($(this).html());
});
}
</script>
9、jQuery常用Event-API
目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理
| 方法 | 解释 |
|---|---|
| window.onload | 在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者 |
| ready | 在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化 |
| ready和onload同时存在时，二者都会触发执行，ready快于onload | |
| change | 当内容改变时触发 |
| focus | 焦点获取 |
| select | 选中所有的文本值 |
| keyup/keydown/keypress | 演示在IE和Firefox中获取event对象的不同 |
| mousemove | 在指定区域中不断移动触发 |
| mouseover | 鼠标移入时触发 |
| mouseout | 鼠标移出时触发 |
| submit | 在提交表单时触发，true表示提交到后台，false表示不提交到后台 |
| click | 单击触发 |
| dblclick | 双击触发 |
| blur | 焦点失去 |
<script type="text/javascript">
//定义a()和b()二个方法
function a(){
alert("JS方式");
}
function b(){
alert("JQUERY方式");
}
/*使用JS方式加载a()和b()二个方法
window.onload = function(){
a();
}
window.onload = function(){
b();
}
*/
/*使用jQuery方式加载a()和b()二个方法
$(document).ready(function(){
a();
});
$(document).ready(function(){
b();
});
*/
/*使用jQuery最简方式加载a()和b()二个方法
$(function(){
a();
});
$(function(){
b();
});
*/
//将js方式的onload与jquery方式的ready对比，看哪个执行快（jquery方式快）
window.onload = function(){
alert("传统");
}
$(function(){
alert("现代");
});
</script>
<script type="text/javascript">
//当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
$("#city").change( function(){
var $option = $("#city option:selected");
var value = $option.val();
var text = $option.text();
alert(value+":"+text);
} );
</script>
<script type="text/javascript">
//加载页面时获取光标并选中所有文字
$(function(){
//光标定位文本框
$(":text").focus();
//选中文本框的所有文本
$(":text").select();
});
</script>
<script type="text/javascript">
//当按键弹起时，显示所按键的unicode码
$(function(){
//IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象
$(document).keyup(function(){
//获取按钮的unicode编码
var code = event.keyCode;
alert(code);
});
});
</script>
<script type="text/javascript">
//显示鼠标移动时的X和Y座标
$(function(){
$(document).mousemove(function(){
var x = event.clientX;
var y = event.clientY;
$("#xID").val(x);
$("#yID").val(y);
});
});
</script>
<script type="text/javascript">
//鼠标移到某行上，某行背景变色
$("table tr").mouseover(function(){
$(this).css("background-color","inactivecaption");
});
//鼠标移出某行，某行还原
$("table tr").mouseout(function(){
$(this).css("background-color","white");
});
//鼠标移到某图片上，为图片加边框
$("img").mouseover(function(){
$(this).css("border-color","red");
});
//鼠标移出图片，图片还原
$("img").mouseout(function(){
$(this).css("border-color","white");
});
</script>
<script type="text/javascript">
//浏览器加载web页面时触发
$(function(){
//将光标定位于文本框中
$(":text").focus();
});
</script>
<script type="text/javascript">
//检测是否为中文，true表示是中文，false表示非中文
function isChinese(str){
if(/^[\u3220-\uFA29]+$/.test(str)){
return true;
}else{
return false;
}
}
</script>
<script type="text/javascript">
//当表单提交前检测
$("form").submit(function(){
var flag = false;
//获取文本框的中内容
var name = $(":text").val();
//去二边的空格
name = $.trim(name);
//如果没有填内容
if(name.length == 0){
alert("用户名必填");
//将光标定位于文本框中
$(":text").focus();
//清空文本框中的内容
$(":text").val("");
}else{
//调用方法
flag = isChinese(name);
//如果不是中文
if(!flag){
alert("用户名必须填中文");
//将光标定位于文本框中
$(":text").focus();
//清空文本框中的内容
$(":text").val("");
}
}
return flag;
});
</script>