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

by Microanswer

标签: jquery 常用方法 大全 总结


创建时间:Sep 25, 2019 5:49:59 PM | 最后更新:Sep 27, 2019 3:43:37 PM 


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

一、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
  1. $("选择器"); 返回指定选择器的所有jQuery对象。
  2. $("选择器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) {
        // 服务器返回数据
    }
});

更多

没有找到你想看的内容,不如去中文官网jquery往看看全面的介绍:jQuery API 中文手册


全文完, 转载请注明出处。 对你有帮助?不如赞一个吧:
发表评论(发表评论需要登录,你现在还没有登录。)

评论列表 (0条)

导航加载中…