jQuery针对各类元素操作基础教程

本文实例讲述了jQuery针对元素的操作，包括基础操作、选择要操作的元素及处理DOM元素等。对jQuery的学习有很好的借鉴价值。分享给大家供大家参考之用。具体分析如下：
1、基础
jquery对象集：
$（）：jquery对象集合
获取jquery对象集中的元素：
使用索引获取包装器中的javascript元素：

var temp = $（"img[alt]"）[0]

使用jquery的get方法获取jquery对象集中的javascript元素：

var temp = $（"img[alt]"）.get（0）

使用jquery的eq方法获取jquery对象集中的jquery对象元素：

$（"img[alt]"）.eq（0）
$（"img[alt]"）.first（）
$（"img[alt]"）.last（）
jquery对象集转换成javascript数组：

var arr = $（"label+button"）.toArray（）

label后面所有同级button元素，转换成javascript数组
jquery对象集的索引：
var n = $（"img"）.index（$（"img#id"）[0]）注意：index（）参数是javascript元素
var n = $（"img"）.index（"img#id"）等同于上一行找不到返回-1
var n = $（"img"）.index（）获得img在同级元素中的索引
向jquery对象集中添加更多的jquery对象集：
使用逗号：

$（"img[alt],img[title]"）

使用add方法：

$（"img[alt]"）.add（"img[title]"）

对不同的jquery对象集中采取不同的方法：

$（"img[alt]"）.addClass（"thickBorder"）.add（"img[title]"）.addClass（""）;

向jquery对象集中添加新创建的元素：

$（"p"）.add（"<div></div>"）;

删除jquery对象集中的元素：

$（"img[title]"）.not（"[title*=pu]"）$（"img"）.not（function（）{return ！$（this）.hasClass（"someClassname"）}）

过滤jquery对象集：
$（"td"）.filter（function（）{return this.innerHTML.match（^d+$）}）过滤包含数字的td
获取jquery对象集的子集

$（"*"）.slice（0,4）包含前4个元素的新的jquery对象集
$（"*"）.slice（4）包含前4个元素的新的jquery对象集
$（"div"）.has（"img[alt]"）
转换jquery对象集中的元素：

var allIds = $（"div"）.map（function（）{ return （this.id==undefined） ? null : this.id;}）.get（）;

上述示例可通过get方法转换成javascript数组。
遍历jquery对象集中的元素：

$（"img"）.each（function（n）{ this.alt = "这是第["+n+"]张图片，图片的id是" + this.id;}）$（[1,2,3]）.each（function（）{alert（this）;}）

使用元素间关系获取jquery对象集：

$（this）.closest（"div"）比如触发的按钮在哪个div中发生
$（this）.siblings（"button[title="Close"]"）所有同级元素，不包含本身
$（this）.children（".someclassname"）所有子节点元素，不包含重复子节点
$（this）.closest（""）临近祖先元素
$（this）.contents（）由元素内容组成的jquery对象集，比如可以获取<iframe>元素内容
$（this）.next（".someclassname"）下一个同级元素
$（this）.nextAll（）后面所有的同级元素
$（this）.nextUntil（".someclassname"）后面所有的同级元素直到遇到目标元素
$（this）.offsetParent（）离jquery对象集最近的父辈元素
$（this）.parent（）直接父元素
$（this）.parents（）所有父元素
$（this）.parrentsUntil（）所有父元素，直到目标父元素
$（this）.prev（）上一个同级元素
$（this）.prevAll（）之前的所有同级元素
$（this）.prevTntl（）之前的所有同级元素，直到目标元素
其它获取jquery对象集的方式：

$（this）.find（p span）

判断是否是某个jquery对象集：

var hasImg = $（"*"）.is（"img"）;

jquery方法：

$（）.hide（）
$（）.addClass（""）
$（）.html（""）
$（"a"）.size（）元素数量
jquery选择器：

$（"p:even"）
$（"tr:nth-child（1）"）
$（"body > div"）直接子元素
$（"a[href=$="pdf"]"）根据属性选择
$（div:has（a））过滤
jquery函数：

$.trim（）
jquery执行时间：
$（document）.ready（function（）{}）;
$（function（）{}）;
创建DOM元素：

$（"<p></p>"）.insertAfter（）;$（"<img>",{ src: "", alt: "", title: "", click: function（）{}}）.css（{ cursor:"pointer", border:"", padding:"", backgroundColor:"white"}）.append（""）;

jquery扩展：

$.fn.disable = function（）{ return this.each（function（）{ if（this.disabled ！= null） this.disabled = true; }）};$（""）.disable（）;

jquery测试元素是否存在：

if（item）（）{}else{} 宽松测试
if（item ！= null）推荐测试，能把null和undefined区别开
2、选择要操作的元素
根据标签名：$（"a"）
根据id：$（"#id"）
根据类名：$（".someclassname"）
满足多个条件：$（"a#id.someclassname"）或 $（"div,span"）
某个元素的所有子节点：$（p a.someclassname）
某个元素的直接子节点：$（ul.myList > li）
根据属性名：
$（a[href^="http://"]）以...开头
$（href$=".pdf"）以...结尾
$（form[method]）包含method属性的form
$（intput[type="text"]）
$（intput[name！=""]）
$（href*="some"）包含
某元素后的第一个元素：$（E+F）匹配的是F，F是E后面的第一个元素
某元素后的某一个元素：$（E~F）匹配的是F，F是E后面的某一个元素
通过位置：

$（li:first）第一个li
$（li:last）最后一个li
$（li:even）偶数行li
$（li:odd）奇数行li
$（li:eq（n））第n个元素，索引从0开始
$（li:gt（n））第n个元素之后的元素，索引从0开始
$（li:lt（n））第n个元素之前的元素，索引从0开始
$（ul:first-child）列表中的第一个li
$（ul:last-child）列表中的最后一个li
$（ul:nth-child（n））列表中的第n个li
$（ul:only-child）没有兄弟li的ul
$（ul:nth-child（even））列表中的偶数行li,odd为计数行li
$（ul:nth-child（5n+1））列表中被5除余1的li
通过过滤器：

$（input:not（:checkbox））
$（":not（img[src*="dog"]）"）
$（"img:not（[src*="dog"]）"）
$（div:has（span））
$（"tr:has（img[src$="pu.png"]）"）
$（tr:animated）处于动画状态的tr
$（input:button）包括type类型为button,reset,submit的Input
$（input:checkbox）等同于$（input[type=checkbox]）
$（span:contains（food））包含文字food的span
$（input:disabled）禁用
$（input:enabled）启用
$（input:file）等同于$（input[type=file]）
$（:header）h1到h6
$（input:hidden）
$（input:image）等同于$（input[type=image]）
$（:input）包括input, select, textarea, button元素
$（tr:parent）
$（input:password）等同于$（input[type=password]）
$（input:radio）等同于$（input[type=radio]）
$（input:reset）等同于$（input[type=reset]）或$（button[type=reset]）
$（".clssname:selected"）
$（input:submit）等同于$（input[type=submit]）或$（button[type=submit]）
$（input:text）等同于$（input[type=text]）
$（div:visible）
3、处理DOM元素
操作元素的属性：

$（"*"）.each（function（n）{ this.id = this.tagName + n;}）

获取属性值：

$（""）.attr（""）;

设置属性值：

$（"*"）.attr（"title", function（index, previousValue）{ return previousValue + " I am element " + index + " and my name is " + this.id;}） //为一个属性设置值$（"input"）.attr（{ value: "", title: ""}）; //为多个属性设置值

删除属性：

$（"p"）.removeAttr（"value"）;

让所有链接都在新窗口中打开：

$（"a[href^="http://"]"）.attr（"target","_blank"）;

避免表单多次提交：

$（"form"）.submit（function（）{ $（":submit", this）.attr（"disabled","disabled"）;}）

添加类名：

$（"#id"）.addClass（""）

删除类名：

$（"#id"）.removeClass（""）

切换类名：

$（"#id"）.toggleClass（""）

存在就删除类名，不存在就添加类名
判断是否含有类名：

$（"p:first"）.hasClass（""） $（"p:first"）.is（""）

以数组形式返回类名列表：

$.fn.getClassNames = function（）{ var name = this.attr（"someclsssname"）; if（name ！= null）{ return name.split（" "）; } else { return []; }}

设置样式：

$（"div.someclassname"）.css（function（index, currentWidth）{ return currentWidth + 20;}）;$（"div"）.css（{ cursor: "pointer", border: "1px solid black", padding: "12px 12px 20px 20x", bacgroundColor: "White"}）;

有关尺寸：

$（div）.width（500）
$（"div"）.height（）
$（"div"）.innerHeight（）
$（"div"）.innerWidth（）
$（"div"）.outerHeight（true）
$（"div"）.outerWidth（false）

有关定位：

$（"p"）.offset（）相对于文档的参照位置
$（"p"）.position（）偏移父元素的相对位置
$（"p"）.scrollLeft（）水平滚动条的偏移值
$（"p"）.scrollLeft（value）
$（"p"）.scrollTop（）
$（"p"）.scrollTop（value）

有关元素内容：

$（"p"）.html（）
$（"p"）.html（""）
$（"p"）.text（）
$（"p"）.text（""）
追加内容

在元素末尾追加一段html：

$（"p"）.append（"<b>some text</b>"）;

在元素末尾dom中现有的元素：

$（"p"）.append（$（a.someclassname））

在元素开头追加：

$（"p"）.prepend（）

在元素的前面追加：

$（"span"）.before（）

在元素的后面追加：

$（"span"）after（）

把内容追加到末尾：

appendTo（targets）

把内容追加到开头：

prependTo（targets）

把内容追加到元素前面：

insertBefore（targets）

把内容追加到元素后面：

$（"<p></p>"）.insertAfter（"p img"）;

包裹元素：

$（"a.someclassname"）.wrap（"<div class="hello"></div>"）
$（"a.someclassname"）.wrap（$（"div:first"）[0]）
$（"a.someclassname"）.wrapAll（）
$（"a.someclassname"）.wrapInner（）
$（"a.someclassname"）.unWrap（）
删除元素：

$（".classname"）.remove（）删除元素，绑定到元素上的事件和数据也会被删除
$（".classname"）.detach（）删除元素，但保留事件和数据
$（".classname"）.empty（）不删除元素，但清空元素内容
复制元素：

$（"img"）.clone（）.appendTo（"p.someclassname"）

$（"ul"）.clone（）.insertBefore（"#id"）

替换元素：

$（"img[alt]"）.each（function（）{ $（this）.replaceWith（"<span>" + $（this）.attr（"alt"） + "</span>"）;}）$（"p"）.replaceAll（"<b></b>"）

关于表单元素的值：

$（"[name="radioGroup"]:checked"）.val（）获取单选按钮的值，如果没有选中一个，返回undefinedvar checkboxValues = $（"[name="checkboxGroup"]:checked"）.map（function（）{ return $（this）.val（）;}）.toArray（）; //获取多选框的值

对于<select id="list" multiple="multiple">使用$（"#list"）.val（）返回值的数组
$（"input"）.val（["one","two","three"]）如果单选框或复选框与数组中的元素匹配，则选中状态
相信本文所述对大家的jQuery程序设计有一定的借鉴价值。