JQuery选择器(上)

HTML5学堂:jQuery的选择器可以让我们很方便的操作获取元素,那么本文介绍的是jQuery选择器的几种选择器,希望对大家有帮助!谢谢!

1.基本选择器(3种):

$("标签名"),如$("p")是选取了所有的p标签节点

$("#id名"),如$("#test")是选取了id为test的标签节点

$(".class名"),如$(".test")是选取了所有class为test的标签节点

上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt等等.

2.组选择器:

下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class.

$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3")

3.后代选择器:

$("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test的标签)

可以见DEMO。

4.子选择器:

$("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子:

$("div>.test")

<div><p class="test"></p></div>对这里的p段落标签有效.但对

<div><p><p class="test"></p></p></div>对这里的p段落标签无效,这里要用

$("div .test)

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

774
来自专栏向治洪

FlexBox布局

概述 FlexBox(弹性框布局):英文全称the flexible box Module,FlexBox旨在提供了在不同尺寸设备上都能保持一致的布局方式。 其...

2068
来自专栏企鹅号快讯

css层叠样式表

CSS概述 CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表 主要作用 为了让网页元素的样式更加...

34611
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(三)链接伪类、背景、行高、盒子模型、浮动

元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父集元素的边框换行。

734
来自专栏前端布道

CSS实现元素居中原理解析

在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人。

592
来自专栏互联网开发者交流社区

HTML超文本标记语言-基础标签整理

1154
来自专栏向治洪

React Native布局之FlexBox

概述 FlexBox(弹性框布局):英文全称the flexible box Module,FlexBox旨在提供了在不同尺寸设备上都能保持一致的布局方式。 ...

2037
来自专栏偏前端工程师的驿站

CSS3魔法堂:背景渐变(Gradient)

一、前言                               很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认...

33110
来自专栏吾爱乐享

php学习之html属性-表格(六)

832
来自专栏木子昭的博客

<干货>5分钟快速回顾HTML CSS

一.html (一)标签类型 1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置) div(无语义) 列表 ur/ol/li 段落 ...

2629

扫码关注云+社区