Java进阶学习第二十七天（JSON基础、jQuery基础）

最新推荐文章于 2022-07-08 21:38:00 发布

_Gerald

最新推荐文章于 2022-07-08 21:38:00 发布

阅读量417

点赞数 2

分类专栏： Web前端笔记文章标签： JSON jQuery

本文链接：https://blog.csdn.net/Mr_GaoYang/article/details/83615948

版权

Web前端笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、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"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
	<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"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
	<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"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
	<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对象【重点】
语法： $(j s 对象) - - - - > j Q u e r y 对象例如：$ (divElement)----> $d i v 例如：$ (this)----> $t h i s 注意： j Q u e r y 对象将 j s 对象做了封装， j s 对象二边无引号 ④ j Q u e r y 对象转成 j s 对象语法 1 ： j Q u e r y 对象 [下标，从 0 开始] 语法 2 ： j Q u e r y 对象 . g e t (下标，从 0 开始) 例如： ‘$ 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>

_Gerald

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Java进阶学习第二十七天（JSON基础、jQuery基础）

培训要求1）掌握JSON及其应用2）了解jQuery的背景和特点3）理解js对象和jQuery对象的区别4）掌握jQuery九类选择器及应用（上）声明：今天服务端我们使用Struts2技术一）什么是JSON（1）JSON（Java Script Object Notation（记号,标记））是一种轻量级的数据交换语言，以文本字符串为基础，且易于让人阅读注意：XML就是一个重量级的...
复制链接

扫一扫