jQuery笔记1
浏览 156 | 评论 0
黄文勇
2018年10月28日

jQuery对象与DOM对象

jQuery

var $name=jQuery对象

DOM

var name=DOM对象

DOM转jQuery对象

DOM

var name=DOM对象

jQuery

var $name=$(name)

jQuery选择器

标签选择器:E{css规则}

ID选择器:#ID{css规则}

类选择器:E.className{css规则}

群组选择器:E1,E2,E3{css规则}

后代选择器:E F{css规则}

通配选择器:*{css规则}

基本选择器

选择器 描述 描述 示例
#id 根据给定的id匹配到一个元素 单个元素 $("#test")选取id为test的元素
.class 根据给定的类名匹配到一个元素 集合元素 $(".test")选取所有class为test的元素
element 根据给定的元素名匹配元素 集合元素 $("p")选取所有的<p>元素
* 匹配所有元素 集合元素 $("*")选取所有的元素
selector1,selector2... 匹配所有元素 集合元素 $("div,span,p.myClass")选取所有的<div>,<span>和拥有class为myCalss的<p>标签的一组元素

层次选择器

选择器> 描述> 描述> 示例>
$("ancestor descendant")> 选取ancestor元素里的所有descendant(后代)元素> 集合元素> $("div spant")选取<div>元素里的所有<span>元素>
$("parent>child")> 选取parent元素下的child(子)元素> 集合元素> $("div>span")选取<div>元素下元素名为<span>的子元素>
$("prev+next")> 选取紧接在prev元素后的next元素> 集合元素> $(".one+div")选取class为one的下一个<div>同辈元素>
$("prev~siblings")> 选取prev元素后的所有siblings元素> 集合元素> $("#tow~div")选取id为tow的元素后面的所有<div>同辈元素>

$("prev+next") ==$("prev").next("next")所以可以使用next()方法代替$("prev+next")选择器

基本过滤选择器

选择器 描述 描述 示例
:first 选取第一个元素 集合元素 $("div:first")选取所有<div>元素中第一个<div>元素
:last 选取最后一个元素 集合元素 $("div:not(.myClass)")选取所有<div>元素中最后一个<div>元素
:not(selector) 去除所有与给定选择器匹配的元素 集合元素 $("input:last")选取class不是myClass的<input>元素
:even 选取索引是偶数的所有元素,索引从0开始 集合元素 $("input:even")选取索引是偶数的<input>元素
:odd 选取索引是奇数的所有元素,索引从0开始 集合元素 $("input:odd")选取索引是奇数的<input>元素
:eq(index) 选取索引值等于index的元素,index从0开始 集合元素 $("input:eq(1)")选取索引值等于1的<input>元素
:gt(index) 选取索引值大于index的元素,index从0开始 集合元素 $("input:gt(1)")选取索引值大于1的<input>元素
:lt(index) 选取索引值小于index的元素,index从0开始 集合元素 $("input:lt(1)")选取索引值等小1的<input>元素
:header 选取所有的标题元素,例如h1,h2,h3... 集合元素 $(":header")选取网页中所有的<h1>,<h2>,<h3>....
:animated 选取当前正在执行动画的所有元素 集合元素 $("div:animated")选取当前正在执行动画的<div>元素
:focus 选取当前获取焦点的元素 集合元素 $(":focus")选取当前获取焦点的元素
本文作者:黄文勇
本文链接:https://www.3dcw.cn/index.php/archives/136/
最后修改时间:2020-05-29 17:47:36
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!
评论
与本文无关评论请发留言板。请不要水评论,谢谢。
textsms
支持 Markdown 语法
email
link
评论列表
暂无评论