码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 查找标签

时间:2018-06-05 15:24:40      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:first   val   inpu   不包含   strong   偶数   遇到   color   索引   

1 基本选择器

//id选择器:
$("#id")
//标签选择器:
$("tagName")
//class选择器:
$(".className")
//配合使用:
$("div.c1")  // 找到有c1 class类的div标签
//所有元素选择器:
$("*")
//组合选择器:
$("#id, .className, tagName")
//层级选择器:
 //x和y可以为任意选择器
   $("x y");// x的所有后代y(子子孙孙)
   $("x > y");// x的所有儿子y(儿子)
   $("x + y")// 找到所有紧挨在x后面的y
   $("x ~ y")// x之后所有的兄弟y

2、基本筛选器:

:first  // 第一个
:last  // 最后一个
:eq(index) // 索引等于index的那个元素
:even  // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd  // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找

// 例子:
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

3、属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type=‘checkbox‘]");// 取到checkbox类型的input标签
$("input[type!=‘text‘]");// 取到类型不是text的input标签

4、间接选择

//下一个元素
$("#id").next()// 找下一个兄弟标签
$("#id").nextAll()// 找下所有兄弟标签
$("#id").nextUntil("#i2")// 找下直到class=l4的兄弟标签
//上一个元素 $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") //父亲元素 $("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元//素为止。
//儿子和兄弟元素 $("#id").children();// 儿子们 $("#id").siblings();// 兄弟们
//查找元素: $("#id").find("p")// 搜索后代所有与指定表达式匹配的元素。 $(".c1").children("p")// 搜索儿子与指定表达式匹配的元素。
//
补充: .first()// 获取匹配的第一个元素 .last()// 获取匹配的最后一个元素 .not()// 从匹配元素的集合中删除与指定表达式匹配的元素 .has()// 保留包含特定后代的元素,去掉那些不含有指定后代的元素

 

jQuery 查找标签

标签:first   val   inpu   不包含   strong   偶数   遇到   color   索引   

原文地址:https://www.cnblogs.com/snailgirl/p/9139394.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!