JQuery——选择元素

  一、$()工厂函数

    在Jquery中无论哪种类型的选择符,都要从一个$()开始,在这个函数接受CSS选择符作为参数,返回包含页面对应元素的Jquery对象。

    基本的选择符:

        选择符      CSS中      Jquery中          说明

        标签名        P{}       $(‘P‘)       取得文档中所有的段落

         ID      #some-id{}   $(‘#some-id‘)    
 取得文档中ID为some-id的一个元素

           类          .some-class{}  
$(‘.some-class‘)     取得文档中类为some-class的所有元素

  二、CSS选择符

    1.子元素组合符(>)

$(document).ready(function(){

$(‘#selected-play > li‘).addClass(‘horizontal‘);

});

     代码说明: 选择ID是selected-play的元素的子元素(>)中所有的列表项(li)

    

     2.非顶级的项,使用否定式伪类选择符(:not)

$(document).ready(function(){
$(‘#selected-plays > li ‘).addClass(‘horizontal‘);
$(‘#selected-plays li :not(.horizontal)‘).addClass(‘sub-level‘);
});

   
 代码说明: 先为ID是selected-play的元素的子元素(>)中所有的列表项(li)添加一个CSS的horizontal类

         
 然后选择ID是selected-play的元素的li元素下,没有horizontal类的元素,然后添加一个sub-level类

    

    3.属性选择符(例如:选择图像的alt属性)  

$(‘ img[alt] ‘)

    在属性选择符中,使用一种从正则表达式中借鉴来的通配符语法:

      以^表示在字符串的开始

$(‘a[href^="mailto:"]‘).addClass(‘mailto‘);//选择a标签的href属性把以"mailto:"开头的链接都添加一个mailto的样式

      以$表示在字符串的结尾

$(‘a[href$=".pdf"]‘).addClass(‘pdflink‘); //选择a标签的href属性把以".pdf"结尾的链接都添加一个pdflink的样式

      以*表示要匹配的值可以在任意位置

$(‘a[href*="henry"]‘).AddClass(‘henrylink‘); //选择a标签的href属性把以"henry"的值出现在任意位置的链接添加henrylink样式

      以!表示要对值取反

    

    4.自定义选择符(跟CSS中的伪类选择语法相同,以冒号开头(:))

     注:在JavaScript中数组采用从0开始的编号方式,而在CSS中是从1开始   

    :eq()选择符

$(‘div.horizontal:eq(1)‘) //从div中带有horizontal类的集合中选择第2项

    :odd选择符,选择偶数项

$(‘tr:odd‘).addClass(‘alt‘);//选择tr中偶数项,添加样式

    :even选择符,选择奇数项

$(‘tr:even‘).addClass(‘alt‘);//选择tr中奇数项,添加样式

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

    :contains()选择符区分大小写,如果$(‘td:contains(henry)‘)中字母"h"变大写"H",则不会选择任何单元格

    

    5.连缀

$(‘td:contains(Henry)‘).parent().find(‘td:eq(1)‘)
.addClass(‘highlight‘).end().find(‘td:eq(2)‘)
.addClass(‘highlight‘);

    上面的代码可以改写成7行,这样改写可读性更高


$(‘td:contains(henry)‘) //取得包含henry的所有单元格
.parent() //取得它的父元素
.find(‘td:eq(1)‘) //在父元素中查找第2个单元格
.addClass(‘highlight‘) //为该单元格添加highlight类
.end() //回复到包含henry的单元格的父元素中
.find(‘td:eq(2)‘) //在父元素中查找第3个单元格
.addClass(‘highlight‘); //为该单元格添加highlight类

JQuery——选择元素,码迷,mamicode.com

时间: 2024-10-06 18:57:41

JQuery——选择元素的相关文章

jQuery选择元素的方法大全

jQuery选择器其实是一个有些地方比较费解的,如果没有经过多次实验的话,很难得出它的每个操作符到底是干什么的,很容易出错,经过 我的多次测试,终于对一些比较难理解或容易出错的选择操作进行总结,既方便自己将来查询又方便初学者学习.如果哪里有不对的还望大家帮我指出来,这里是一 个相互学习的地方. 1. 先说说通过位置选择的几个操作: :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在u

jQuery选择器对应的DOM API ——选择元素

英文原文:http://blog.garstasio.com/you-dont-need-jquery/selectors/愚人码头注: 原作者的写这文章的意图是让我们抛弃jQuery,You Don’t Need jQuery!提倡我们使用原生的JavaScript,所以收集整理了jQuery语法对应的DOM API : 原作者参数的原因可以看这里:http://blog.garstasio.com/you-dont-need-jquery/why-not/ ,个人同意他的观点,简单的页面或应

jQuery 选择具有特殊属性的元素

现在有这样一种需求,需要选出所有有背景图片的元素. 这个问题有点棘手.我们无法使用选择表达式来完成这个问题了. 使用jQuery的DOM过滤方法filter(),可以根据函数中表达的任何条件选择元素. jQuery中的过滤器方法允许传递一个字符串(也就是选择器表达式)作为参数. 或者传递的是一个函数.它的返回值将定义某个元素是否被选中. 传递的函数将对当前选择集中的每个元素运行. 当函数返回假时,对应的函数就从选择集中被删除掉.每当返回值为真的时候,对应的元素 不受影响. jQuery('*')

Jquery 系列(2) 选择元素

Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选择页面元素更灵活的DOM遍历方法 理解DOM树 DOM(Document Object Model)文档对象模型,可以充当JavaScript和网页之间的接口.jQuery最强大的功能就是能轻松的处理和简化在DOM中选择元素.DOM中各元素的关系,同数据结构中的二叉树的称呼非常相近.元素之间的关系包

jQuery基本选择 元素

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>ddd</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script l

初识jQuery,八字真言“选择元素,对其操作”

jQuery在我印象中,就是很多类似$(),然后昨天开始接触了,觉得很和谐,获取元素比JavaScript简单很多,有意思. 一.开始学习jQuery,下载jQuery库的文件 http://jquery.com/download/ jQuery库有两个版本: 我只是使用这个jQuery库,所以我就只下载了生产版本,足以. 二.开始我的第一个Demo 1.html文件 <!DOCTYPE html> <html> <head> <meta charset=&quo

jquery基础教程 - 第二章 选择元素

内容提要 1.网页中元素的介绍 2.如何通过CSS选择符在页面中查找元素 3.扩展jquery标准的CSS选择符 4.让选择页面元素更灵活的DOM遍历方法 本章重点:让我们能够在DOM中快捷而又轻松地获取元素或元素的集合 1.网页中元素介绍 1.1理解DOM -- JQUERY最大的特性之一就是它能够简化在DOM中选择元素的任务, DOM 充当网页和javascript之间的接口,它以对象网络而非纯文本的形式来表现html的代码 <html>是网页中的祖先元素: 搞清楚子元素,父元素,同辈元素

JQuery基础教程:选择元素(上)

jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似,当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素.子元素,等等.通过一个简单的例子,可以帮助我们理解文档各元素构成的树形结构: <html> <head> <title>the title</title> </head> <body> <div> <p>This is a parag

浏览器console中加入jquery,测试选择元素

一.chrome浏览器F12打开调试界面,在console中输入(firefox同样可以): var jquery = document.createElement('script'); jquery.src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js";//若调试页面是https的这里也修改为https. document.getElementsByTagName('head')[0].appendChild(jq