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 相关文章推荐
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
Underscore源码分析
Dec 30 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
js实现二级联动简单实例
Jan 11 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
JS自定义右键菜单实现代码解析
Jul 16 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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
php学习之function的用法
2012/07/14 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Python异常处理总结
2014/08/15 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
户外亲子活动策划方案
2014/02/07 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
体育之星事迹材料
2014/05/11 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
计算机专业自荐信
2015/03/05 职场文书
校园新闻稿范文
2015/07/18 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS