JQuery选择元素

JQuery——选择元素

参考《JQuery基础教程》虽然我个人觉得这本书的讲解顺序毫无逻辑,瞎搞

基本选择符

这里写图片描述

具体实例及解析

1.基于列表项的级别添加样式

$('#selected-plays>li').addClass('horizontal');//查找ID为selected-plays的元素的子元素中所有的列表项 
$('#selected-plays li:not(.horizontal)').addClass('sub-level');//没有horizontal类的列表项 

2.为链接添加样式

$('a[href^="mailto:"]').addClass('mailto');//mailto:开头
$('a[href$=".pdf"').addClass('pdflink');//.pdf结尾
$('a[href^="http"][href*="henry"]').addClass('henrylink');//任意位置包含henry

3.自定义选择符

$('tr:nth-child(odd)').addClass('alt');//奇数行
$('td:contains(Henry)').addClass('highlight');//包含henry

注:nth-child()是jQuery中唯一从1开始计数的选择符

4.基于表单的选择符
这里写图片描述
5.DOM遍历

  $('a').filter(function() {
    return this.hostname && this.hostname != location.hostname;
  }).addClass('external');//筛选
$('td:contains(Henry)').next().addClass('highlight');//下一个元素 .nextAll .prev .prevAll
 .siblings//同DOM层次所有其他元素

6.连缀

$('td:contains(Henry)') // Find every cell containing "Henry"
    .parent() // Select its parent
    .find('td:eq(1)') // Find the 2nd descendant cell
      .addClass('highlight') // Add the "highlight" class
    .end() // Return to the parent of the cell containing "Henry"
    .find('td:eq(2)') // Find the 3rd descendant cell
      .addClass('highlight'); // Add the "highlight" class

7.访问DOM元素

var myTag =$('#my-element').get(0).tagName//带有id="my-element"属性的第一个元素
var myTag =$('#my-element')[0].tagName//简写
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值