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 相关文章推荐
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
Jquery解析json数据详解
Dec 26 Javascript
移动节点的jquery代码
Jan 13 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 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
是否存在第一台收音机的说法
2021/03/01 无线电
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
在父页面调用子页面的JS方法
2013/09/29 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
Python性能优化的20条建议
2014/10/25 Python
python添加模块搜索路径方法
2017/09/11 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
商业计算机应用专业自荐书
2014/06/09 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
幽灵公主观后感
2015/06/09 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
pandas数值排序的实现实例
2021/07/25 Python