首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第70天:jQuery基本选择器(一)

第70天:jQuery基本选择器(一)

作者头像
半指温柔乐
发布2018-09-11 12:03:14
4190
发布2018-09-11 12:03:14
举报
文章被收录于专栏:前端知识分享前端知识分享

一、jQuery基本选择器

jQuery是javascript的一个,包含多个可重用的函数,用来辅助我们简化javascript开发

jQuery能做的javascipt都能做到,而javascript能做的事情,jQuery不一定能做到

1、CSS选择器

CSS选择器回顾

符号

说明

用法

#id

Id选择器

#id{ color:red; }

.class

类选择器

.class{ //}

Element

标签选择器

P { //}

*

通配符选择器

配合其他选择器来使用

,

并集选择器

div,p{}

空格

后代选择器

div span{} 选择div下面所有后代的span

>

子代选择器

div > span{}

+

紧邻选择器

div+p 选择div紧挨着的下一个p元素

2、 jQuery基本选择器

基本选择器

符号

说明

用法

$(“#demo”)

选择id为demo的第一个元素

$(“#demo”).css(“background”,”red”)

$(“.liItem”)

选择所有类名(样式名)为liItem的元素

$(“.liItem”). css(“background”,”red”);

$(“div”)

选择所有标签名字为div的元素

$(“div”). css(“background”,”red”);

$(“*”)

选择所有元素 少用或配合其他选择器来使用

$(“*”). css(“background”,”red”)

$(“.liItem,div”)

选择多个指定的元素,这个地方是选择出了 .liItem元素和div元素

$(“.liItem,div”). css(“background”,”red”)

3、层级选择器

层级选择器

符号

说明

用法

空格

后代选择器 选择所有的后代元素

$(“div span”). css(“background”,”red”);

>

子代选择器 选择所有的子代元素

$(“div > span”). css(“background”,”red”)

+

紧邻选择器 选择紧挨着的下一个元素

$(“div + p”). css(“background”,”red”)

~

兄弟选择器 选择后面的所有的兄弟元素

$(“div ~ p”). css(“background”,”red”)

4、过滤选择器

基本过滤选择器

符号

说明

用法

:eq(index)

index是从0开始的一个数字,选择序号为index的元素。选择第一个匹配的元素。

$(“li:eq(1)”). css(“background”,”red”)

:gt(index)

Index 是从0开始的一个数字,选择序号大于index的元素

$(“li:gt(2)”). css(“background”,”red”)

:lt(index)

Index是从0开始的一个数字,选择小于index 的元素

$(“li:lt(2)”). css(“background”,”red”)

:odd

选择所有序号为奇数行的元素

$(“li:odd”). css(“background”,”red”)

:even

选择所有序号为偶数的元素

$(“li:even”). css(“background”,”red”)

:first

选择匹配第一个元素

$(“li:first”). css(“background”,”red”)

:last

选择匹配的最后一个元素

$(“li:last”). css(“background”,”red”)

5、属性选择器

属性选择器

符号

说明

用法

$(“a[href]”)

选择所有包含href属性的元素

$(“a[href]”). css(“background”,”red”)

$(“a[href=’itcast’]”)

选择href属性值为itcast的所有a标签

$(“a[href=’itcast’]”). css(“background”,”red”)

$(“a[href!=’baidu’]”)

选择所有href属性不等baidu的所有元素,包括没有href的元素

$(“a[href!=’baidu’]”). css(“background”,”red”)

$(“a[href^=’web’]”)

选择所有以web开头的元素

$(“a[href^=’web’]”). css(“background”,”red”)

$(“a[href$=’cn’]”)

选择所有以cn结尾的元素

$(“a[href$=’cn’]”). css(“background”,”red”)

$(“a[href*=’i’]”)

选择所有包含i这个字符的元素,可以是中英文

$(“a[href*=’i’]”). css(“background”,”red”)

$(“a[href][title=’我’]”)

选择所有符合指定属性规则的元素,都符合才会被选中。

$(“a[href][title=’我’]”). css(“background”,”red”)

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-10-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、jQuery基本选择器
    • 1、CSS选择器
      • 2、 jQuery基本选择器
        • 3、层级选择器
          • 4、过滤选择器
          • 5、属性选择器
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档