jQuery常用方法

jQuery是一个快速、简洁的JavaScript框架,封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互

1.选择器

符号$表示jQuery对象,$函数通常也被称为jQuery的工厂函数,jQuery的操作基本上都以$()开始,所有选择器都放在这个括号中,例如$("#title")将返回一个jQuery选择的HTML元素,在返回jQuery对象之后,就可以调用由jQuery提供的丰富的API来完成相应的操作了

基本选择器,通过元素标签名,元素ID、class来查找DOM元素,基本选择器共有五种,总结如下:

选择器 返回 示例
元素标签选择器 集合元素 $("p")选取所有的<p>元素
ID选择器 单个元素 $("#title")选取ID为test的元素
Class选择器 集合元素 $(".test")选取所有class为test的元素
通配符选择器 集合元素 $("*")选取所有的元素
群组选择器 集合元素 $("span,p.item")选取所有<span>和class为item<p>标签的元素

层次选择器,适合于通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素和兄弟元素,总结如下:

选择器 返回 示例
后代元素选择器 集合元素 $("div span")选取<div>里的所有的<span>元素
子元素选择器 集合元素 $("div>span")选取<div>元素下元素名是<span>的子元素
相邻元素选择器 集合元素 $(".titem+div")选取所有class为item的下一个<div>兄弟元素
兄弟元素选择器 集合元素 $("#item~div")选取ID为item的元素后面的所有<div>兄弟元素
选择器 返回 示例
:first 单个元素 $("div:first") 选取所有 <div> 元素中第 1 个 <div> 元素
:last 单个元素 ** $("div:last")** 选取所有 <div> 元素中最后 1 个 <div> 元素
not(selector) 集合元素 $("input:not(.item)") 选取 Class 不是 item<input> 元素
:even 集合元素 $("input:even") 选取索引是偶数的 <input> 元素
:odd 集合元素 $("input:odd") 选取索引是奇数的 <input> 元素
:eq(index) 单个元素 $("input:eq(1)") 选取索引等于 1 的 <input> 元素
:gt(index) 集合元素 $("input:gt(1)") 选取索引大于1 的 <input> 元素
:lt(index) 集合元素 $("input:lt(1)") 选取索引小于 1 的 <input> 元素
:header 集合元素 $(":header") 选取网页中所有的<h1>,<h2>,<h3>...
:animated 集合元素 $("div: animated") 选取正在执行动画的 <div> 元素

过滤选择器,主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号开头,按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器,总结如下:

选择器 返回 示例
:first 单个元素 $("div:first") 选取所有 <div> 元素中第 1 个 <div> 元素
:last 单个元素 ** $("div:last")** 选取所有 <div> 元素中最后 1 个 <div> 元素
not(selector) 集合元素 $("input:not(.item)") 选取 Class 不是 item<input> 元素
:even 集合元素 $("input:even") 选取索引是偶数的 <input> 元素
:odd 集合元素 $("input:odd") 选取索引是奇数的 <input> 元素
:eq(index) 单个元素 $("input:eq(1)") 选取索引等于 1 的 <input> 元素
:gt(index) 集合元素 $("input:gt(1)") 选取索引大于1 的 <input> 元素
:lt(index) 集合元素 $("input:lt(1)") 选取索引小于 1 的 <input> 元素
:header 集合元素 $(":header") 选取网页中所有的<h1>,<h2>,<h3>...
:animated 集合元素 $("div: animated") 选取正在执行动画的 <div> 元素
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,494评论 0 44
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,698评论 18 503
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,629评论 0 11
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 1,111评论 0 8
  • 【特邀至YY财经课堂】—【风云财经-股友之家】教室成立 众多的股友反映到【破狼】空间每天更新的操作策略观看不到,有...
    破狼阅读 537评论 4 7