JQuery属性选择器讲解.doc

1 :header V1.2概述 匹配如 h1, h2, h3之类的标题元素 示例 描述: 给页面内所有标题加上背景色 HTML 代码: h1Header 1/h1 pContents 1/p h2Header 2/h2 pContents 2/p jQuery 代码: $(:header).css(background, #EEE); 结果: [ h1 style=background:#EEE;Header 1/h1, h2 style=background:#EEE;Header 2/h2 ] 2 :animated V1.2概述 匹配所有正在执行动画效果的元素 示例 描述: 只有对不在执行动画效果的元素执行一个动画特效 HTML 代码: button id=runRun/buttondiv/div jQuery 代码: $(#run).click(function(){ $(div:not(:animated)).animate({ left: +=20 }, 1000); }); :focus 概述 触发每一个匹配元素的focus事件。 这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。 示例 描述: 当页面加载后将 id 为 login 的元素设置焦点: jQuery 代码: $(#login:focus); :contains(text) 概述 匹配包含给定文本的元素 参数 textStringV1.1.4 一个用以查找的字符串 示例 描述: 查找所有包含 John 的 div 元素 HTML 代码: divJohn Resig/div divGeorge Martin/div divMalcom John Sinclair/div divJ. Ohn jQuery 代码: $(div:contains(John)) 结果: [ divJohn Resig/div, divMalcom John Sinclair/div ] 5 :empty V1.0概述 匹配所有不包含子元素或者文本的空元素 示例 描述: 查找所有不包含子元素或者文本的空元素 HTML 代码: table trtdValue 1/tdtd/td/tr trtdValue 2/tdtd/td/tr /table jQuery 代码: $(td:empty) 结果: [ td/td, td/td ] 返回值:ArrayElement(s):has(selector) 概述 匹配含有选择器所匹配的元素的元素 参数 selectorSelectorV1.1.4 一个用于筛选的选择器 示例 描述: 给所有包含 p 元素的 div 元素添加一个 text 类 HTML 代码: divpHello/p/div divHello again!/div jQuery 代码: $(div:has(p)).addClass(test); 结果: [ div class=testpHello/p/div ] 7 :parent V1.0概述 匹配含有子元素或者文本的元素 示例 描述: 查找所有含有子元素或者文本的 td 元素 HTML 代码: table trtdValue 1/tdtd/td/tr trtdValue 2/tdtd/td/tr /table jQuery 代码: $(td:parent) 结果: [ tdValue 1/td, tdValue 2/td ] :hidden V1.0概述 匹配所有不可见元素，或者type为hidden的元素 示例 描述: 查找隐藏的 tr HTML 代码: table tr style=display:nonetdValue 1/td/tr trtdValue 2/td/tr /table jQuery 代码: $(tr:hidden) 结果: [ tr style=display:nonetdValue 1/td/tr ] 描述: 匹配type为hidden的元素 HTML 代码: form input type=text name=email / input type=hidden name=id / /form jQuery 代码: $(input:hidden) 结果: [ input type=hidden name=id / ] :visible V1.0概述 匹配所有的可见元素 示例 描述: 查找所有可见的 tr 元素 HTML 代码: table tr style=display:nonetdValue 1/td/tr trtdValue 2/td/tr /table jQuery 代码: $(tr:visible) 结果: [ trtdV