【JQuery】JQuery常用方法总结、大全。

最新推荐文章于 2023-02-10 08:42:52 发布

Microanswer

最新推荐文章于 2023-02-10 08:42:52 发布

356

分类专栏：网页 javascript 文章标签： jQuery javascript

本文链接：https://blog.csdn.net/MicroAnswer/article/details/101541865

版权

网页同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

javascript

16 篇文章 0 订阅

订阅专栏

重要声明：本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。

本文更新不及时，请到原文地址浏览：【JQuery】JQuery常用方法总结、大全。

一、JQuery简介

JQuery不是语言。jQuery是一个快速、简洁的JavaScript框架。总归是用js写出来的东西。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

二、常用方法

本节介绍了jquery里一些常用的方法。

1、Dom操作类

选择器

选择器通常是一个有一定规则的字符串。下面列出了一些基本常用的选择器：

语法	作用	示列	示列含义
*	选择所有	*	选择所有页面里的节点。通常这个用在css样式文件里。
.	class选择器	.cell	选择class为cell的所有元素。
#	id选择器	#btnSavee	选择id为btnSave的所有元素。
节点名称	节点选择器	div	选择节点为div的所有元素。
[]	属性选择器	[userInfo]	选择节点上有userInfo属性的所有元素。
[=]	属性值选择器	[userInfo=Jack]	选择节点上有userInfo属性且值为Jack的所有元素,等号后面的值可以有双引号、可以没有。
空格	父子层级	.cell div #btnSave	选择class为cell内部的div节点内部的id为btnSave的元素
,	分隔符	.cell,[userInfo]	选择class为cell的所有元素和属性有userInfo的所有元素
+	兄弟选择器	.cell+input	选择和.cell同级但在其之后的所有input元素

更多选择器请参考：CSS选择器参考手册。

使用$选择dom

$(“选择器”); 返回指定选择器的所有jQuery对象。
$(“选择器1”).find(“选择器2”); 返回指定选择器1里面的所有符合选择器2的所有jQuery对象。

注意：所有通过$方法得到的都节点都不是原生的dom对象，而是jquery封装的jquery对象。它们的方法和用法均不同。应该明确具体是哪一种对象，从而调用合适的方法和属性。可通过$dom = $(原始dom)的方式将原始dom封装为jquery对象。$选择得到的返回数据，都是一个集合，取决于选择器能够定位到元素的多少。即使给定的选择器没有任何节点符合，也不会返回undefind或null。而返回的是一个空集合。要判断是否选择到东西了，可以这样：

var cells = $(".cell");
if (cells.size() > 0) {
    // 选择到了节点。
} else {
    // 没有选择到任何节点。
}

下文内容，均以选择到了至少一个节点为示列。

遍历元素

var cells = $(".cell");
cells.each(function () {
    // each 方法的执行次数等于选择器选择到的节点数。

    var dom = this;     // 这里的this是原始js的dom对象。
    var $dom = $(this); // 通过 $ 包装，成为jquery对象。
});

input、select、textarea取值及修改

这三种dom，在jquery里，都可以通过 val() 方法取值，通过 val("Jack")方法修改。

var intput = $("#userName")；
var userName = input.val(); // 取值。
input.val("Jack");          // 修改。

节点内文本取值及修改

var div = $("#userDescription");
var text = div.text();  // 取值。
div.text("让我试试！");  // 修改。

节点内html获取及修改

var div = $("#userDescription");
var html = div.html();       // 取值。
div.html("<b>让我试试</b>");  // 修改。

节点样式获取及修改

var div = $("#userDescription");
var fontSize = div.css("font-size");  // 取值。
div.css("font-size", "20px");         // 修改。

节点属性获取及修改

var div = $("#userDescription");
var class = div.attr("class");        // 取值。
div.attr("class", "userDesc-1");      // 修改。

节点class判断及移除

var div = $("#userDescription");
var hasVip = div.hasClass("vipuser"); // 获取是否有vipuser这个class。
if (hasVip) {
    div.addClass("poorUser");             // 添加class。
} else {
    div.removeClass("vipuser");           // 移除class。
}

节点移除

var div = $("#userDescription");
div.remove(); // 将自身从dom树移除、界面上将不再存在。

div.empty();  // 将自身内部的所有dom移除，自身不移除。

节点添加

var div = $("#userDescription");
div.append("<p>66</p>");  // 将内容添加到div内部的结尾处。
div.prepend("<p>99</p>"); // 将内容添加到div内部的开始处。

div.after("<p>77</p>");   // 将内容添加到div后面，与div同级，结果p是div的兄弟节点。
div.before("<p>11</p>");  // 将内容添加到div前面，与div同级，结果是div是p的兄弟节点。

节点隐藏与显示

var div = $("#userDescription");
div.hide();        // 隐藏
div.show();        // 显示
div.toggle();      // 隐藏/显示 - 来回切换。

2、工具类

数组遍历

$.each(["Jack", "Tom", "Marry"], function (index, item) {
    // index = 元素下标。
    // item = 元素内容。
    // return false; 取消循环，
});

数组代换

var newArr = $.map(["Jack", "Tom", "Marry"], function (item, index) {
    // item = 元素内容。
    // index = 元素下标。
    // 此方法必须有返回值。否则对应newArr的对应位置为undefined。
});

对象扩展extend

var target = {};
$.extend(target, {name: "Jack"}, {age: 20}, {age: 13});
console.log(target); // {name: "JacK", age: 13}

3、网络请求

post/get

// post
$.post("https://www.microanswer.cn/", {name: "Jack"}, function (response) {
    // response 为服务器响应结果。
}, "json");

// get
$.get("https://www.microanswer.cn/", {name: "Jack"}, function (response) {
    // response 为服务器响应结果。
}, "json");

// 参数1：请求地址
// 参数2：请求参数
// 参数3：请求成功回调
// 参数4：预设服务器返回的数据类型，可填写：xml, html, script, json, text

ajax

$.ajax({
    url: "https://www.microanswer.cn/",   // 请求地址
    type: "post",                         // 请求方法/类型
    data: {                               // 请求参数
        name: "Jack",
        age: 13
    },
    dataType: "json",                     // 预设服务器返回数据类型
    error: function (xmlHttpRequest,textStatus,exception) {                  // 请求失败，出错时回调。
        // 通常 textStatus 和 errorThrown 之中只有一个会包含信息
    },
    success: function (data) {
        // 服务器返回数据
    }
});