jQuery选择器——基础选择器、层次选择器

注:$("#tt")获取的永远是对象,即时网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时,不能使用以下代码:

if($("#tt")){}
而应该根据获取到元素的长度来判断,代码如下:
if($("#tt").length>0){}
或者转换DOM对象来判断,代码如下:
if($("tt")[0]){}

基本选择器

#id   id选择器    $("#test")选取id为test的元素

.class    类选择器  $(".test")选取class为test的元素

element   元素选择器  $("p")选取所有<p>元素

*    匹配所有元素  $("*")选取所有元素

selector1,slector2,....,selectorN   匹配到每个元素合并后一起返回  $("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素

eg:

$("#one").css("background","#000000");//jQuery
document.getElementById("one").style.color = "red";//DOM

层次选择器

$("div span")  选取div里所有的span元素

$("div>span")  选取div下的span子元素

$(".one+div")  选取class为one的下一个div同辈元素

$("#two~div") 选取id为two的元素后面的所有div同辈元素

注:后面两个选择器可以用更简单的方式代替

$(".one").next("div");

$("#two").nextAll("div");

上边两个方法都是选取后边的div元素

$("#two").siblings("div");不分前后,获取全部同级div

时间: 2024-10-03 05:45:18

jQuery选择器——基础选择器、层次选择器的相关文章

jQuery学习——入门jQuery选择器之层次选择器

今天说的是层次选择器,那层次选择器有哪几个? $("ancestor descendant"):选取parent元素后所有的child元素 $("parent > child"):选取parent元素后所有的直属child元素,何谓“直属”,也就是第一级的意思了 $("prev + next"):prev和next是两个同级别的元素. 选中在prev元素后面的next元素 $("prev ~ siblings"):选择p

初探jquery之强大丰富的选择器

---恢复内容开始--- 1.基本选择器 常用的有id选择器:#id,   类选择器:.class , 元素选择器. 2.层次选择器 $(ancestor descendant):选取ancestor元素里的所有descendant后代元素. 示例:$("body div"): 改变<body>内所有div元素的背景色 <script> $("body div").css("background",red); </s

jQuery基础学习7——层次选择器find()方法

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

JavaScript之jQuery-2 jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

一.jQuery 选择器 jQuery 选择器简介 - jQuery 选择器类似于 CSS 选择(定位元素,施加样式),能够实现定位元素,施加行为 - 使用 jQuery 选择器能够将内容与行为分离 - 学会使用选择器是学习 jQuery 的基础 jQuery 选择器的优势 - 简洁的写法: - $()工厂函数在很多JavaScript类库中都被作为一个选择器函数使用 - 支持 CSS1 到 CSS3 选择器 - jQuery 选择器支持 CSS1.CSS2 和 CSS3 选择器,同时拥有少量独

基础,层次,选择器

基础,层次,选择器 1.基本选择器 1.标签选择器 $("标签名") $("p").html() //获取p标签对象,是jquery对象形式的 $("p").length 2.类选择器 $(".class值") 3.id选择器 $("#id值") 3.并集选择器 逗号隔开 $(".class值,#id值") 4.交集选择器(同时存在) $("class值id值") $

一步一步学习 JQuery (二) 选择器: 基本选择器 &amp;&amp; 层次选择器

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法 完善的事件处理机制 一.基本选择器 基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用). 改变 id 为 one 的元素的背景色为 # bbffaa 改变 class 为 mini 的所有元素的背景

黑马day16 jquery&amp;amp;层次选择器

假设想通过DOM元素之间的层次关系来获取特定元素,比如后代元素,子元素,相邻元素,兄弟元素等,则须要使用层次选择器. 1 .ancestor descendant 使用方法: $("form input") ;   返回值  集合元素 说明:在给定的祖先元素下匹配全部后代元素.这个要以下讲的"parent> child"区分开. 2.parent > child 使用方法: $("form > input") ;    返回值 

jquery 中多条件选择器,相对选择器,层次选择器的区别

一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素,比如$("

jQuery选择器介绍:基本选择器、层次选择器、过滤选择器、表单选择器

选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了CSS的风格.利用jQuery选择器,可以非常便捷的找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器是否支持这一选择器. jQuery选择器可简单分为基本选择器.层次选择器.过滤选择器.表单选择器.下面通过表格进行一一介绍. 1.基本选择器 选择器 描 述 返 回 示 例 #id 匹