<div class=”contentToChange”>
<p class=”alert”>警告!警告!警告!警告!</p>
<p class=”firstParagraph”>我是第一段</p>
<p class=”secondParagraph”>第二段,哎,火箭输球了 0比33!火箭替补钉上耻辱柱 <em>姚麦</em>身边再无可用之人频繁失误成姚明致命毒药 板凳消失是火箭落后主因</p>
</div>
jquery代码:
//
获取div.contentToChange下p标记数组长度
alert($(’div.contentToChange p’).size())
// 通过调整高度来显示/隐藏所有匹配的元素,这里的匹配元素是p.firstParagraph
$(’div.contentToChange p.firstParagraph’).slideToggle(’slow’);
// 找到匹配所有div.contentToChange下所有css不为alert的p元素,并在其后面添加文字
$(’div.contentToChange p:not(.alert)’).append(’ < strong class = “ addText “ > 这是新加的文字 </ strong > ‘);
// 找到所有为strong元素且css为addText的元素,然后删除
$(’strong.addText’).remove();
// 找到P标记下css为secondParagraph的元素,然后渐隐
$(’div.contentToChange p.secondParagraph’).hide(’slow’);
// 找到div.contentToChange下所有em元素,然后通过jquery中的css方法改变它们的颜色和字体
$(’div.contentToChange em’).css( {color: “ #993300 “ ,fontWeight: “ bold “ } );
// 添加css样式
$(’div.contentToChange p.secondParagraph’).addClass(’ new ‘)
// 删除css样式
$(’div.contentToChange p.secondParagraph’).removeClass(’ new ‘);
alert($(’div.contentToChange p’).size())
// 通过调整高度来显示/隐藏所有匹配的元素,这里的匹配元素是p.firstParagraph
$(’div.contentToChange p.firstParagraph’).slideToggle(’slow’);
// 找到匹配所有div.contentToChange下所有css不为alert的p元素,并在其后面添加文字
$(’div.contentToChange p:not(.alert)’).append(’ < strong class = “ addText “ > 这是新加的文字 </ strong > ‘);
// 找到所有为strong元素且css为addText的元素,然后删除
$(’strong.addText’).remove();
// 找到P标记下css为secondParagraph的元素,然后渐隐
$(’div.contentToChange p.secondParagraph’).hide(’slow’);
// 找到div.contentToChange下所有em元素,然后通过jquery中的css方法改变它们的颜色和字体
$(’div.contentToChange em’).css( {color: “ #993300 “ ,fontWeight: “ bold “ } );
// 添加css样式
$(’div.contentToChange p.secondParagraph’).addClass(’ new ‘)
// 删除css样式
$(’div.contentToChange p.secondParagraph’).removeClass(’ new ‘);
2).
在这段例子中我们需要用到的HTML代码:
<
div
id
=”jqdt”
style
=”width: 400px; padding: 1em; border: 1px solid #000″
>
< p class =”goofy” > 这个 < em > 段落 </ em > 包括了一些css属性为”groof”的 < strong > 文本 </ strong > , 它还具有一个 < a href =”http://www.englishrules.com” class =”external text” title =”http://www.englishrules.com” > 外部连接 </ a > , 一些 < code > $(代码) </ code > , 和一个超连接属性是以 < a href =”#dt-link3_same-page_link” title =”" > #打头的超连接 </ a > . </ p >
< ol >
< li > list item 1 with dummy link to < a href =”/action/edit/Silly.pdf” class =”new” title =”Silly.pdf” > silly.pdf </ a ></ li >
< li class =”groof” >< em > list < strong > item </ strong > 2 </ em > with class=” < strong > groof </ strong > “ </ li >
< li > list item 3 < span style =”display: none;” > SURPRISE! </ span ></ li >
< li >< strong > list item 4 </ strong > with silly link to < a href =”/action/edit/Silly.pdf_silly.pdf” class =”new” title =”Silly.pdf silly.pdf” > silly.pdf silly.pdf </ a ></ li >
< li >< a href =”contains.php” > 支持火箭 </ a > ,支持MM! </ li >
</ ol >
</ div >
< p class =”goofy” > 这个 < em > 段落 </ em > 包括了一些css属性为”groof”的 < strong > 文本 </ strong > , 它还具有一个 < a href =”http://www.englishrules.com” class =”external text” title =”http://www.englishrules.com” > 外部连接 </ a > , 一些 < code > $(代码) </ code > , 和一个超连接属性是以 < a href =”#dt-link3_same-page_link” title =”" > #打头的超连接 </ a > . </ p >
< ol >
< li > list item 1 with dummy link to < a href =”/action/edit/Silly.pdf” class =”new” title =”Silly.pdf” > silly.pdf </ a ></ li >
< li class =”groof” >< em > list < strong > item </ strong > 2 </ em > with class=” < strong > groof </ strong > “ </ li >
< li > list item 3 < span style =”display: none;” > SURPRISE! </ span ></ li >
< li >< strong > list item 4 </ strong > with silly link to < a href =”/action/edit/Silly.pdf_silly.pdf” class =”new” title =”Silly.pdf silly.pdf” > silly.pdf silly.pdf </ a ></ li >
< li >< a href =”contains.php” > 支持火箭 </ a > ,支持MM! </ li >
</ ol >
</ div >
jquery代码
//
获取第一个list item
$(’#jqdt ol li:eq( 0 )’)
// 等价于
$(’#jqdt’).find(’li:eq( 0 )’) // 以下同
// 获取所有偶数行的list item
$(’#jqdt ol li:even’)
// 获取索引小于3的list item
$(’#jqdt ol li:lt( 3 )’)
// 获取所有li中css不为groof的list item
$(’#jqdt ol li:not(.groof)’)
// 获取P标记下所有超连接属性值以’#'打头的元素
$(’p a[@href *= #]’)
// 获取所有code元素和css为groof的li元素的集合
$(’#jqdt code, li.groof’)
// 先获取ol下css属性为groof的A, 然后找到节点A下的一级子节点strong元素
$(’#jqdt ol .groof > strong’)
// 首先找到所有以list item作为自己的前一节点的list item元素(所以不会选择到第一个list item,因为它的前面没有list item节点了).然后在这些元素中找到超连接属性值以为’pdf’结尾的一级子节点
$(’#jqdt ol li + li > a[@href$ = pdf]’)
// 找到所有已隐藏的span元素
$(’span:visible’)
// 找到超连接中包含火箭字样的元素
$(’li a:contains( “ 火箭 “ )’)
$(’#jqdt ol li:eq( 0 )’)
// 等价于
$(’#jqdt’).find(’li:eq( 0 )’) // 以下同
// 获取所有偶数行的list item
$(’#jqdt ol li:even’)
// 获取索引小于3的list item
$(’#jqdt ol li:lt( 3 )’)
// 获取所有li中css不为groof的list item
$(’#jqdt ol li:not(.groof)’)
// 获取P标记下所有超连接属性值以’#'打头的元素
$(’p a[@href *= #]’)
// 获取所有code元素和css为groof的li元素的集合
$(’#jqdt code, li.groof’)
// 先获取ol下css属性为groof的A, 然后找到节点A下的一级子节点strong元素
$(’#jqdt ol .groof > strong’)
// 首先找到所有以list item作为自己的前一节点的list item元素(所以不会选择到第一个list item,因为它的前面没有list item节点了).然后在这些元素中找到超连接属性值以为’pdf’结尾的一级子节点
$(’#jqdt ol li + li > a[@href$ = pdf]’)
// 找到所有已隐藏的span元素
$(’span:visible’)
// 找到超连接中包含火箭字样的元素
$(’li a:contains( “ 火箭 “ )’)
注:
$(’#jqdt ol.groof > strong’) 其中的>代表只访问下一级子节点中包含strong的元素,
如果改为 $(’#jqdt ol.groof strong’) 则访问所有下级子节点中的strong元素,包括子节点的子节点等。
$(’#jqdt ol.groof > strong’) 其中的>代表只访问下一级子节点中包含strong的元素,
如果改为 $(’#jqdt ol.groof strong’) 则访问所有下级子节点中的strong元素,包括子节点的子节点等。
3).
常用的自定义选择器
:eq(0) 选择索引等于0也就是第一个元素
:gt(4) 选择所有索引大于4的元素
:lt(4) 选择所有索引小于4的元素
:first 等价于 :eq(0)
:last 选择最后一个元素
:parent 选择所有含有子节点的元素 (including text).
:contains(’test’) 选择含有指定文本的元素
:visible 选择所有可见元素(包含:display:block|inline,或者visibility为visible的元素,但是不包括表单元素(type hidden)
:hidden 选择所有隐藏元素(包含:display:none,或者visibility为hidden的元素,包括表单元素(type hidden)
例:
$(’p:first’).css(’fontWeight’,'bold’)
$(’div:hidden’).show();
$( “ div:contains(’test’) “ ).hide();
$(’input[@name = bar]’).val() // 获取名字为bar的input表单的值
$(’select[@name = slt]’).val() // 获取名为slt的下拉菜单的选择中值
$(’input[@type = radio][@checked]’) // 获取所有被选中的radio表单
$(’div:hidden’).show();
$( “ div:contains(’test’) “ ).hide();
$(’input[@name = bar]’).val() // 获取名字为bar的input表单的值
$(’select[@name = slt]’).val() // 获取名为slt的下拉菜单的选择中值
$(’input[@type = radio][@checked]’) // 获取所有被选中的radio表单
表单选择器
:inputSelects all form elements (input, select, textarea, button).
:textSelects all text fields (type=”text”).
:passwordSelects all password fields (type=”password”).
:radioSelects all radio fields (type=”radio”).
:checkboxSelects all checkbox fields (type=”checkbox”).
:submitSelects all submit buttons (type=”submit”).
:imageSelects all form images (type=”image”).
:resetSelects all reset buttons (type=”reset”).
:buttonSelects all other buttons (type=”button”).
例:
$(’myForm:input’)
$(’input:radio’,myForm)
// :radio等价于[@type=radio]
$(’input:radio’,myForm)
// :radio等价于[@type=radio]