JQuery与ajax简单运用
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对象的相互转换
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 teas=new HashSet<>();teas.add(tea1);teas.add(tea2);stu1.setTeas(teas);Set 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应用
( Idiv>
$(function(){var ctx = $("#ctx").va1();$.ajax({url:ctx+" /regionServlet" ,success: function(data)}for(index in data)f//console.log(data[index]);$("#city").append(""}},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(""}},
dataType:"json ''
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！