|
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：在动画完成时执行的函数，可选 就暂时先添加这点吧，以后再慢慢完善吧！
|
