坚持每天写博文,记录开发中的点点滴滴
- jQuery
是一个JS的类库(理解成框架),封装了预定义的对象和函数。(JS也是面向对象的)帮助开发者建立有高难度交互的Web2.0特性的富客户端页面,并兼容各大浏览器;
- Web1.0、2.0和3.0
*Web1.0:以内容为主的网站(门户网站)
*2.0:以人的关系为主(社交网站)
*3.0:基于移动互联网的社交网站(微信) - 富客户端页面和瘦客户端
*瘦客户端:静态页面(单纯展示)
*富客户端页面:静态页面+交互 - 目前流行的JS库:
目前至少有上百种JS库,主要有jQuery(全球市场第一,使用第一),Mootools(跟jQuery功能重复),Prototype(理论用处很多,实际用处少)、Dojo(页面的效果)、YUI(有一点落伍)、EXT_JS(市场第二,收费,体积大,不仅提供客户端解决方案并且提供服务器端)、DWR(功能性强,但是很冷门,主要封装了ajax异步交互的功能,把服务器端的JAVA代码编译成客户端独立的JS文件,可以在页面调用JAVA代码) www.open-open.com
收录了有关JS各种知识jQuery的官方团队
*核心研发
*UI研发
*插件研发jQuery的分类
*Web版本:主要使用
*UI版本:UI界面
*mobile版本:针对移动开发
*qunit版本:用于测试(国内很少用)- jQuery版本:
*1.4.2版本:企业开发主流版本
*1.8.3版本:学习研发主流
*1.11.0版本:最新版本
*2.1.0版本:官方宣布不再支持IE浏览器一些版本:6.0、7.0、8.0、9.0 - jQuery优势:
*轻量级,强大的选择器(可以使用CSS1–CSS3,以及其独创的选择器,也支持插件选择器和自定义选择器)
*可靠地事件处理机制
*完善的ajax
*污染的顶级变量:jQuery只有一个对象(jQuery)污染:可以改变对象内容、不污染:不能改变,我们只能调用jQuery,为了不污染顶级变量
*具有约束符($)
*浏览器兼容
*链式操作:对发生在同一个jQuery对象上的一组动作,可以直接连写而无需重复获取对象
*隐式迭代:遍历过程不关心,只关心开始和结束(遍历谁和遍历结果)
*行为层和结构层的分离:行为层:逻辑部分 结构层:HTML标签
*丰富的插件 官方收录大几百种
*完善的文档 - jQuery的使用:引入库类并在页面导入
<script type="text/javascript" src="<%=path%>/js/jquery-1.11.1.min.js"></script>
- 定义变量时加不加“$”:建议加上
var $name="name";
加不加返回的都是jQuery内容,但是加上可以跟别的类库进行区分 - DOM对象和jQuery对象
*DOM对象:利用DOM解析html元素获得的DOM元素就是DOM对象,可以使用JS中的方法。比如:
var email = document.getElementById("email").value
*jQuery对象(底层还是DOM对象):是通过jQuery包装DOM对象后产生的对象。例如:
var email = $("#email").val()
*DOM对象转换成jQuery对象
var email = document.getElementById("email").value
var $email = $(email )//命名没有重复
*jQuery对象转换回DOM对象
//jQuery是数组对象 第一种方式 jQuery对象+索引
var username = $username[0];
//jQuery提供了get(index)方法
var username = $username.get(0);
*DOM对象和jQuery对象可不可以互相调用:不可以
*可靠地事件处理机制
当我使用DOM来获取一个标签的值,但是此时的ID是不存在的,结果打印出来时是NULL
var test = document.getElementById("test111");
alert(test);
此时的错误是username不存在,但是本质上的原因是这个ID不存在,哪能不能有个判断来输出此时是ID不存在呢
当我使用jQuery获取一个不存在ID的值时结果是undifined,底层有一个判断,相对于DOM具有比较完善的事件处理机制
var username = $("test").val();
alert(username);