JQuery与ajax简单运用

JQuery与ajax简单运用

Jquery入门：

1. 什么是jQuery
   Query 查询的意思, jQuery就是用javascript更加方便的查询和控制页面控件。
   jquery是一个JavaScript（JS）框架，它支持JS的常规操作以及一些扩展，比如图形等，对JSON格式也能很好的解析，ajax也做了封装，语法也比较简单。很强大。

   jQuery库为Web脚本编程提供了通用(跨浏览器)的抽象层，使得它几乎适用于任何脚本编程的情形。jQuery通常能为我们提供以下功能：

   1.方便快捷获取DOM元素；

   2.动态修改页面样式；

   3.动态修改DOM内容；

   4.响应用户的交互操作；

   5.为页面添加动态效果；

   6.统一Ajax操作；

$(fn)、 $(document).ready(fn)与window.onload有什么区别：

//一般来说他们的运行快慢是312，window.onload所需要加载的时间最长
$(document).ready(fn)
$(function ()谁现在谁先运行

	window.onload = function(){
		alert("Hollo jquery3");
	} 
	
	//$(document).ready(fn)编写方式
	$(document).ready(function () {
		alert("Hollo jquery2");
	})
	
	//$(fn)编写方式
	$(function () {
		alert("Hollo jquery1");
	}) 

jquery对象转js对象的相互转换

<script type="text/javascript">
 $(function() {
  var $h1 = $("#h1");
  alert($h1.val());
  //jquery对象转js对象
  var h1Node = $h1.get(0);
  alert(h1Node.value);
  
  var h2Node = document.getElementById("h2");
  alert(h2Node.value);
  //js对象转jsjquery对象
  var $h2Node = $(h2Node);
  alert($h2Node.val());
 })
</script>

jquery的选择器

1.ID选择器：

$(function(){
#代表Id
		$("#a3").click(function(){
			alert("a3翻牌了");
		})
})


2：类选择器
.代表class
$(function(){
		$(".c1").click(function(){
			alert("c1翻牌了");
		}) 
})	

3：包含选择器：
注意空格：p里面包含a
$(function(){
	$("p a").click(function(){
			alert("翻牌了");
		})
})	


4：组合选择器：
有span也有a标签的
$(function(){
		$("a,span").click(function(){
			alert("翻牌了");
		})
})


//组合选择器 
	$(function(){
			//在div标签的内部找a标签,然后给找到的标签添加事件
			//如果第二个参数没有填.默认是在整个(document)里面找
			$("a","div").click(function(){
				alert("翻牌了");
		})
})

this指针

$(function () {
		$(":input").click(function() {
			//指的是当前事件源
			alert(this.value);
			$("a").each(function (index,item) {
				//指的是当前元素
				alert(index+","+$(this).html()+","+$(item).html());
			});
		});
	})

	

json对象的字符串体现形式

	//json对象的字符串体现形式
		var a = {
				sid:"s001",
				sname:"zs"
		}
		console.log(a);
		//json数组的字符串体现形式
		var b =[1,2,3,4]
		console.log(b);
		//json混合模式的字符串体现形式
		var c = {id:3,hobby:["a","c"]};
		console.log(c);

appendTo与append的区别

  append是加到标签里面
   appendTo是再标签里面套标签

exdent的用法

	
		
		//让第一行等于绿色
		$("table[id='t1'] tr:eq(0)").addClass("green");
		//让大于第一行的等于蓝色
		$("table[id='t1'] tr:gt(0)").addClass("blue");
		
		//添加动态效果
		让他首先为yello 之后再切换为blue
		$("table[id='t1'] tr:gt(0)").hover(function(){
			$(this).removeClass().addClass("yello");
		},function(){
			$(this).removeClass().addClass("blue");
		});
		
		//默认为fen大于为hui
		$("table[id='t2'] tr:eq(0)").addClass("fen");
		$("table[id='t2'] tr:gt(0)").addClass("hui");
		
		//hover代表的是切换
		$("table[id='t2'] tr:gt(0)").hover(function(){
			$(this).removeClass().addClass("red");
		},function(){
			$(this).removeClass().addClass("hui");
		});

extend jsonObj3会替换jsonObj1插到jsonObj2中

$.extend(jsonObj2,jsonObj1,jsonObj3);

出现的结果为：

json死循环问题

    1，由双向绑定改成单项绑定 
    也就是说将彼此之间的关系交给一方维护
    解决内存溢出问题

   2.@JsonIgnore ：将彼此循环调用的属性忽略，
   不参与对象转成json格式
    
    Student stu1=new Student("s001","大花");
    Student stu2=new Student("s002","小花");
    Teacher tea1=new Teacher("t001","原"，"null");
    Teacher tea2=new Teacher("t002","晓哥"，"null");
    Set<Teacher> teas=new HashSet<>();
    teas.add(tea1);
    teas.add(tea2);
    stu1.setTeas(teas);
    Set<Student> stus=new HashSet<>();
    stus.add(stuq);
    stus.add(stu2);
    tea1.setStus(stus);
    ObjextMapper om=new ObjecMapper();
    Syso.out.print(om.writeValueAsString(stu1))

不这样写的话会报一个内存溢出的问题

;

//解决办法在Teacher类加一个@JsonIgnore

AJax应用

      

      <input type= "hidden'  id="ctx" value="$fpageContext. request. contextPath<h1>$.ajax实现省级联动</h1><div>

      收货地址&nbsp;&nbsp;

      <select id= "province">

      <option selected="seLected">--请选择省份--</option></select>&nbsp; &nbsp;<select id="city">

      <option selected="selected">·-- 请选择城市---</option></select>&nbsp;&nbsp;<select id=" county">

      <option selected= "seLected">---请选择县区---</option></select>( Idiv>

$(function(){
	var ctx = $("#ctx").va1();$.ajax({
		url:ctx+" /regionServlet" ,success: function(data)}
			for(index in data)f
				//console.log(data[index]);
				$("#city").append("<option value= '"+date[index].ID+"'+>"+date[index].REGION_NAME+"</option>"
			}
	},
	dataType:"json"

});


$(" #province"). change(function(){
	$("option:gt(0)","#city"). remove();
		$.ajax({
			url:ctx+"/regionServlet?ID= "+this. value,
			success :function(data){
				for(index in data){
					$("#city").append("<option value= '"+date[index].ID+"'+>"+date[index].REGION_NAME+"</option>"
				}
		},
dataType:"json ''
}