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() | Slow:600毫秒、normal：400毫秒、fast：200毫秒 | | Fadeln() | 在指定的一段时间内降低元素的不透明度，直到元素完全消失 | | fadeout() | 和上相反 | | slideUp() | 与下相反 | | slideDown() | 元素将由上之下延伸显示 |

自定义动画animate

语法结构：animate(params,speed,callback);

参数说明如下：

1． Params：一个包含样式属性及值的映射，比如{property1："value1"，property2:"value2",....}

2． Speed:速度参数，可选。

Callback：在动画完成时执行的函数，可选

就暂时先添加这点吧，以后再慢慢完善吧！