`
weigang.gao
  • 浏览: 486254 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

选择元素

 
阅读更多

1. padding-right: 30px;/*在对象的内容与对象的右边框之间插入空间(18px)*/

 

2.css选择符是从1开始的,Javascript数组是从0开始的

$('tr:nth-child(even)').addClass('alt');/*这个选择符相对于元素的父元素而非当前选择的所有元素来计算位置*/

 

3.区别:JavaScript数组采用从0开始的编号方式,而CSS则是从1开始的,因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素的第1个子元素

a. jquery自定义选择符:odd和:even。

$('tr:even');//取得偶数行,从0开始编号

b. css选择符:nth-child()

$('tr:nth-child(even)');//取得偶数行,从1开始编号

 

4.jQuery自定义选择符

:odd, :even, :contains(),自定义表单选择符

值得注意的是:contains()选择符区分大小写

 

5.筛选函数filter(),实现隐式迭代能力,保持代码的简洁。

如果没有筛选函数filter(),就必须显示地遍历每个元素,对它们单独进行测试

filter()函数会迭代所有匹配的元素,对每个元素都调用传入的函数并测试函数的返回值。如果函数返回false,则从匹配

集合中删除相应元素;如果返回true,则保留相应元素

 

6,$('a').filter(function(){

  return this.hostname && this.hostname != location.hostname;有字符串返回为true。返回"",则为false

}).addClass('external');

 

7.next()方法只选择下一个最接近的同辈元素(1,同辈元素,2.最接近)。与其相反的是prev()只选择上一个最接近的同辈元素

 

8.nextAll()方法只选择后面所有同辈元素, 与其相反的是prevAll()

 

9.siblings()能够选择处于相同DOM层次的所有其他元素(1,相同DOM层,eg:head与body,2.所有元素),无论这些元素处于当前元素之前

还是之后

 

10.访问DOM元素

jQuery对象能够提供隐式迭代和联缀能力。

尽管如此,我们仍然有很能需要在代码中直接访问DOM元素。Eg:可能需要为另一个JavaScript库提供一组元素的结果集合。或者可能不得不访问某个元素的标签名——通过DOM元素的属性,对于这些少见但合理的情形,jQuery提供了.get()方法。要访问jQuery对象的第一个DOM元素,可以使用.get(0)。

var  $myTagObj = $(‘my-element’);// jQuery对象

var myTagObj = $myTag.get(0); //DOM对象,将jQuery对象转换为DOM对象

var myTag = myTagObj.tagName;//获取标签名

 

为了进一步简化这些代码,jQuery还为.get()方法提供了一种简写方式。比如,可以将

$(‘my-element’).get(0)简写为$(‘my-element’)[0]

 

分享到:
评论

相关推荐

    第四课 jquery选择元素1

    属性选择器允许我们根据元素的属性或属性值来选择元素。如`$("input[name='one']")`将选取所有`name`属性为`one`的`<input>`元素,`$("div [title]")`则选取所有含有`title`属性的`<div>`元素。属性选择器可以灵活地...

    CSS3 属性选择器;属性选择器其特点就是通过属性来选择元素;属性选择器的语法: E:attr;

    属性选择器其特点就是通过属性来选择元素 属性选择器的语法: E:[attr]; E表示元素,attr表示元素中的属性 E:[attr=val]; attr=val表示当元素中的属性值是指定值时,设置一个统一的样式 E:[attr^=val]; attr^=...

    【练习向】jQuery基础教程第四版章节源码——Book02_jQuery_选择元素

    《jQuery基础教程第四版》是学习JavaScript库jQuery的重要参考资料,其中"Book02_jQuery_选择元素"这一章节主要探讨了如何在DOM(文档对象模型)中高效地选取和操作元素,这是jQuery的核心功能之一。在jQuery中,...

    emberx-select, 在本机html选择元素上,选择基于Ember的组件.zip

    emberx-select, 在本机html选择元素上,选择基于Ember的组件 emberx选择 基于本机html选择的选择组件。我们已经尝试了其他选择组件,并且缺少本机 html <select>的可靠性。可以维护性和 accessbility 。 <x-select>

    1-4 ESPRIT 软件中如何选择元素.avi

    1-4 ESPRIT 软件中如何选择元素.avi

    paper-dropdown-menu, 材质设计浏览器选择元素.zip

    paper-dropdown-menu, 材质设计浏览器选择元素 材质设计:下拉菜单paper-dropdown-menu 与本机浏览器选择元素类似。 paper-dropdown-menu 可以用于可以选择的内容。<pa

    select-css, 用于一致选择元素样式的跨浏览器 样式.zip

    select-css, 用于一致选择元素样式的跨浏览器 样式 选择 css跨浏览器 CSS用于一致的选择元素样式。演示页面:http://filamentgroup.github.io/select-css/demo/下载:select-css.css 和 select-css-compat.c

    css的选择器

    伪类用于选择元素的特定状态,而这些状态不是基于属性或元素类型。 - `:link`:选择所有未访问过的链接。 - `:visited`:选择所有已访问过的链接。 - `:active`:选择当前被激活的链接。 - `:hover`:选择鼠标悬停...

    jQuery基本选择器选择元素使用介绍

    总结来说,jQuery基本选择器的选择元素功能,以及后续介绍的过滤选择器等高级选择器,共同构成了强大且灵活的jQuery选择器体系,为前端开发人员提供了高效开发页面交互功能的能力。在实际开发过程中,理解这些选择器...

    HTML5选择器和伪元素----学习分享

    3. 子元素选择器:`:nth-child(n)`和`:nth-of-type(n)`,它们可以根据元素在父元素中的位置来选择元素,n可以是数字、关键词(如even或odd)或表达式。 接下来,我们讨论HTML5的伪元素。伪元素不是实际的HTML元素,...

    jQuery层次选择器选择元素使用介绍

    jQuery层次选择器是基于DOM元素之间的层次关系来选择元素的一组选择器,它主要包括后代选择器、父子选择器、相邻兄弟选择器和普通兄弟选择器。这些选择器能够让我们通过相对简单的方式定位页面中的特定元素集合。...

    使用jQuery内容过滤选择器选择元素实例讲解

    代码如下: <... <head> <!– 内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解...– 使用jQuery内容过滤选择器选择元素:在页

    关于jQuery参考实例2.0 用jQuery选择元素

    在探讨jQuery参考实例2.0关于使用jQuery选择元素的内容时,我们需要了解几个关键知识点:jQuery选择器引擎的核心作用、选择器的语法、自定义选择器的使用、遍历DOM树的方法以及性能优化的技巧。 首先,jQuery的核心...

    python random从集合中随机选择元素的方法

    ### Python Random 模块从集合中随机选择元素的方法 在Python编程中,有时我们需要从一组数据(如列表、元组等)中随机选取一个或多个元素。为了实现这一功能,Python的标准库提供了一个名为`random`的模块。该模块...

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    用选择器1选择元素集合A,用选择器2在A中选择元素 标签名只能写在前面并且只能有一个标签 (5)伪类选择器(只用于链接 用:表示) a:link 未访问过的链接 a:visitied 已访问过的链接 a:hover 选择鼠标经过的...

    详解CSS选择器HTML标签

    2. **类别(Class)选择器**:类别选择器允许我们根据类名来选择元素。类名前通常加一个点`.`。在例子中,`.hongkong`和`.hunang`分别用于选取颜色为蓝色和红色的文本。这样,我们可以对多个元素应用相同的样式,而...

    jQuery中的基本选择器用法学习教程

    - **类选择器**: 使用`.`前缀来选择具有特定类的元素,例如`$('.box')`会选择所有class为`box`的元素。 2. **计数与遍历**: - `length`属性或`size()`方法可用于确定选择器返回的元素数量。例如,`$('div')....

    第03课:CSS基本样式和元素选择器_javascript_Body_

    6. 组合选择器:可以组合使用以上各种选择器,以更精确地选择元素。例如,`h1 + p {margin-top: 20px;}` 会选择紧接在`<h1>`元素后的第一个`<p>`元素,并设置其上外边距为20像素。 7. 通配符选择器 `*`:匹配任何...

    jQuery选择器上机练习题及答案.rar

    (13)选择元素li,该元素作为拥有myList类的ul元素的直接子元素 (14)选择id号为radioA的input元素后面的第一个input兄弟元素 (15)选择id号为radioA的input元素后面的所有input兄弟元素 (16)选择dom sample...

Global site tag (gtag.js) - Google Analytics