【jQuery】选择器与一些常用方法应用详解

一、常用选择器
1、基本对象获取
() ( “ ∗ ” ) ‘ 表 示 获 取 所 有 对 象 (“#element”) ’获得想CSS中的ID号一样
(.abc)使.abc ( “ . a b c ” ) ‘ 所 有 使 用 . a b c 样 式 的 元 素 (“div”) ‘标签选择器 选择所有的div元素
(“#a,.b,span”) ‘表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素 (“#a,.b,span”) ‘表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素 (“#a .b p”) ‘ID号是a的并且使用了 b样式的 所有的p元素

2、层级元素获取
(Element1Element2Element3.) ( “ E l e m e n t 1 E l e m e n t 2 E l e m e n t 3 … . ” ) ‘ 前 面 父 级 后 面 是 子 集 (“div > p”) ‘获取div下面的所有的 p元素
(div+p)divp ( “ d i v + p ” ) ‘ d i v 元 素 后 面 的 第 一 个 p 元 素 (“div ~ p”) ‘div后面的所有的 p元素

3、简单对象获取
(Element:first)HTML ( “ E l e m e n t : f i r s t ” ) ‘ H T M L 页 面 中 某 类 元 素 的 第 一 个 元 素 (“Element:last”) ‘HTML页面中某类元素的最后一个元素
(Element:not(selector)), ( “ E l e m e n t : n o t ( s e l e c t o r ) ” ) ‘ 去 除 所 有 与 给 定 选 择 器 匹 配 的 元 素 , 如 : (“input:not(:checked)”) 表示选择所有没有选中的复选框
(Element:even) ( “ E l e m e n t : e v e n ” ) ‘ 获 得 偶 数 行 (“Element:odd“)’获得奇数行
(Element:eq(index)) ( “ E l e m e n t : e q ( i n d e x ) ” ) ‘ 取 得 一 个 给 定 的 索 引 值 (“Element:gt(index)”) ‘取得给定索引值的元素 之后的所有元素
$(“Element:lt(index)”) ‘取得给定索引值的元素 之前的所有元素

4、内容对象的获取和对象可见性
(Element:contains(text))text ( “ E l e m e n t : c o n t a i n s ( t e x t ) ” ) ‘ 元 素 中 是 否 包 含 t e x t 文 本 内 容 (‘Element:empty”) ‘获得元素不包含子元素或文本的
(Element:partnt) ( “ E l e m e n t : p a r t n t ” ) ‘ 获 得 元 素 包 含 子 元 素 或 文 本 的 (“Element:has(selector)”) ‘是否包含某个元素, 如: (p:has(span))spanp ( “ p : h a s ( s p a n ) ” ) 表 示 所 有 包 含 s p a n 元 素 的 p 元 素 (“Element:hidden”) ‘选择所有可见元素
$(“Element:visible”) ‘选择所有不可见元素

5、其他对象获取方法
(Element[id])ID ( “ E l e m e n t [ i d ] “ ) ‘ 所 有 带 有 I D 属 性 的 元 素 (“Element[attribute = youlika ]” ‘获得所有某个属性为youlika的元素
(Element[attribute!=youlika]youlika ( “ E l e m e n t [ a t t r i b u t e ! = y o u l i k a ] ” ‘ 获 得 所 有 某 个 属 性 为 不 是 y o u l i k a 的 元 素 (“Element[attribute ^= youlika ]” ‘获得所有某个属性为不是youlika的开头的元素
(Element[attribute ( “ E l e m e n t [ a t t r i b u t e = youlika ]” ‘获得所有某个属性为不是youlika的结尾的元素
(Element[attribute=youlika]youlika ( “ E l e m e n t [ a t t r i b u t e ∗ = y o u l i k a ] ” ‘ 获 得 所 有 某 个 属 性 包 含 y o u l i k a 的 开 头 的 元 素 (“Element[selector1][selector2][....]“) ’符合属性选择器,比如$(“input[id][name][value=youlika ]“)表示获得带有ID、Name以及value是youlika 的input元素。

6、子元素的获取
(Element:nthchild(index))n ( “ E l e m e n t : n t h − c h i l d ( i n d e x ) ” ) ‘ 选 择 父 级 下 面 的 第 n 个 元 素 (“Element:nth-child(even)”) ‘选择父级下面的偶数
(Element:nthchild(odd)) ( “ E l e m e n t : n t h − c h i l d ( o d d ) ” ) ‘ 选 择 父 级 下 面 的 奇 数 (“Element:nth-child(3n+1)”) ‘表达式
(Element:firstchild) ( “ E l e m e n t : f i r s t − c h i l d ” ) ‘ 选 择 父 级 下 面 的 第 一 个 子 元 素 (“Element:last-child”) ‘选择父级下面的最后一个子元素
$(“Element:only-child”) ‘匹配父级下的唯一的一个子级元素,例如dt在dl列表中唯一,那么将选择dt

7、表单对象获取
(:input)//Input ( : i n p u t ) / / 查 找 所 有 的 I n p u t 元 素 , 当 然 也 包 括 下 拉 列 表 , 文 本 域 , 单 选 框 , 复 选 框 等 。 (:text)//匹配所有的单行文本框
(:password)// ( : p a s s w o r d ) / / 匹 配 所 有 的 密 码 框 (:radio)//匹配所有的单选按钮
(:checkbox)// ( : c h e c k b o x ) / / 匹 配 所 有 的 复 选 框 (:submit)//匹配所有的提交按钮
(:image)// ( : i m a g e ) / / 匹 配 所 有 的 图 像 域 , 例 如 (:reset)//匹配所有的重置按钮
(:button)// ( : b u t t o n ) / / 匹 配 所 有 的 按 钮 (:file)//匹配所有的文件上传域
(:hidden)//typehidden ( : h i d d e n ) / / 匹 配 所 有 的 不 可 见 元 素 或 者 t y p e 为 h i d d e n 的 元 素 (:enabled)//匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮
(:disabled)//input ( : d i s a b l e d ) / / 匹 配 所 有 的 不 可 用 i n p u t 元 素 , 作 用 与 上 相 反 (:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有的下拉列表

8、元素属性的设置与移除
(Element).attr(name) ( “ E l e m e n t ” ) . a t t r ( n a m e ) ‘ 取 得 第 一 个 匹 配 的 属 性 值 , 比 如 (“img”).attr(“src”)
(Element.attr(key,value)) ( “ E l e m e n t ” . a t t r ( k e y , v a l u e ) ” ) ‘ 某 一 个 元 素 设 置 属 性 (“Element”.attr({key:value,key1:value,….})) ‘为某个元素一次性设置多个属性
(Element).attr(key,function) ( “ E l e m e n t ” ) . a t t r ( k e y , f u n c t i o n ) ‘ 为 所 有 匹 配 的 元 素 设 置 一 个 计 算 的 属 性 值 。 (“Element”).removeAttr(name)//移除某一个属性

二、JQuery的核心的一些方法
each(callback) ‘就像循环
(Element).length; ( “ E l e m e n t ” ) . l e n g t h ; ‘ 元 素 的 个 数 , 是 个 属 性 (“Element”).size(); ’也是元素的个数,不过带括号是个方法
(Element).get(); ( “ E l e m e n t ” ) . g e t ( ) ; ‘ 某 个 元 素 在 页 面 中 的 集 合 , 以 数 组 的 形 式 存 储 (“Element”).get(index); ’功能和上面的相同,index表示第几个元素,数组 的下标
(Element).get().reverse(); ( “ E l e m e n t ” ) . g e t ( ) . r e v e r s e ( ) ; ‘ 把 得 到 的 数 组 方 向 (“Element1″).index($(“Element2″)); ’元素2在元素1中的索引值是。。。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
资源包主要包含以下内容: ASP项目源码:每个资源包中都包含完整的ASP项目源码,这些源码采用了经典的ASP技术开发,结构清晰、注释详细,帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码,用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件:为了方便用户更好地理解系统的后台逻辑,每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档,以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境,并了解各个数据表之间的关系和作用。 详细的开发文档:每个资源包都附有详细的开发文档,文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料,使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南:为帮助用户更好地理解和使用这些ASP项目,每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程,使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考:对于正在准备毕业设计的学生来说,这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰,还符合常见的毕业设计要求和标准。通过这些项目,学生可以学习到如何从零开始构建一个完整的Web系统,并积累丰富的项目经验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值