jQuery 常用方法

Unsplash

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> 的子元素

相邻元素选择器

集合元素

$(".item+div") 选取 Class 为 item 的下一个 <div> 兄弟元素

兄弟元素选择器

集合元素

$("#item~div") 选取 ID 为 item 的元素后面的所有 <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> 元素

表单选择器,利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素,总结如下:

选择器

返回

示例

:input

集合元素

$(":input") 选取所有 <input>,<textarea>,<select> 和 <button> 元素

:text

集合元素

$(":text") 选取所有的单行文本框

:password

集合元素

$(":password") 选取所有的密码框

:radio

集合元素

$(":radio") 选取所有的单选框

:checkbox

集合元素

$(":checkbox") 选取所有的复选框

:submit

集合元素

$(":submit") 选取所有的提交按钮

:image

集合元素

$(":image") 选取所有的图像按钮

:reset

集合元素

$(":reset") 选取所有的重置按钮

:button

集合元素

$(":button") 选取所有的按钮

:file

集合元素

$(":file") 选取所有的上传域

:hidden

集合元素

$(":hidden") 选取所有不可见元素

2. 常用方法

CSS 样式 >>> $("#id").css(‘backgroundColor’, 'blue’); CSS 样式 >>> .css({‘color’:'red’, 'width’:’300px’}); innerText >>> .text(‘改变的文本内容’); innerHTML >>> .html(); 高度 >>> .height(); 宽度 >>> .width(); value >>> .val('改变的 value 值'); 获取属性值 >>> .attr(‘name'); 设置 name 属性 >>> .attr('name', 'value'); 设置 name 属性 >>> .attr({'title':'TTT', 'name':'zzz'}); 删除属性 >>> .removeAttr(); 追加一个类 >>> .addClass('cls'); 移除多个类 >>> .removeClass('cls1, cls2'); 创建节点 >>> var $li = $("<li>苹果</li>"); 删除节点 >>> .remove() 删除子节点 >>> .empty(); 复制节点 >>> .clone(); 复制元素所绑定的事件 >>> .clone(true); 将元素替换为指定的对象 >>> .replaceWith("<a href=’#'>Test</a>"); 替换所有匹配元素 >>> .replaceAll("p"); 把所有匹配的元素用其他元素的结构化标记包裹起来 >>> .wrap("<b></b>"); 将所有匹配的元素用单个元素包裹起来 >>> .wrapAll("p"); 判断是否应用了 cls 类 >>> .hasClass("cls"); 隐藏 / 显示该元素 >>> .toggle(); 切换这个 cls 类 >>> .toggleClass(‘cls’); 筛选元素 >>> .filter(); 向每个匹配元素追加内容 >>> .append(); 把所有匹配元素追加到另一个指定的元素元素集合中 >>> .appendTo(); 在被选元素的开头插入指定内容 >>> .prepend(); $("p").prepend("<b>love</b>"); 在被选元素的开头插入指定内容 >>> .prependTo(); $("<b>love</b>").prependTo("p"); 再次元素之后添加元素 >>> .after(); 将此元素添加到(参数)的后面 >>> .insertAfter(); 在每个匹配的元素之前添加元素 >>> .before(); 将此元素添加到(参数)的前面 >>> .insertBefore(); 取得元素的子元素集合 >>> .children(); 判断 >>> .is(“:visible”)

3. 动画

隐藏元素 >>> .hide(3000); 显示元素 >>> .show(); 淡入 >>> .fadeIn(); 淡出 >>> .fadeOut(); 淡入淡出切换 >>> .fadeToggle() 达到透明度多少 >>> .fadeTo(2000, 0.3); 向上收缩隐藏 >>> .slideUp(); 向下收缩显示 >>> .slideDown(); 显示隐藏切换 >>> .slideToggle();

4. 获取兄弟元素

之后的第一个兄弟元素 >>> .next();· 之后的所有兄弟元素 >>> .nextAll(); 之前的第一个兄弟元素 >>> .prev(); 之后的所有兄弟元素 >>> .prevAll(); 除本身以外的所有兄弟元素 >>> .siblings(); 返回上一层操作的对象 >>> .end(); 第一个 >>> .first(); 最后一个 >>> .last(); 查找最近的 <li> 元素 >>> .closest(“li”); 获取当前元素的所有 <span> 元素 >>> .find("span"); 获取父元素 >>> .parent(); 获取祖先元素 >>> .parents();

而关于更多的 jQuery 的使用方法及例子,大家可以查看我上传到百度网盘的 jQuery API 3.2.1 chm 文档,下载地址请戳 >>> jQuery API | Download

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

android之View绘制

Android系统的视图结构的设计也采用了组合模式,即View作为所有图形的基类,Viewgroup对View继承扩展为视图容器类,由此就得到了视图部分的基本...

16490
来自专栏博客园

JQ 选择器大全

$(".one+div") <==> $(".one").next("div");

20820
来自专栏HTML5学堂

CSS 1.0~3.0选择器(下)

HTML5学堂:对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用,我们那么有些选择器还是无法简单获取某元素,对于CSS3的选择器的产生,让我们更加方便...

32730
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件

如果我们在设置为原来宽高2倍的时候,就要先把获取的宽高转换成数字类型,再乘以2,这样操作比较麻烦,有没有简单的方法呢?

14440
来自专栏河湾欢儿的专栏

event事件对象

event: 事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定的地方-event对象,供我们在需要的时候调...

10920
来自专栏Pythonista

golang之切片

4.cap可以求出slice最大的容量,0<=cap(slice)  <=len(array),其中array是slice引用的数组

17320
来自专栏微服务

jQuery选择器大全(48个代码片段+21幅图演示)

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就...

36280
来自专栏ShaoYL

iOS之NSAttributedString-------字符属性

34180
来自专栏有趣的django

21.jQuery

简介 jQuery是一个快速、简洁的JavaScript框架,jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情...

35590
来自专栏xingoo, 一个梦想做发明家的程序员

【web必知必会】—— 使用DOM完成属性填充

  本文介绍了使用DOM的简单方法实现动态加载图片的功能。 前文介绍了: 1 DOM四个常用的方法   首先看一下效果,初始时是一个相册,可以点击...

18790

扫码关注云+社区

领取腾讯云代金券