jQuery 基础教程 (三)之jQuery的选择器

一、jQuery 选择器

(1)选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器

(2)jQuery 选择器的优点:

简洁的写法

$('#id)    //documnet.getElementById('id');
$('p')     //documnet.getElementByTagName('p');

(3)完善的事件处理机制

//若在网页中没有id为'id'的元素,浏览器会报错
//document.getElementById('id').style.backgroundColor='blue';//需要先判断document.getElementById('id')是否存在
if(document.getElementById('id'))document.getElementById('id').style.backgroundColor='blue';//使用jQuery获取网页中的元素即使不存在页面也不会报错
$("#id").css("backgroundColor","blue");

 

二、基本选择器

(1)基本选择器是 jQuery 中最常用的选择 器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素

(2)基本选择器示例

(A)改变 id 为 one 的元素的背景色为 红色

    $("#one").css("backgroundColor","red");

(B)改变元素名为的所有元素的背景色为 # bbffaa,字体颜色为红色

    $("p").css({color:"red",backgroundColor:"#bbffaa"});

(C)改变第一个元素的背景色为红色

    $("p").eq(0).css("backgroundColor","red");

(D)改变所有元素和 id 为 one 的元素的背 景色为 # bbffaa

     $("h1,#one").css("backgroundColor","#bbffaa");

 

三、层次选择器

(1)如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使 用层次选择器

注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后 面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位 置无关, 只要是同辈节点就可以选取

(2)层次选择器示例

(A)改变内所有的背景色为 # bbffaa

    $(“body div")

(B)改变内子的背景色为 # bbffaa

    $("body>div")

(C)改变 id 为 one 的下一个的背景色为 # bbffaa

    $("#one+div")

(D)改变 id 为 two 的元素后面的所有兄弟的元素的背 景色为 # bbffaa

    $("#two~div")

(E)改变 id 为 two 的元素所有兄弟元素的背景色为 # bbffaa

    $("#two"). siblings("p")

 

四、过滤选择器

(1)过滤选择器主要是通过特定的过滤规则来 筛选出所需的 DOM 元素, 该选择器都以 “:” 开头

(2)按照不同的过滤规则, 过滤选择器又可分为 基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

(3)基本过滤选择器

(4)基本过滤选择器示例

(A)改变第一个 div 元素的背景色为 # bbffaa

    $("div:first")

(B)改变id不为 one 的所有p元素的背景色为 # bbffaa

    $("p:not('#one')")

(C)改变索引值为偶数的 tr元素的背景色为 # bbffaa

    $(“tr:even")

(D)改变索引值为大于 3 且为奇数的 p元素的背景色为 # bbffaa

    $(“p:gt(3):odd")

(E)改变所有的标题元素的背景色为 # bbffaa

   $(":header")

(F)改变当前正在执行动画的所有元素的背景色为 # bbffaa

   $(":animated")

 

五、内容过滤选择器

(1)内容过滤选择器的过滤规则主要体现在它 所包含的子元素和文本内容上

(2)内容过滤选择器示例

(A)改变含有文本 ‘di’ 的 p元素的背景色为 # bbffaa

    $("p:cotains(di)")

(B)改变不包含子元素(或者文本元素) 的 div 空 元素的背景色为 # bbffaa

   $("div:empty")

(C)改变含有 class 为 mini 元素的 p元素的背景 色为 # bbffaa

     $("p:has(.mini)")

(D)改变含有子元素(或者文本元素)的div元素 的背景色为 # bbffaa

    $("div:parent")

 

六、可见性过滤选择器

(1)可见性过滤选择器是根据元素的可见和不可见状态来选 择相应的元素

(2)可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素

(3)可见性过滤选择器示例

(A)改变所有可见的div元素的背景色为 # bbffaa 

    $("div:visible")

(B)选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景 色为 # bbffaa 

    $(":hidden")

(C)选取所有的文本隐藏域, 并打印它们的值

     $("input:hidden")

 

七、属性过滤选择器

(1)属性过滤选择器的过滤规则是通过元素的 属性来获取相应的元素

(2)属性过滤选择器示例

(A)选取有属性id的div元素,然后在结果中选取属性title值 含有“es”的 div 元素.

    $("div[id][title='es']")

(B)含有属性title 的div元素.

     $("div[title]")

(C)属性title值等于"test"的div元素.

    $("div[title='test']")

(D)属性title值不等于"test"的div元素(没有属性title的也将被选中).

     $("div[title!='test']")

(E)属性title值 以"te"开始 的div元素.

     $("div[title^='te']")

(F)属性title值 以"est"结束 的div元素.

     $("div[title$='est']")

(G)属性title值 含有"es"的div元素.

    $("div[title*='es']") 

 

八、子元素过滤选择器

(1)nth-child() 选择器详解如下:

(A) :nth-child(even/odd): 能选取每个父元素下的索引值 为偶(奇)数的元素

(B):nth-child(2): 能选取每个父元素下的索引值为 2 的 元素

(C):nth-child(3n): 能选取每个父元素下的索引值是 3 的 倍数 的元素

(D):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

(2)子元素过滤选择器示例

每个class为one的div父元素下的第2个子元素.

   $("div.one:nth-child(2)")

每个class为one的div父元素下的第一个子元素

   $("div.one:first-child")   $("div.one:nth-child(1)")

每个class为one的div父元素下的最后一个子元素

   $("div.one:last-child")

如果class为one的div父元素下的仅仅只有一个子元素, 那么选中这个子元素

   $("div.one:only-child")

 

九、表单对象属性过滤选择器

(1)此选择器主要对所选择的表单元素进行过滤

(2)表单对象属性过滤选择器示例

利用 jQuery 对象的 val() 方法改变表单内 可用 元素的值

    $(":enabled").val('xx')

利用 jQuery 对象的 val() 方法改变表单内 不可用 元素的值

    $(":disabled").val('xx')

利用 jQuery 对象的 length 属性获取多选框 选中的个数

    $("input[type='checkbox']:checked").length

利用 jQuery 对象的 text() 方法获取下拉框 选中的内容

   $(":selected").text()

 

十、表单选择器

 

练习

1. 给网页中所有的<p>元素添加 onclick 事件

2. 是一个特定的表格隔行变色

3. 对多选框进行操作, 输出选中的多选框的个数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/327044.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用rollback()VS不用rollback()

不用rollback()表面和用了rollback()效果一样&#xff0c;但是不用rollback()可能导致被锁住的数据不能及时的释放&#xff08;需要等事物超时释放&#xff09;,会影响下一次的事物操作

使用ueditor实现多图片上传案例——Dao层(IBaseDaoUtil)

/*** */ package org.dao;/*** * * 项目名称&#xff1a;test_face_photo * 类名称&#xff1a;IBaseDaoUtil * 类描述&#xff1a; 共用接口 * 创建人&#xff1a;Mu Xiongxiong * 创建时间&#xff1a;2017-9-22 下午6:59:36 * 修改人&#xff1a;Mu Xiong…

update字段变更SpringBoot @JsonProperty的使用属性的名称序列化为另外一个名称

https://blog.csdn.net/wtb617806038/article/details/86093301 Restful 接口调用Json接收相关问题 1、背景&#xff1a; 在项目上使用SpringBoot为框架&#xff0c;调用第三方接口时&#xff0c;返回的参数类型&#xff0c;不符合标准的命名规则&#xff0c;需要进行处理&am…

SQL Server 2014内存优化表的使用场景

最近一个朋友找到走起君&#xff0c;咨询走起君内存优化表如何做高可用的问题 大家知道&#xff0c;内存优化表是从SQL Server 2014开始引入&#xff0c;可能大家对内存优化表还是比较陌生&#xff0c;网上也鲜有内存优化表使用场景的文章 朋友公司做的业务是跟蜂鸟配送类似的配…

jQuery 基础教程 (二)之jQuery对象与DOM对象

一、jQuery 对象 &#xff08;1&#xff09;jQuery 对象就是通过 jQuery 包装DOM对象后产生的对象 &#xff08;2&#xff09;Query 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#tab”).html(); &#xff08;3&#xff09;j…

使用ueditor实现多图片上传案例——Dao层(IShoppingDao)

/** * Title: IShoppingDao.java * Package org.dao * Description: TODO该方法的主要作用&#xff1a; * author A18ccms A18ccms_gmail_com * date 2017-9-30 下午9:57:35 * version V1.0 */ package org.dao;import org.entity.Shopping;/** * * 项目名称&#x…

String转Double

String转Double String.format("%.1f",Double.parseDouble(r.getString(5)))

春节祝福提前到

2017 鸡 年 大 吉 HAPPY NEW YEAR 鸡年起算自二十四节气之立春&#xff0c;因为生肖年依附于干支纪年&#xff0c;而干支纪年又是干支历的纪年方法。历代官方历书&#xff08;即黄历&#xff09;皆如此。农历只是借用干支来纪年&#xff0c;和干支历是两种不同的历法&#xf…

jQuery 基础教程 (一)之jQuery的由来及简介

一、RIA技术 &#xff08;1&#xff09;RIA(Rich Internet Applications) 富互联网应用,具有高度互动性、丰富用户体验以及功能强大的客户端。 &#xff08;2&#xff09;常见的RIA技术 Ajax Flex Sliverlight &#xff08;3&#xff09;JavaScript及其框架是实现RIA的重…

使用ueditor实现多图片上传案例——DaoImpl层(BaseDaoUtilImpl)

/*** */ package org.dao.impl;import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List;import org.dao.BaseDao; import org.entity.Shopping;/*** * * 项目名称&#xff1a;test_BaseDao * 类名称&#xff1a…

外键

如图有两张表&#xff0c;classId 是T_Student的外键&#xff0c;是T_class 表的主键&#xff0c; 如果我们要删除T_class 表中classId为1的字段&#xff0c;程序是会报错的&#xff0c;因为t_student表中有数据和classId为1的字段关联了&#xff0c;是不能删除的&#xff0c;这…

mybatis=<>的写法

mybatis<>的写法 第一种写法&#xff08;1&#xff09;&#xff1a; 原符号 < < > > & " 替换符号 < < > > &amp; &apos; &quot; 例如&#xff1a;sql如下&#xff1a; create_date_time > #{startTime} and create_…

新春大吉,2017 Make .NET Great

今天年初六&#xff0c;新春好景象&#xff0c;送礼处处有新意。这个春节暂停了几天的公众号更新&#xff0c;今天就和大家回顾下最近几天发生在我们身边的.NET 圈里的信息。 1、 微软正式公布了.NET Core SDK 1.0 RC3的信息&#xff0c;其实早已包含在最近更新的Visual Studio…

使用ueditor实现多图片上传案例——DaoImpl层(ShoppingDaoImpl)

/** * Title: ShoppingDaoImpl.java * Package org.dao.impl * Description: TODO该方法的主要作用&#xff1a; * author A18ccms A18ccms_gmail_com * date 2017-9-30 下午10:09:23 * version V1.0 */ package org.dao.impl;import org.dao.IShoppingDao; import org.e…

给数据表中的字段添加约束

添加唯一约束 唯一约束&#xff08;Unique Constraint&#xff09;要求该列唯一&#xff0c;允许为空&#xff0c;但是只能有一个空值。唯一约束可以确保一列或者几列不出现重复值。 定义部门表的部门名称唯一&#xff0c;SQL语句如下&#xff1a;关键词 UNIQUE。 CREATE TA…

头条面试题:请谈谈Redis 9种数据结构以及它们的内部编码实现

转载自 头条面试题&#xff1a;请谈谈Redis 9种数据结构以及它们的内部编码实现 90%的人知道Redis 5种最基本的数据结构&#xff1b; 只有不到10%的人知道8种基本数据结构&#xff0c;5种基本bitmapGeoHashHyperLogLog&#xff1b; 只有不到5%的人知道9种基本数据结构&…

【初码干货】关于.NET玩爬虫这些事

这几天在微信群里又聊到.NET可以救中国但是案例太少不深的问题&#xff0c;我说.NET玩爬虫简直就是宇宙第一&#xff0c;于是大神朱永光说&#xff0c;你为何不来写一篇总结一下&#xff1f; 那么今天就全面的来总结一下&#xff0c;在.NET生态下&#xff0c;如何玩爬虫 关于爬…

使用ueditor实现多图片上传案例——Service层(IShoppingService)

/** * Title: IShoppingService.java * Package org.service * Description: TODO该方法的主要作用&#xff1a; * author A18ccms A18ccms_gmail_com * date 2017-9-30 下午10:13:23 * version V1.0 */ package org.service;import org.dao.IShoppingDao;/** * * 项…