您好,欢迎访问一九零五行业门户网

jquery之Document元素选择器篇_jquery

1.从$开始  
对于熟悉prototype的朋友,$符号应该很熟悉,
prototype: var element = $('eleid')
jquery: var element = $('#eleid')
dom: var element = document.getelementbyid('eleid')
以上三种选择方式是等价的,相比prototype来说jquery多了个#号
例:
$('#j1′).html()
hello, jquery!
2.通过xpath+css来获取你想要的…
   1).
在这段例子中我们需要用到的html代码
警告!警告!警告!警告!
我是第一段
第二段,哎,火箭输球了 0比33!火箭替补钉上耻辱柱 姚麦身边再无可用之人频繁失误成姚明致命毒药 板凳消失是火箭落后主因
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元素且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代码:
这个 段落 包括了一些css属性为”groof”的 文本, 它还具有一个 外部连接, 一些 $(代码), 和一个超连接属性是以 #打头的超连接.
list item 1 with dummy link to silly.pdf
  list item 2 with class=”groof“
  list item 3 surprise!
  list item 4 with silly link to silly.pdf silly.pdf
  支持火箭,支持mm!
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.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表单
表单选择器
:input selects all form elements (input, select, textarea, button). 
  :text selects all text fields (type=”text”). 
  :password selects all password fields (type=”password”). 
  :radio selects all radio fields (type=”radio”). 
  :checkbox selects all checkbox fields (type=”checkbox”). 
  :submit selects all submit buttons (type=”submit”). 
  :image selects all form images (type=”image”). 
  :reset selects all reset buttons (type=”reset”). 
  :button selects all other buttons (type=”button”).
例:
$('myform:input')
  $('input:radio',myform)
  //:radio等价于[@type=radio]
其它类似信息

推荐信息