前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery 常用方法

jQuery 常用方法

作者头像
Nian糕
修改2024-03-16 17:22:34
2.6K0
修改2024-03-16 17:22:34

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

选择器

符号$表示 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") 选取所有不可见元素

常用方法

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”)

动画

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

获取兄弟元素

之后的第一个兄弟元素 .next();·

之后的所有兄弟元素 .nextAll();

之前的第一个兄弟元素 .prev();

之后的所有兄弟元素 .prevAll();

除本身以外的所有兄弟元素 .siblings();

返回上一层操作的对象 .end();

第一个 .first();

最后一个 .last();

查找最近的 <li> 元素 .closest(“li”);

获取当前元素的所有 <span> 元素 .find("span");

获取父元素 .parent();

获取祖先元素 .parents();

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.09.12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 选择器
  • 常用方法
  • 动画
  • 获取兄弟元素
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档