jQuery 选择器、DOM操作、事件、动画
Jquery选择器
$(document).ready(function(){})
$(function(){})
如果获取的对象是jQuery对象，那么在变量前面加上$,例如：var $variable=jQuery对象
选择器
1， 判断页面是否存在某元素：if($(“#tt”).length>0){} 或者if($(“#tt”)[0]){};
2， 基本选择器
|
$(“#test”) 选择id为test的元素 |
|
$(“.test”)选择class为test的所有元素 |
|
$(“p”)选择所有的<p>标签 |
|
$(“*”)选择页面上的所有元素 |
|
$(“span ,#two”)选择页面上所有的<span>标签和id为two的元素 |
3， 层次选择器
|
$(“div span”)表示选取div中的所有的span元素 |
|
$(“parent>children”)选取parent下所有children的子元素 |
|
$(‘.one+span')选取class为one的下一个span元素 |
|
$(‘.one~div')选取class为one的后面的所有的div兄弟元素 |
$(‘.one+span')等价于$(“.one”).next(“span”)
$(‘one~div')等价于$(“.one”).nextAll(“div”)
$(“.one”).siblings(“div”) 选取class为one的所有的兄弟元素div，无论前后
4， 过滤选择器
（1）基本的过滤器
|
$(“div:first”)选取所有div元素中第一个div元素 |
|
$(“div:last”)选取所有div元素最后一个div元素 |
|
$(“input:not(.myClass)”)选取class不是myClass的input元素 |
|
$(“input:even”)选取索引是偶数的input元素 |
|
$(“input:odd”)选取索引时奇数的input元素 |
|
$(“input:eq(1)”)选取索引等于1的input元素 |
|
$(“input:gt(1)”)选取索引大于1的input元素（大于1不包括1） |
|
$(“input:lt(1)”)选取索引小于1的input元素 （小于1不包括1） |
|
$(“:header”)选取网页中所有的h1、h2…… |
|
$(“div:animated”)选取正在执行动画的div元素 |
（2）内容过滤器
|
$(“div:contains(‘我')”)选取含有文字“我”的div元素 |
|
$(“div:empty”)选取不包含子元素（包含文本元素）的div空元素 |
|
$(“div:has(p)”)选取含有p元素的div元素 |
|
$(“div:parent”)选取拥有子元素（包含文本元素）的div元素 |
（3）可见性过滤选择器
|
$(“:hidden”)选取所有不可见的元素。包括<input type=”hidden”/>,<div style=”display:none;”>和<div style=”visibility:hidden;”>等元素。如果只想选取<input>元素，可以使用$(“input:hidden”) |
|
$(“div:visible”)选取所有可见的<div>元素 |
（4）属性过滤选择器
|
$(“div[id]”)选取拥有属性id的元素 |
|
$(“div[title=test]”)选取属性title为test的div元素 |
|
$(“div[title!=test]”)选取属性title不是test的div元素（没有属性title的div也会被选取） |
|
$(“div[title^=test]”)选取属性title以test开始的div元素 |
|
$(“div[title$=test]”)选取属性title以test结束的div元素 |
|
$(“div[title*=test]”)选取属性title包含test的div元素 |
|
$(“div[id][title$='test']”)选取拥有属性id，并且属性title以test结束的div元素 |
（5）子元素过滤选择器
|
:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的 |
|
:first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。 例如$(“ul li:first-child”)选取每个ul中第一个li元素 |
|
:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素 |
|
$(“ul li:only-child”)在ul中选取是唯一子元素的li元素 |
:nth-child()选择器是很常用的子元素过滤选择器，详细功能如下：
1.:nth-child(even)能选取每个父元素下的索引值是偶数的元素
2. :nth-child(odd)能选取每个父元素下的索引值的奇数的元素
3.:nth-child(2)能选取每个父元素下索引值等于2的元素
4.nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素(n从0开始)
5.nth-child(3n+1)能选取每个父元素下的索引值是（3n+1）的元素（n从0开始）
（6）表单对象属性过滤选择器
|
$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素 |
|
$(“#form2 :disabled”)选取id为“form2”的表单内的所有不可用元素 |
|
$(“input:checked”)选取所有被选中的input元素 |
|
$(“select :selected”.text())选取所有被选中的选项元素 |
5．表单选择器
|
$(“:input”)选取所有input、textarea、select和button元素 |
|
$(“:text”)选取所有的单行文本框 |
|
$(“:password”)选取所有的密码框 |
|
$(“:radio”)选取所有的单选框 |
|
$(“:checkbox”)选取所有的复选框 |
|
$(“:submit”)选取所有的提交按钮 |
|
$(“:image”)选取所有的图像按钮 |
|
$(“:reset”)选取所有的重置按钮 |
|
$(“:button”)选取所有的按钮 |
|
$(“:file”)选取所有的上传域 |
|
$(“:hidden”)选取所有不可见元素 |
Dom操作
Dom core（核心）、HTML-DOM和CSS-DOM
1. 插入节点的方法
|
append() |
$(“p”).append(“<b>你</b>”) <p>test <b>你</b></p> |
|
appendTo() |
$(“<b>你</b>”).appendTo(“p”) <p>test <b>你</b></p> |
|
prepend() |
$(“p”). prepend ( “<b>你</b>”) <p><b>你</b>test </p> |
|
prependTo() |
$(“p”). prependTo ( “<b>你</b>”) <p><b>你</b>test </p> |
|
After() |
$(“p”). after ( “<b>你</b>”) <p>test </p><b>你</b> |
|
insertAfter() |
$( “<b>你</b>”). insertAfter (“p”) <p>test </p><b>你</b> |
|
Before() |
$(“p”). before ( “<b>你</b>”) <b>你</b><p>test </p> |
|
insertBefore() |
$( “<b>你</b>”). insertBefore (“p”) <b>你</b><p>test </p> |
2. 删除节点
Remove()方法 empty()清空节点
3. 复制节点
Clone() $(this).clone(true).appendTo(“body”)
复制元素的同时复制元素中所绑定的事件
4. 替换节点
replaceWith():$(“p”).replaceWith(“<a>test</a>”);
replaceAll():$(“<a>test</a>”). replaceAll (“p”);
5. 包裹节点
|
Wrap() |
$(“strong”).wrap(“<b></b>”);<b><strong>ssss</strong></b> |
|
wrapAll() |
$(“strong”). wrapAll (“<b></b>”);<b><strong>ssss</strong> <strong>ssss</strong></b> |
|
wrapInner() |
$(“strong”).wrapInner (<b></b>”);<strong><b>ssss</b></strong> |
6. 属性操作
Attr(); 设置多个$(“p”).attr({“title”:”dd”,”name”:”myp”})
removeAttr()移除属性
7. 样式操作
|
获取和设置样式 |
Attr() |
|
追加样式 |
addClass() |
|
移除样式 |
removeClass() removeClass(“one two”) |
|
切换样式 |
toggle()主要控制行为上的重复切换 toggleClass()样式上的重复切换 |
|
判断是否含有某个样式 |
hasClass()等价于is(“.one”) |
8.设置和获取html、文本和值
|
html() |
读取或者设置某个元素中的HTML内容 |
|
text() |
读取或者设置某个元素中文本内容 |
|
val() |
设置和获取元素的值defaultValue初始值 |
9.遍历节点
|
Children() |
取得匹配元素的子元素的集合，只考虑子元素不考虑后代元素 |
|
Next() |
取得匹配元素后面紧邻的同辈元素 |
|
Prev() |
取得匹配元素前面紧邻的同辈元素 |
|
Siblings() |
取得匹配元素前后所有的同辈元素 |
|
Closest() |
取得最近的匹配元素 |
|
还有很多遍历方法：find(),filter(),nextAll(),prevAll(),parent(),parents()等 | |
CSS-DOM操作
|
获取样式 |
$(“.one”).css(“color”) |
|
设置样式 |
$(“.one”).css(“color”,”red”) $(“.one”).css({“opacity”:”0.5”,”background-color”:”blue”}) |
|
Height() |
$(“.one”).height(),设置：$(“.one”).height(“20px”) |
|
Width() |
$(“.one”).width(),设置：$(“.one”).width(“200px”) |
|
Offset() |
获取元素在当前视窗的相对偏移，包括top和left |
|
Position() |
获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，它返回的对象也包括两个属性，即top和left |
|
ScrollTop() |
获取和设置元素的滚动条距顶端的距离 |
|
ScrollLeft() |
获取和设置元素的滚动条距左侧的距离 |
事件和动画
事件
（1） 绑定事件
bind(type[,data],fn);
参数：type：事件类型，也可以自定义名称
data:作为event.data属性值传递给事件对象的额外数据对象
fn：用来绑定的处理函数
绑定多个事件类型
Ex：$(“div”).bind(“mouseover mouseout”,function(){
$(this).toggleClass(“over”);
})
（2） 合成事件
Hover(enter,leave);
用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter）；当光标移除这个元素时，会触发指定的第二个函数（leave）
toggle(fn1,fn2,….fnN);
用户模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数；当在次单击同一个元素时，则触发指定的第二个函数（fn2）；如果有更多的函数，则依次触发，知道最后一个。
（3） 冒泡事件
假设网页上有2个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素也绑定了click事件，当点击最里面元素的事件时，同时其它事件也会触发。从内向外
停止事件冒泡的方法：stopPropagation()
Ex:$(‘span').bind(“click”,function(event){
Var txt=$().html()+”<p>内层span元素被单击</p>”;
$(‘#msg').html(txt);
Event.stopPropagation(); 停止事件冒泡
})
停止表单默认提交：event.preventDefault()==return false;
（4） 移除事件
Unbind([type][,data]);
Type:事件类型
Data：将要移除的函数
（5） 触发一次函数
One（type，[data],fn）;
事件触发后立即解除
动画
|
Show() |
Slow:600毫秒、normal：400毫秒、fast：200毫秒 |
|
Hide() | |
|
Fadeln() |
在指定的一段时间内降低元素的不透明度，直到元素完全消失 |
|
fadeout() |
和上相反 |
|
slideUp() |
与下相反 |
|
slideDown() |
元素将由上之下延伸显示 |
自定义动画animate
语法结构：animate(params,speed,callback);
参数说明如下：
1． Params：一个包含样式属性及值的映射，比如{property1：“value1”，property2:”value2”,….}
2． Speed:速度参数，可选。
Callback：在动画完成时执行的函数，可选
就暂时先添加这点吧，以后再慢慢完善吧！
