jquery之Document元素选择器篇


Posted in Javascript onAugust 14, 2008

1.从$开始  
对于熟悉prototype的朋友,$符号应该很熟悉,   

prototype: var element = $('eleId')
jquery: var element = $('#eleId')
DOM: var element = document.getElementById('eleId')
以上三种选择方式是等价的,相比prototype来说jquery多了个#号
例:

$('#j1′).html()

<div id=“j1“>Hello, jQuery!</content>

2.通过xpath+css来获取你想要的…
   1).
在这段例子中我们需要用到的HTML代码 

<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‘);

   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>
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]

Javascript 相关文章推荐
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
理解JS事件循环
Jan 07 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
了解javascript中的Dom操作
May 27 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
JavaScript国旗变换效果代码
Aug 13 #Javascript
js活用事件触发对象动作
Aug 10 #Javascript
JS支持带x身份证号码验证函数
Aug 10 #Javascript
js获取div高度的代码
Aug 09 #Javascript
js可突破windows弹退效果代码
Aug 09 #Javascript
ext form 表单提交数据的方法小结
Aug 08 #Javascript
ext实现完整的登录代码
Aug 08 #Javascript
You might like
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python中使用HTMLParser解析html实例
2015/02/08 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python微信好友数据分析详解
2018/11/19 Python
python opencv读mp4视频的实例
2018/12/07 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
python中entry用法讲解
2020/12/04 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
超市国庆节促销方案
2014/02/20 职场文书
竞选班委演讲稿
2014/04/28 职场文书
医德医魂心得体会
2014/09/11 职场文书
2014年度思想工作总结
2014/11/27 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
Python实现双向链表基本操作
2022/05/25 Python
element tree树形组件回显数据问题解决
2022/08/14 Javascript