JQuery与ajax简单运用
Jquery入门:
-
什么是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>
收货地址
<select id= "province">
<option selected="seLected">--请选择省份--</option></select> <select id="city">
<option selected="selected">·-- 请选择城市---</option></select> <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 ''
}