JQuery学习笔记
11月23日
JQuery2.x版本：production jQuery2.1.4（优化压缩后的版本，主要用于部署网站时使用）
：Development JQuery2.1.4（未压缩版本，一般网站建设使用）
：map file for JQuery 2.1.4（一般用于增强调试，不需要下载）
test01.html
$表示当前使用的是jQuery对象来操纵网页，在<script>区域中，$(document).reday是jQuery的页面加载事件，这事件是传统的window.load事件替代方法，当DOM载入就绪时，就会执行括号定义的代码。
加载的事件说明：使用jQuery的选择器选择div元素，使用函数css更改div字体；
为页面上的div元素添加click事件，当点击div时候会弹出消息框。
向HTML页面添加一个新的div元素，并关联click事件。
12月1日
jQuery选择器：
1.基本选择器：id选择器（如 $(“#divId”)） id为divId的元素
标签名称选择器（如 $(“a”)） <a>标签
CSS样式类选择器 （如 $(“.bgRed”)）
多个放在一起用”,”分隔开即可。
扩展
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
12月5日
2.层次选择器：层次关系的选择规则
|
ancestor descendant后代选择器（常用） |
$(".bgRed div")选择CSS类为bgRed的元素所有<div>
|
|
parent>child父类选择器 |
$(".myList>li")选择myLis类的直接子节点<li>对象 |
|
prev+next相邻选择器
|
$("#hibiscus+img")选择id为hibiscus后面同级别的img对象
|
|
prev～slibings 平级选择器
|
$("#someDiv～[title]")选择id为someDiv的对象后面的所有带有title的元素
|
3.过滤选择器：
|
Event 函数 |
绑定函数至 |
|
$(document).ready(function) |
将函数绑定到文档的就绪事件（当文档完成加载时） |
|
$(selector).click(function) |
触发或将函数绑定到被选元素的点击事件 |
|
$(selector).dblclick(function) |
触发或将函数绑定到被选元素的双击事件 |
|
$(selector).focus(function) |
触发或将函数绑定到被选元素的获得焦点事件 |
|
$(selector).mouseover(function) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
4.jQuery事件：
jQuery 隐藏方法hide()、show()展示方法 和toggle()切换方法
1.只能运用在id或class中
2.可设置时延
3.hide()和show()为单独方法，toggle()为前两者的综合
操作DOM：Document Object model(文档对象模型)
12月6日
动态创建内容：$(html)动态创建一个DOM对象
方法：append()：在被选元素的结尾插入内容。
prepend()：在被选元素的开头插入内容。
after():在被选元素之后插入内容。
before():在被选元素之前插入内容。
语法：$(“#idAppend”).click(
function(){
//追加内容
$(“#idcontent”).append(“<b>使用append添加元素</b><br/>”);
}
);
$(“#idappendTo”).click(
Function(){
//追加内容，语法与append颠倒
$(“<b>使用appendto添加元素</b></br>”).appendTo(“#idcontent”);
}
);
动态删除节点：
remove()方法：用来删除指定的DOM元素，它会将节点从DOM元素树中移除。但会返回一个指向DOM元素的引用，并不是真正的将jQuery引用的元素对象删除，可以继续通过这个引用来操作元素。
empty()方法：不会删除节点，只是清空节点中的内容，DOM元素依然保持在DOM元素树中。
12月8日
jQuery事件处理：
页面初始化语法:
$(document).ready(function(){
//页面加载事件的代码
});
注意：为了能正确使用ready事件，必须确保<body>标签中没有定义onload事件，否则不会触发ready事件。而且onload事件必须要等到所有元素下载完成后才会执行，这会影响执行的效率。
简介的语法：
$().ready(function) 或者直接写成 $(function)
切换事件：
hover方法：元素在鼠标悬停与鼠标移除的事件中进行切换。
hover方法的语法：hover([over],out)
toggle方法：可以依次调用多个制定的函数，直到最后一个函数，接着重复对这些函数轮流进行调用。
toggle语法：$(selector).toggle(function(),function(),function())
jQuery插件
https://plugins.jquery.com/ 下载jquery插件。
开发自己的插件。
插件方法分为两类：
1.对象级别的插件开发:指在jQuery的选择器对象上添加对象方法，值有存在一个jQuery对象的实例时，才能调用该插件。比如confirmOn插件，可以看作一个对象级别的插件。
2.类级别的插件开发：指在类级别添加静态方法，并且可以将函数置于jQuery的命名空间中，比如经典的$.ajax()、$.trim()等就是类级别插件。
开发插件注意事项：
$.fn.extend表示要创建一个对象级别的插件。
12月14日：
关于ExtJS、JQuery UI和easy UI的选择问题
首先根据你的需求，你需要这些框架具有你需要的UI组件，ExtJS、easy ui都具备你需要用到的那几款ui组件，比如messagebox、tree、grid。相比较jQuery UI的ui组件不够全面，比如grid，但是jquery有很多各种插件，包括grid,但它不在jQuery UI内。而Ext JS和easy ui最新版提供的GRID都有20种以上实现不同功能grid。
轻重比较，说ExtJS比较大，jquery较小，那只是浅显的理解。首先ExtJS是一个完整的Framework,是重量级别的，easy ui 是基于jquery库的一套UI组件库，是轻量级的，ExtJS是应用application级的，而jquery是page页面级的。当然application也是由page组成的，那就需要你自己去完成了，考虑你的需求，和使用框架的初衷，选择使用哪一种。同时ExtJs由于是重量级框架，完全面向对象风格，提供API非常完备也非常庞大，所以学习成本也想相对较大。
兼容性ExtJS兼容IE全系列浏览器和其他非IE现代浏览器，jquery UI向来不太考虑ie低版本浏览器的兼容，从态度上的鄙视。easy UI是基于jquery的，jquery2.X以上的版本不再支持IE6、7、8,，已郑重声明，请看官方网站，easyUI最新版本1.3.3使用jQuery2.0,由于又很多HTML5特性，不再支持IE6\7\8，低版本由一些小部分的兼容不够好，请自己做技术选型的时候去测试，你要使用那个版本。在兼容问题上，他们都有瑕疵，看你的接收程度。
使用许可license. EXTJS 2.1以上版本，商用需要购买商业授权，jquery UI 使用MIT协议，开源。 jquery easyUI如果商用需遵循license commercial商业许可，也就是要购买使用权.
