RIA技术：

Ajax、Flex、Sliverlight

优势：

轻量级、强大的选择器、出色的DOM操作封装、可靠的事件处理机制、出色的浏览器兼容性

jQuery对象的获取

jQuery对象就是通过jQuery包装DOM对象后产生的对象。
如果获取的是jQuery对象，那么要在变量前面加上$。

var $variable = jQuery对象

var variable = DOM对象

jQuery对象转换成DOM对象

$("#msg")[0]

$("#msg").get(0)

DOM对象转成jQuery对象

$(document.getElementById("msg"))

jQuery对象与dom对象的转换举例

$("#msg").html();

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innnerHTML;

jQuery选择器

$(selector).action();
jQuery(selector).action();

$ == jQuery

基本选择器

#id        $("#id")：根据ID来选择 document.getElementById("id");
.class     $(".class")：根据class来选择
element    $("input")：根据标签来选择

过滤选择器

:first
:last
:even 取第偶数个
:odd 取第奇数个
:eq(index) 取指定位置上的（index为序号，从0开始）
:gt(index) 取序号大于index的对象
:lt(index) 取序号小于index的对象
:empty 取空对象
:not(selector)  
:header 选择~标签
:animated 选择所有动画
:contains(text) 文本选择器，按照字符串选择

属性过滤选择器

[属性] 获取所有包含指定属性的标签
[属性=值] 获取所有满足属性关系的标签  $("[disabled='true']")
[属性!=值] 
[属性$=值]  $("herf$='jpg'") 获取所有herf属性以.jpg结尾的标签

可见性过滤选择器

:hidden 获取不可见的对象
:visible 获取可见对象

表单对象属性过滤选择器



:submit
:text
:reset等等

:enable 选中激活
:disabled 选中禁用
:selected 选中被选取的
:checked 选中被选中的

层次选择器

> 子 
+ 下一个
~ 兄弟节点

:first-child
:last-child
:only-child

DOM操作

查找节点

插入节点

append() 向每个匹配的元素的内部的结尾处追加内容
appendTo() 将每个匹配的元素追加到指定的元素中的内部的结尾处
prepend() 向每个匹配元素的内部的开始处插入内容
prependTo() 将每个匹配的元素插入到指定的元素内部的开始处
after() 向每个匹配的元素之后插入内容
insertAfter() 向每个匹配的元素的插入到指定的元素之后
before() 向每个匹配的元素之前插入内容
insertBefore() 向每个匹配的元素的插入到指定的元素之前

克隆节点

替换节点

replaceWith()

替换成文本

按钮替换

但是替换是类似剪切替换，如果想要按钮不减少则先克隆

replaceAll()

replaceAll

！！：替换后所有绑定的事件都会失效，除了绑定在html的事件。

包裹节点

wrap() 将指定节点用其他标记包裹起来（单独包裹），不会破坏原始文档的语义。
wrapAll() 将所有匹配的元素用一个元素来包裹。
wrapInner() 将每一个匹配的元素的字内容用其他结构化标记包裹起来。

wrap()

wrap()结果

wrapAll

wrapAll结果

属性操作

attr() 获取html属性和设置属性
-当该方法传递一个参数时，即为某元素获取指定属性
-当该方法传递两个参数时，即为某元素这是指定属性的值
removeAttr() 删除指定元素的指定属性

样式操作

追加样式：addClass()
删除样式：removeClass()
切换样式：toggleClass()
判断样式：hasClass() 返回值：boolean

设置和获取HTML，文本和值

读取和设置某个元素中的HTML内容：html()
读取和设置某个元素中的文本内容：text()
读取和设置某个元素中的值：val()
对于文本框，下拉列表，单选框该方法可以返回元素的值（多选框只能返回第一个值）。如果为下拉列表框，则返回一个包含所有选择值得数组。

常用的遍历节点的方法

children() 取得匹配元素的所有子元素组成的集合
next() 取得匹配元素后面紧邻的同辈元素的集合（但集合中只有一个元素）
prev() 取得匹配元素前面紧邻的同辈元素的集合（但集合中只有一个元素）
siblings() 取得匹配元素前后所有的同辈元素

each()

jQuery事件

window.onload=function() {}
$(document).ready(function() {})

bind()

window.onload = function() {
    $("#b1").bind("hover", function(){alert("hover")});
}

unbind()

window.onload = function() {
    $("#b1").bind("hover", function(){alert("hover")});
    $("#b1").bind("click", function(){alert("click")});
    $("#b1").unbind();
}

冒泡事件

jQuery中的动画

隐藏和显示

hide()：代码功能同css("display", "none")
show()：将元素的display样式改为先前的显示状态

fadeIn(),fadeOut()：只改变元素的透明度
slideDown(),slideUp()：只改变元素的高度

Ajax

jQuery笔记