常用JS框架
jQuery
DOJO
Ext JS
Prototype
jQuery 框架理念 ： WRITE LESS,DO MORE
jQuery 1.4 企业主流版本，从jQuery1.6 开始引入大量新特性 ，最新版本 1.8.3
jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js
jquery-1.8.3.js jQuery框架源码，没有被精简，体积较大 （主要用来研究 jQuery源码），企业开发时，需要导入 jquery-1.8.3.min.js （精简过）
window.onload = function() {...} 使用jquery $(document).ready(function(){...});
一、jQuery 入门
核心函数 jQuery() 用法有四个
1、jQuery(callback) // 页面onload 函数
2、jQuery(expression, [context]) // 查找指定对象 ------ 九种选择器
3、jQuery(elements) // 将dom对象转换为jQuery对象
* document 是DOM对象 jQuery(document) 成为了jQuery对象
4、jQuery(html, [ownerDocument]) // 将html转换jQuery对象
* jQuery("
hello
") ----- 得到 jQuery对象在这里 请记住第一种用法
jQuery 别名就是 $ 所以 jQuery(callback) 等价于 $(callback)
* 使用jQuery可以一次绑定多个onload函数，而传统模式只能绑定一个onload函数
二、什么是jQuery对象
一种jQuery框架内部特有的对象结果，可以使用jQuery提供方法，将DOM对象 通过jQuery()函数包装，成为jQuery对象
jQuery对象无法使用DOM对象属性方法
DOM对象也无法使用jQuery对象属性方法
jQuery对象类似一个DOM对象数组，数组第一个元素就是 DOM对象
DOM --- jQuery对象 $jQuery对象 = $(DOM对象)
jQuery对象 --- DOM对象 DOM对象 = $jQuery对象[0] 也可以写为 DOM对象 = $jQuery对象.get(0);
三、jQuery选择器
常规选择语言基于CSS3 规范
jQuery(expression, [context]) 在核心函数jQuery中传入 表达式，对页面中元素进行选择
1、基本选择器
根据元素id属性、class属性、元素名称 对元素进行选择
ID选择器 $("#元素id属性")
CLASS选择器 $(".元素class属性")
元素名称选择器 $("元素名称")
多个选择器同时使用 selector1,select2 例如 ： $("#xxid ,.xxxclass") 同时选择 id 和 class匹配两类元素
2、层级选择器
根据祖先、后代、父子关系、兄弟关系 进行选择
ancestor descendant 获取ancestor元素下边的所有元素 $("form input")
parent > child 获取parent元素下边的所有直接child 子元素 $("form > input")
prev + next 获取紧随pre元素的后一个兄弟元素 $("label + input")
prev ~ siblings 获取pre元素后边的所有兄弟元素 $("form ~ input")
3、基本过滤选择器
:first 选取第一个元素 $("tr:first")
:last 选取最后一个元素 $("tr:last")
:not(selector) 去除所有与给定选择器匹配的元素 $("input:not(:checked)")
:even 选取所有元素中偶数索引的元素，从 0 开始计数 $("tr:even") ----- 选取奇数元素
:odd 选取所有元素中奇数索引的元素 ，从 0 开始计数 $("tr:odd") ------ 选取偶数元素
:eq(index) 选取指定索引的元素 $("tr:eq(1)")
:gt(index) 选取索引大于指定index的元素 $("tr:gt(0)")
:lt(index) 选取索引小于指定index的元素 $("tr:lt(2)")
:header 选取所有的标题元素 如：h1, h2, h3 $(":header")
:animated 匹配所有正在执行动画效果的元素
4、内容过滤选择器
内容选择器是对子元素和文本内容的操作
:contains(text) 选取包含text文本内容的元素 $("div:contains('John')") 文本内容含有john 的所有div
:empty 选取不包含子元素或者文本节点的空元素 $("td:empty") td元素必须为空
:has(selector) 选取含有选择器所匹配的元素的元素 $("div:has(p)").addClass("test"); 含有p子元素的div
:parent 选取含有子元素或文本节点的元素 $("td:parent") 所有不为空td元素选中
5、可见性过滤选择器
根据元素的可见与不可见状态来选取元素
:hidden 选取所有不可见元素 $("tr:hidden")
:visible 选取所有可见的元素 $("tr:visible")
6、属性过滤选择器
通过元素的属性来选取相应的元素
[attribute] 选取拥有此属性的元素 $("div[id]")
[attribute=value] 选取指定属性值为value的所有元素
[attribute !=value] 选取属性值不为value的所有元素
[attribute ^= value] 选取属性值以value开始的所有元素
[attribute $= value] 选取属性值以value结束的所有元素
[attribute *= value] 选取属性值包含value的所有元素
7、子元素过滤选择器
对某元素中的子元素进行选取
:nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素 ----- index 从1开始 区别 eq
:first-child 选取第一个子元素
:last-child 选取最后一个子元素
:only-child 选取唯一子元素，它的父元素只有它这一个子元素
8、表单过滤选择器
选取表单元素的过滤选择器
:input 选取所有、
