Jquery 常用

jQuery 对象访问

each(callback) 类似于C#中的foreach循环。

$("Element”).length   某个对象在html页面中的个数。

$( "Element ”).size()    某个对象在html页面中的个数。

$( "Element”).get() 获取某个元素在html页面的集合，以数组形式构建。

$( "Element”).get(index)   获取index下标的元素。索引从0开始。

$( "Element”).get().reverse() 反转数组内的元素。

$( "Element”).index($(“ Element”)) 获取index中元素在所在匹配对象元素的索引值。

 

jQuery 插件机制    扩展自定义方法

 

比较大小：

$.extend({

   max:function(num1,num2){return num1 > num2 ? num1:num2;}

    min:function(num1,num2){return num1 < mun2 ? num1: num2;}

})

调用 $.max(数字1,数字2);$.min(数字1，数字2);

$.fn.extend({

   check:function(){return this.each(function(){ this.checked = true;}); }

   uncheck:function(){return this.each(function(){this.checked = false; });}

})

调用 $(" input[@type = checkbox]").check()      $(" input[@type = checkbox]").uncheck()

$(" input[@type = checkbox]") 表示选取type类型为checkbox的input标签

$(" input[@name = ]") 表示选取name为 的input标签

 

jQuery 多库共存

js的两种类库：1 jQuery 2 ProToType

使用 var w = noConflict(true); 表示w在JQuery中将替换"$ ”符号。以便于区分。

dom.query = noConflict();表示将"$”控制权交还给原来的库。

dom.query将代表"$"符号。

 

JQuery 选择器

$(" * ")    表示选取所有的对象。

$("#element “)   表示选取ID为 element的元素

$(" .abc “)   表示选取使用abc这个类样式的元素

$("div “)    表示选取html中的所有div元素

$("#a,.b,P“) 表示获取ID是a 使用类样式b 的所有p元素。组合

$("#a .b P“) 表示获取ID是a 的元素包含的使用了样式b 的所有p元素。层级

 

jQuery速成 - 层级对象获取

$("Element1 Element2 Element3 Element4 Element2……") 表示获取层级的元素 前者父级 后者子级

$(" div > input”) 获取div下的所有 input标签元素

$(" div + input”) 表示匹配紧跟在div元素后面的一个p标签元素

$("div ~ p ")   表示匹配在div元素后面的所有P元素

$("Element:first") 表示html页面中某种标签元素的第一个。

$("Element:last") 表示html页面中某种标签元素的最后一个。

$("Element:not(selector)") 去除所有的与给定的选择器匹配的元素。示例：$("input:not(:checked)")表示选择所有没有选中的复选框。

$("Elemnt:even") 表示获得偶数行，从0开始计数。

$("Elemnt:odd") 表示获得奇数行，从0开始计数。

$("Element:eq(index)") 匹配一个给定索引值的元素，索引从0开始。示例：$("div:eq(3)") 获取页面的第4个div

$("Element:gt(index)") 匹配所有大于给定索引值的标签元素 不包含给定索引值的元素    索引从0开始

$("Element:It(index)") 匹配所有小于给定索引值的标签元素   不包含给定索引值的元素    索引从0开始

$(":header") 表示匹配h1 h2 h3 之类的元素。

$("Element:animated")     表示匹配所有没有在执行动画效果中的元素

 

jQuery速成 - 内容对象的获取和对象可见性

$(" Element:contains(text)")   表示匹配标签元素中的文本是否包含某个字母或者字符串。

$("Element:empty") 表示获得元素不包含文本或子元素。

$("Element:parent") 表示获得对象元素包含文本或子元素。

$("Element:has(selector)")   表示匹配某个元素是否包含某个元素。示例$("p:has(span)") 表示包含span元素的所有p元素

$("Element:hidden")     表示匹配所有不可见元素。 包括display：none   input type=hidden

$("Element:visible") 表示匹配所有可见元素。  

 

jQuery速成 - 对象获取进阶

$("Element[id]") 表示获取所有带有ID属性的标签元素。

$("Element[attribute = ko]") 表示获取所有某个属性值为ko的元素。

$("Element[attribute != ko]") 表示获取所有某个属性值不为ko的元素。

$("Element[attribute ^= ko]") 表示获取所有某个属性值以ko开头的元素。

$("Element[attribute $= ko]") 表示获取所有某个属性值以ko结尾的元素。

$("Element[attribute *= ko]") 表示获取所有某个属性值包含ko的元素。

$("Element[selector1][selector2][……]") 表示符合属性选择器，示例$("input[id][name][value=ko]")表示获得带有ID、Name以及value是Ko的input元素。

 

jQuery速成 - 子元素的获取

$("Element:nth-child(index)")
选择父级下的第N个子级元素，索引从1开始，而eq函数（eq函数会在后面学习到）从0开始。
:nth-child(even)偶数
:nth-child(odd)奇数
:nth-child(3n)表达式
:nth-child(2)索引
:nth-child(3n+1)表达式
:nth-child(3n+2)表达式

$("Element:first-child")   表示匹配父级下的第一个子级元素。

$("Element:last-child")   表示匹配父级下的最后一个子级元素。

$("Element:only-child")   表示匹配父级下的唯一个子级元素   示例：dt在dl列表中唯一，那么将选择dt。

 

jQuery速成 - 表单对象的获取

$(":input”) 表示匹配Input元素类型为 input button select textarea

$(”:text”) 表示匹配所有单行文本框

$(":password”) 表示匹配所有密码框

$(":radio") 表示匹配所有单选按钮

$(":checkbox") 表示匹配所有复选框

$(":submit") 表示匹配所有提交按钮

$(":reset") 表示匹配所有重置按钮

$(":button") 表示匹配所有按钮

$(":file") 表示匹配所有文件上传域

$(":hidden") 表示匹配所有不可见元素或者type值为hidden的元素

$(":enabled") 表示匹配所有可用的input元素 示例：radio:enabled表示匹配所有可用的单选按钮

$(":disabled")   表示匹配所有不可用的input元素。

$(":checked") 表示匹配所有选中的复选框元素。

$(":selected") 匹配所有的下拉列表。

 

jQuery速成 - 元素属性的设置与移除。

$("Element").attr(name) 表示获取第一个匹配元素的属性值。

$("Element").attr(key,value) 表示为某一元素设置属性的值。

$("Element").attr({key:value,key,value,....}) 表示为某一元素一次性设置多个值的值 。

$("Element").attr(key,function) 表示为所有匹配的元素设置一个计算的属性值。

$("Element").removeAttr(name) 表示移除某一个属性。

 

jQuery速成 - 过滤

$("Element”).eq(index)   表示获取第n个元素。 index从0算起。$("div”).eq(3) 获取html页面中的第6个div元素

$("Element”).hasClass(“className”) 检查当前元素是否有某个特定的类，如果有返回true。

$("Element”).filter(“Expression1, Expression2, Expression3,……”)   表示刷选出与指定表达式匹配的元素集合。

$("Element”).filter(“function”) 使用同上

$("Element”).is(“Expression”) 表示使用表达式检查元素集合，只要有一个符合的就返回true。

$("Element”).map(“callback”) 将一组元素转换成其他数组。

$("Element”).not(“Expression”) 删除与指定表达式匹配的元素。

$("Element”).slice(start,end)   开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。end (Integer) : (可选) 结束选取自己的位置，如果不指定，则就是本身的结尾。

jQuery速成 - 查找

$("Element”).add(“Expressions”) 把与表达式匹配的元素添加到JQuery对象中。

$("Element”).children(“Expressions”) 表示通过可选的表达式过滤所匹配的子元素。parents将查找所有祖辈元素。children()只考虑所有后代元素。

$("Element”).contents() 表示获取某个元素的子元素内容。

$("Element”).find(“Expressions”) 表示搜索某个元素下面的子元素。 示例 $("div").find("p")等同于$("div p")

$("Element”).next(“Expressions”) 表示获取某个元素后面的同一层的所有元素。

$("Element”).nextAll(“Expressions”) 表示查找当前元素后的所有元素，可用表达式过滤。

$("Element”).prev(“Expressions”) 表示获取一个包含匹配的元素集合中每一个元素紧邻的同一层的元素集合。

$("Element”).parent(“Expressions”) 表示获取包含着所有匹配元素的唯一父元素的元素集合。

$("Element”).parents(“Expressions”) 表示获取一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

$("Element").siblings("Expressions") 查找当前元素之前所有的同层元素,可以用表达式过滤。

jQuery速成 - 串联

$("Element").andSelf()   将先前所选的加入当前元素中比如$("p a")表示选择p下面的所有a元素，如果加上$("p a").andSelf()表示选择的是p

$("Element").end() 回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

 

jQuery速成 - 内部插入

$("Element").append(“content”) 表示像元素中追加内容。

$("Element").appendTo(“content”) 表示将选中的内容追加到另外一个元素内部。相当于颠倒$("Element").append(“content”)

$("Element").prepend(“content”) 向选中的元素中追加内容 并前置。

$("Element").prependTo(“content”)   将选中的元素追加到另外一个元素内部并前置。相当于颠倒$("Element").prepend(“content”)

 

jQuery速成 - 外部插入

$("Element").after(“content”) 表示向选中的元素后面添加内容。

$("Element").before(“content”) 表示向选中的元素前面添加内容。

$("Element").insertAfter(“content”) 把选中的元素插到内容后面 颠倒了$("Element").after(“content”)

$("Element").insertBefore(“content”) 把选中的元素插到内容前面 颠倒了$("Element").before(“content”)

 

jQuery速成 - 包裹

$("Element").wrap("html") 表示把所匹配的元素分别用其他元素的结构化标记包围起来。示例：$("p").wrap(“

") 或 $("p").wrap(“

")

$("Element").wrap("elem") 同上 示例：$("p").wrap($(“#Element"))

$("Element").wrapAll("html") 表示将所有匹配的元素用单个元素包裹起来 示例：$("p").wrapAll("

")便会将所有的p使用一个div包裹起来

$("Element").wrapAll("elem")   同上。

$("Element").wrapInner("html")   表示将每一个匹配的元素的子内容(包括文本也属于子元素)用一个HTML结构包裹起来 示例：$("p").wrapInner("

")

$("Element").wrapInner("elem") 同上

 

jQuery速成 - 替换，删除和复制

 

替换

$("Element"). replaceWith(“contet”) 表示将所有匹配的元素替换成指定的HTML或Dom元素。

$("Element").replaceAll("selector")   表示用匹配的元素替换掉所有selector匹配到的元素。

删除

$("Element").empty() 表示删除匹配元素中的所有子节点。（文本也属于子节点）。

$("Element").remove(“Expressions”) 表示从DOM中删除匹配的元素。

复制

$("Element").clone() 表示复制匹配的DOM元素 并且选中这些克隆的副本。

$("Element").clone(“true”) 表示元素以及其所有的事件处理并且选中这些克隆的副本。比如某个按钮带有事件，他将自己复制后，事件也可以复制。

 

jQuery速成 - 元素的赋值

 

HTML

$("Element").HTML()   表示获取指定元素的HTML代码

$("Element").HTML(“val”)   表示设置指定元素的HTML代码。（HTML代码和平时body中的一样）

文本

$("Element").text()   表示获取指定标签元素中显示的文字

$("Element").text(“val”)   表示设置指定标签元素内容

值

$("Element").val() 获得input的值check ，select ， radio等都能获取

$("Element").HTML(“val”) 设置指定的input的值。

 

jQuery速成 - 样式的设置与定义

$("Element").addClass(“class”)   表示为获得的元素添加某个定义好的类样式。

$("Element").removeClass(“class”)   表示为获得的元素移除已经是使用的类样式。

$("Element").toggleClass(“class”)   表示当获取的元素使用了某定义好的样式就移除样式，没有使用，就添加样式。

$("Element").css(“name”) 表示获取某个元素的css样式。示例：$("div").css(“color”) 表示获取div的颜色。

$("Element").css(name,value) 表示为获取的元素的css样式属性赋值。

$("Element").css({name:”value”,name:”value”,name:”value”,……}) 表示为获取的元素的多个css样式属性赋值。

$("Element").offset()   表示返回元素的整型属性，分别为top 和left。

$("Element").width()    表示获取某个元素的宽度。

$("Element").width(“val”)   表示设置获取元素的宽度。

$("Element").height()    表示获取某个元素的高度。

$("Element").width(“val”)   表示设置获取元素的高度。