第70天:jQuery基本选择器(一)
一、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”) |
第70天:jQuery基本选择器(一)的更多相关文章
- jquery-5 jQuery筛选选择器
jquery-5 jQuery筛选选择器 一.总结 一句话总结:选择器加动态添加方法可以不用想方法名,这个简单方便. 1.筛选选择器有哪三种? 过滤 查找 串联 1.过滤 eq();first(); ...
- jQuery学习笔记——jQuery常规选择器
一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery ...
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- HTML 学习笔记 JQuery(选择器)
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
- jQuery的选择器中的通配符总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- JQuery 层次选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...
- jQuery过滤选择器
//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...
- jquery相对选择器,又叫context选择器,上下文选择器;find()与children()区别
jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...
- jQuery之选择器
jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...
随机推荐
- python--模块之re正则表达式
简介: 正则表达式本身是一个小型的.高度专业化的编程语言,而在python中,通过内嵌集成re模块,我们可以通过直接调用来实现正则匹配. 正则表达式基础知识: --普通字符匹配自身 abc ----a ...
- 20145202马超《网络对抗》Exp7 网络欺诈技术防范
本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体有(1)简单应用SET工具建立冒名网站(2)ettercap DNS spoof(3)结合应用两种技术,用DNS spo ...
- 北京Uber优步司机奖励政策(1月5日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- CF 914 D. Bash and a Tough Math Puzzle
D. Bash and a Tough Math Puzzle http://codeforces.com/contest/914/problem/D 题意: 单点修改,每次询问一段l~r区间能否去掉 ...
- CF 314 E. Sereja and Squares
E. Sereja and Squares http://codeforces.com/contest/314/problem/E 题意: 给你一个擦去了部分左括号和全部右括号的括号序列,括号有25种 ...
- nio之netty5应用
1.netty5和netty4的区别不是很大,但是与netty3差别还是有的.这里不介绍netty4,因为和netty5的方式都差不多.netty5的复杂性相对于netty3要多很多了.基本上架构都被 ...
- Android 模拟器 下载、编译及调试
Android 模拟器源码下载 Android 模拟器源码的下载与 Android AOSP 源码库的下载过程类似,可以参考 Google 官方提供的 Android 源码下载文档 来了解这个过程. ...
- jmeter多台压力机测试
jmeter控制机会自动将脚本发送至压力机 1.控制机配置 jmeter.properties中配置: remote_hosts=ip1:1099,ip2:1022,ip3:1099 将压力机ip+p ...
- 利用爬虫、SMTP和树莓派3B发送邮件(爬取墨迹天气预报信息)
-----------------------------------------学无止境----------------------------------------- 前言:大家好,欢迎来到誉雪 ...
- 测试模拟 白屏 / FOUC
白屏和FOUC 白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的. 我们可以通过一个实验来进行测试和模拟白屏.FOUC的现象,让我们更好的理解白屏.FOUC. 测试de ...