jQuery 常用方法
jQuery 常用方法
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();
腾讯云开发者
