jQuery学习笔记：基础
本文主要总结jQuery中一些知识点
概念
美元符号$是著名的jQuery符号。jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名
$本质上就是一个函数，但是函数也是对象，于是$除了可以直接调用外，也可以有很多其他属性
选择器
层级选择器
查找和过滤
操作DOM
- 修改Text和Html：调用jQuery对象的 text( ) 和 html( ) 方法分别获取节点和原始Html文本
- 修改CSS：调用jQuery对象的 css('name', 'value')
- 显示和隐藏DOM：调用jQuery对象的 hide( ) 和 show( )
- 获取DOM信息：调用jQuery对象的 attr( ) removeAttr( ) prop( ) is( )
- 操作表单：调用jQuery对象的val( )
事件
用on方法来绑定一个事件，需要传入事件名称和应对的处理函数
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
或者用简化的写法直接调用 click( )
a.click(function () {
alert('Hello!');
});
初始化代码必须放到 document 对象的 ready 事件中，保证DOM已完成初始化：
<html>
<head>
<script>
$(document).on('ready', function () { });
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
由于 ready 事件使用非常普遍，所以可以简化：
$(document).ready(function () {
});
甚至可以再简化为：
$(function () {
// init...
});
AJAX
jQuery在全局对象jQuery（也就是$）绑定了 ajax( ) 函数，可以处理AJAX请求
ajax(url, settings) 函数需要接收一个url和一个可选的 settings 对象，常用的选项如下：
- async：是否异步，默认true，非特殊不要指定为false
- method：发送的Methode，默认为'GET'，可指定为'POST'或'PUT'等
- contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为'text/plain' 或 'application/json'
- data：发送的数据，类型可以是字符串、数组或oject。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式
- headers：发送额外的HTTP头，必须是一个object
- dataType：接收的数据格式，可以指定为'html' 'xml' 'json' 'text'等，默认情况根据响应的content-Type猜测
下面是一个发送GET请求，并返回一个JSON格式的数据
var jqxhr = $.ajax('/api/categories', {
dataType: 'json'
});
jQuery的jqXHR对象类似一个Promise对象，我们可以用链式写法来处理各种回调：
var jqxhr = $.ajax('/api/categories', {
dataType: 'json'
}).done(function (data) {
ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
ajaxLog('请求完成: 无论成功或失败都会调用');
});
最后可以写成这样
$.ajax('${base}/apply/save', {
method: 'POST',
data: {'type': type, 'expo': expo},
dataType: 'json'
})
.done(function (data) {
// done
})
.fail(function (xhr, status) {
console.log('fail: ' + xhr.status + ' reason:' + status);
})
.always(function () {
// done
});
（非原创 侵删 文章来源：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000）
jQuery学习笔记：基础的更多相关文章
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之概念（1）
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- Python学习笔记基础篇——总览
Python初识与简介[开篇] Python学习笔记——基础篇[第一周]——变量与赋值.用户交互.条件判断.循环控制.数据类型.文本操作 Python学习笔记——基础篇[第二周]——解释器.字符串.列 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- 数论算法 剩余系相关 学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)
注:转载本文须标明出处. 原文链接https://www.cnblogs.com/zhouzhendong/p/Number-theory.html 数论算法 剩余系相关 学习笔记 (基础回顾,(ex ...
随机推荐
- Redis集群部署及命令
一.简介 redis集群是一个无中心的分布式Redis存储架构,可以在多个节点之间进行数据共享,解决了Redis高可用.可扩展等问题. redis集群提供了以下两个好处: 将数据自动切分(split) ...
- Django2.1在根据models生成数据库表时报 __init__() missing 1 required positional argument: 'on_delete'
解决办法: a=models.ForeignKey('BookInfo',on_delete=models.CASCADE,) 即在外键值的后面加上 on_delete=models.CASCADE ...
- pta l2-11（玩转二叉树）
题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805065406070784 题意:给定二叉树的结点个数n,其前 ...
- DES算法实现（C++版）
#include "memory.h" #include "stdio.h" enum {encrypt,decrypt};//ENCRYPT:加密,DECRY ...
- python之栈和队列
1. 栈 1.1 示例 #!/usr/bin/env python # -*- codinfg:utf-8 -*- ''' @author: Jeff LEE @file: .py @time: 20 ...
- SSH和SSM的区别
一怒成仙 博客园 首页 新随笔 联系 管理 订阅 随笔- 54 文章- 1 评论- 0 SSH(Struts,Spring,Hibernate)和SSM(SpringMVC,Spring,M ...
- 上海大都会赛 I Matrix Game(最大流)
At the start of the matrix game, we have an N x M matrix. Each grid has some balls.The grid in (i,j) ...
- 脚手架搭建vue框架
一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...
- Javascript(es2016) import和require用法和区别
http://blog.csdn.net/chinaycheng/article/details/52559439 其中这个总结很到位: 加载方式 规范 命令 特点 运行时加载 CommonJS/AM ...
- 使用BulkCopy报错 从 bcp 客户端收到一个对 colid 19 无效的列长度
====System.Data.SqlClient.SqlException: 从 bcp 客户端收到一个对 colid 19 无效的列长度. 从0开始数,数据库上表的第19列