jQuery
一、什么是jQuery
jQuery是一种轻量级的Javascript类库。重量级的有Ext.js，由于使用较为复杂，目前已经很少使用。
jQuery由于其良好的兼容性、易操作性深受开发者的喜爱，目前，几乎绝大部分的Web前段开发都是基于jQuery。
二、jQuery官网及下载地址
三、jQuery的优点
1.兼容性
兼容所有主流浏览器，如IE6+、Google、FireFox等。
举例：
大家在S2做项目的时候，是不是遇到过自己写的Javascript代码明明在这个浏览器可以运行的好好的，但是换一个浏览器就不行了或者报错了，对吧？而现在使用的jQuery就可以完美解决该问题。
2.面向集合
jQuery以面向集合方式操作DOM元素
3.链式调用
jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
四、如何使用jQuery（hello world）
1.导入JS类库
| <script type="text/javascript" src="js库路径"></script> |
2入口模块.
- 完整写法：jQuery(document).ready(fn)
- 缩写：$(fn)
注：
- 以$(fn)为程序入口；
- fn为匿名函数，不指定参数名的函数叫做匿名函数。
案例1：
目的：jQuery的helloworld演示，重点强调jq的程序入口写法、什么是匿名函数！！
| <script type=”text/javascript”> //平常的写法 //function aaa(){} $(function(){ alert(‘hello jQuery’); }); </script> |
案例2：
目的：jq的$(fn)程序入口作用！！
| ... <title></title> <script> $(“a”).click(function(){ alert(“hello”); }) </script> <a href=”#”>点我</a> ... <a href=”#”>有种点我1</a> <a href=”#”>有种点我2</a> <a href=”#”>有种点我3</a> <div> <a href=”#”>有种点我1</a> </div> <p> <div> <a href=”#”>有种点我1</a> </div> </p> |
示例1：
不指定jQuery的程序入口，并将js代码放置在title标签与body标签之间，刷新页面点击a标签无任何信息弹出；
示例2：
不指定jQuery的程序入口，将js代码放置到JSP页面的最后，刷新页面点击a标签可弹出提示信息；
示例3：
指定jQuery的程序入口，将js代码放置到title标签与body标签之间，刷新页面点击a标签可弹出提示信息；
总结：
$(fn)的作用是：当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，才会触发 ready 事件。
五、使用Google开发者工具调试JS
| Elements | 查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈 |
| Console | 记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell |
| Sources | 断点调试JS |
| Network | 从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化 |
| Timeline | 记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能 |
| Profiles | 如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节 |
| Application | 记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等 |
| Security | 判断当前网页是否安全 |
| Audits | 对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等 |
六、jQuery的三种工厂方法
jQuery就是一个容器，用来装HTML元素。
三种工厂方法就是三种创建jQuery的方法。
搞清楚什么是实例方法和类方法。
模拟jQuery，创建一个jQuery类，构造方法是私有化的，因此通过工厂方法拿到对象。
工厂方法：用来做东西的，jQuery的工厂方法用来做jQuery对象的。
1.jQuery(selector[,context])
exp：选择器（类似CSS选择器，元素、类、ID等选择器）
1.1元素选择器（Element）
示例1：
| //通过元素选择器给页面中的所有a标签绑定click事件 $(“a”).click(function(){ alert(“1234”); }); |
1.2类选择器（.Class）
示例2：
| //通过类选择器给页面中的class=”a1”的标签绑定click事件 $(“.a1”).click(function(){ alert(“1234”); }); |
1.3ID选择器（#Id）
示例3：
| //通过ID选择器给页面中的id=”a1”的标签绑定click事件 $(“#a1”).click(function(){ alert(“1234”); }); |
1.4组合选择器（E1,E2）
示例4：
| //通过组合选择器给页面中的class=”a1”和class=”a2”的标签绑定click事件 $(“.a1,.a2”).click(function(){ alert(“1234”); }); |
1.5包含选择器（E1 E2）
示例5：
| //通过包含选择器给页面中p元素下的class=”a3”的标签绑定click事件 $(“p .a3”).click(function(){ alert(“1234”); }); |
1.6属性选择器
示例6：
| //通过属性选择器给页面中input元素name=”btn”的标签绑定click事件 $(“input[name=’btn’]”).click(function(){ alert(“1234”); }); |
context：上下文/环境/容器 默认作用域：document
举例：
找一个名叫张三的人，通过名字可以第一时间判断出这是一个中国人，对不对？那么查找这个人的范围是不是在全中国，而这个范围是不是太大了，查找的结果是不是很多？那好，我们在缩短范围。而这是不是在一个容器或者环境下查找一个人啊，同样我们也可以指定范围大小来查找啊？
示例1：
| //上下文默认：document //在document的容器中给所有a标签绑定click事件 $(“a”,docment).click(function(){ alert(“1234”); });
//指定容器范围为div，在div容器中给所有a标签绑定click事件 $(“a”,”div”).click(function(){ alert(“1234”); }); |
2.jQuery(html)
html：表示一个html的字符串
示例1：点击add按钮往select中动态添加option元素
| <div> <select id=”s1”> <option>---------请选择--------</option> </select> <input name=”btn1” type=”button” value=”add” /> </div> ... $(“input[name=’btn1’]”).click(function(){ //appendTo：将option字符串加入到select标签 $(“<option>value</option>”).appendTo(“#s1”); //append：往select标签中追加option字符串 $(“#s1”).append(“<option>value2</option>”); }); |
3.jQuery(element)
element：表示一个html元素对象；
示例1：点击a标签给自身文本添加字体颜色样式
| $('a').click(function(){ //this表示id=”a3”元素的html元素对象 $(this).css({'color':'red'}); }); |
七、this指针
1.this的用法
this：表示当前的上下文对象是一个html DOM对象，可以调用html对象所拥有的属性、方法。
$(this)：代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值。
示例1：
| $(‘a’).click(function(){ //this表示a标签的DOM元素对象 console.log(this); //$(this)表示a标签的jQuery对象 console.log($(this)); }); |
2.作用域
示例1：this的作用域
| ... $(‘input’).click(function(){ //第1次出现的this var _this=this; $(‘a’).each(function(){ //第2次出现的this var id=$(this).attr(“id”); console.log(id); }) }) |
备注：
第1次出现的this的作用范围在input的click事件内；而第2次出现的this的作用域在$(‘a’).each函数内，它们分别代表的意义是不同的。第1次出现的this指的是input DOM元素对象（当前元素），第2次出现的this指的是jQuery对象a标签。
示例2：each（类似java集合对象遍历方式foreach）
| $(‘a’).each(function(){ var id=$(this).attr(“id”); alert(id); }) |
举例：
跟着老师喊“我欠你100块钱”，老师喊出来代表老师自己，你们喊出来的是不是代表你们自己啊？同一句话，喊出来的人不同而已；
八、jQuery插件机制介绍
jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能。
其实jQuery插件就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中。
九、JSON的三种方式
1.对象
| {sid:”p001”,sname:”zhangsan”} |
2.列表/数组
| [1,2,3,4,5] |
3.混合模式
| {id:’001’:num:[1,3,4,5]} |
4.JSON转对象/对象转JSON
| var obj={id:’001’:name:’zhangsan’}; //obj对象转JSON var toJson=JSON.parse(obj); console.log(toJson); //JSON对象转obj var toObj=JSON.stringify(toJson); console.log(toObj); |
十、$.extend和$.fn.extend
1.$.extend
$.extend用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像 “类名.方法名” 静态方法的调用方式。
1.1$.extend(obj1,obj2,obj3[,...])
含义：将所有的参数项都合并obj1中，并返回obj1，可以扩展无数个；
示例1：
| var obj1={sid:'001'}; var obj2={sid:'007',sname:'zs'}; var obj3={idcard:'43010101'}; alert(obj1.sid+' '+obj1.sname+' '+obj1.idcard); //输出结果 result={001+’ ’+undefined+’ ’+undefined};
$.extend(obj1,obj2); alert(obj1.sid+' '+obj1.sname+' '+obj1.idcard); //输出结果 //result={007+’ ’+zs+’ ’+undefined};
$.extend(obj1,obj2,obj3); alert(obj1.sid+' '+obj1.sname+' '+obj1.idcard); //输出结果 //result={007+’ ’+zs+’ ’+43010101}; 注：JSON对象中的数据格式类似Map集合，当JSON对象中的属性名相同，值将被覆盖 |
1.2$.extend(obj1)
含义：以obj参数扩展jQuery的类方法和类属性（静态方法和静态属性）
两种表现形式：
- $.extend(obj1)：obj1为JSON对象，可以添加多个方法或多个属性；
- $.method=function(option){...}：一次只能添加一种方法；
示例1：扩展jQuery对象本身类方法，新增一个add方法计算a+b的值并返回结果
| $(function(){ var add={add:function(a,b){return a+b;}}; $.extend(add); var result=$.add(1,6); console.log(result); }); 注：扩展了jQuery对象的add类方法 |
2.$.fn.extend
jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法，就相当于为对象添加“成员方法”，类的“成员方法”要类的对象才能调用，所以使用jQuery.fn.extend(object)扩展的方法，jQuery类的实例可以使用这个“成员函数”，有点像“类的对象名.方法名”的调用方式。
示例1：
| $(function(){ $.fn.extend({test:function(){alert(1234);}}); $(“a”).test(); }); |
十一、jQuery插件开发实例
1.命名jquery.xxx.js
2.扩展实例方法
jquery.bgcolor.js：
| $.fn.extend({ //options为JSON对象 bgcolor:function(options){ //options JSON属性对象判空 options=options||{};
//定义默认的属性 var defaults={ headClass:'head', overClass:'over', outClass:'out' }; //扩展jQuery类方法，命名参数写法 $.extend(defaults,options); //使用return，支持链式调用 return this.each(function(){ //添加表头样式 $("tr:eq(0)",this).addClass(defaults.headClass); //添加行的悬浮效果 $("tr:gt(0)",this).addClass(defaults.outClass).hover(function(){ $(this).removeClass().addClass(defaults.overClass); },function(){ $(this).removeClass().addClass(defaults.outClass); }); }); } }); |
Bgcolor.css:
| .head{ background:red; } .over{ background:blue; } .out{ background:white; } |
3.链式调用
| //添加行的悬浮效果 $("tr:gt(0)",this).addClass(defaults.outClass).hover(function(){ $(this).removeClass().addClass(defaults.overClass); },function(){ $(this).removeClass().addClass(defaults.outClass); }); |
4.命名参数的写法
| //扩展jQuery类方法，命名参数写法 $.extend(defaults,options); |
十二、Jackson
1.什么是Jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象和xml文档，同样也可以将json、xml转换成Java对象。
2.核心代码
| //JSON操作的核心，Jackson的所有JSON操作都是在ObjectMapper中实现 ObjectMapper toJson=new ObjectMapper( |
3.Jackson使用
3.1JavaBean/Map与JSON互转
注：JavaBean、Map对象转换成JSON的格式：{}
将JavaBean/Map对象转换成JSON对象。
| User user=new User("zhangsan",20,Date.valueOf("1988-8-8"),"12345@qq.com"); ObjectMapper toJson=new ObjectMapper(); //User实体对象转JSON String objJson=toJson.writeValueAsString(user); System.out.println(objJson); //输出结果 {"name":"zhangsan","age":20,"birthday":"1988-08-08","email":"12345@qq.com"}
//Map集合转换成JSON对象 Map<String,User> map=new HashMap<String,User>(); map.put("user", user); String mapJson=toJson.writeValueAsString(map); System.out.println(mapJson); //输出结果 {"user":{"name":"zhangsan","age":20,"birthday":"1988-08-08","email":"12345@qq.com"}} |
将JSON对象转换成JavaBean/Map对象。
| //将JSON对象转换成User实体对象 String strUser="{\"name\":\"zhangsan\",\"age\":20,\"birthday\":586969200000,\"email\":\"12345@qq.com\"}"; User us=mapper.readValue(strUser, User.class); System.out.println(us); //输出结果 User [name=zhangsan, age=20, birthday=1988-08-08, email=12345@qq.com]
//将JSON对象转换成Map对象 String strMap="{\"user\":{\"name\":\"zhangsan\",\"age\":20,\"birthday\":\"1988-08-08\",\"email\":\"12345@qq.com\"}}"; Map<String,User> mp=mapper.readValue(strMap,new TypeReference<Map<String,User>>() {}); System.out.println(mp); //输出结果 {user=User [name=zhangsan, age=20, birthday=1988-08-08, email=12345@qq.com]} |
3.2数组/List/Set与JSON互转
注：数组、List、Set对象转换成JSON的格式：[]
将数组/List/Set对象转换成JSON对象。
| //List<User>集合对象转换成JSON对象 List<User> lst=new ArrayList<User>(); lst.add(user); String lstJson=toJson.writeValueAsString(lst); System.out.println(lstJson); //输出结果 [{"name":"zhangsan","age":20,"birthday":"1988-08-08","email":"12345@qq.com"}] |
将JSON对象转换成数组/List/Set对象。
| //JSON对象转换成List<User>对象 String strLst="[{\"name\":\"zhangsan\",\"age\":20,\"birthday\":\"1988-08-08\",\"email\":\"12345@qq.com\"}]"; List<User> lstUser=toJson.readValue(strLst, new TypeReference<List<User>>() {}); System.out.println(lstUser); //输出结果 [User [name=zhangsan, age=20, birthday=1988-08-08, email=12345@qq.com]] |
3.3混合模式/嵌套使用
| //添加一个用户信息 User user=new User("zhangsan",20,Date.valueOf("1988-8-8"),"12345@qq.com"); //添加一个班级信息，并将用户信息加入到该班级中 Clazz cla=new Clazz(1,"T206",user); //将班级对象转换成JSON对象 ObjectMapper mapper=new ObjectMapper(); String str=mapper.writeValueAsString(cla); System.out.println(str); //输出结果 {"id":1,"cname":"T206","user":{"name":"zhangsan","age":20,"birthday":"1988-08-08","email":"12345@qq.com"}} |
2145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
