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 ...
随机推荐
- Python基础之字典操作
字典 字典的优点: dict key 必须是不可变数据类型,可哈希, value:任意数据类型. dict 优点:二分查找去查询 存储大量的关系型数据 特点:无序的(指的是不可人为的去改变顺序) 数据 ...
- centos 7 redis-4.0.11 哨兵
redis-master:192.168.199.223 redis-slave_1: 192.168.199.224 redis-slave_2: 192.168.199.252 redis-mas ...
- Mobile Game Development with Unity Build Once, Deploy Anywhere
本书从自上而下的角度介绍了Unity游戏引擎的功能,并提供了具体的.面向项目的指导,说明了如何在真实的游戏场景中使用这些功能,以及如何从头开始构建让玩家爱不释手的2D和3D游戏.主要内容有:探索Uni ...
- 消除游戏源码 Match 3 Jewel Full 298 Levels
Match 3 Jewel Full 298 Levels 一款unity3d编写的消消乐游戏, 关卡丰富,很好玩 下载地址:点击下载
- 【转】微信公众号h5网页被嵌入广告 不知道什么原因
这个是因为http劫持导致的.HTTP劫持是在使用者与其目的网络服务所建立的专用数据通道中,监视特定数据信息,提示当满足设定的条件时,就会在正常的数据流中插入精心设计的网络数据报文,目的是让用户端程序 ...
- 《基于Nginx的中间件架构》学习笔记---4.nginx编译参数详细介绍
通过nginx -V查看编译时参数: 在nginx安装目录下,通过./configure --help,查看对应版本ngnix编译时支持的所有参数: Nginx编译参数详细介绍: --help 显示本 ...
- css控制div上浮下落
CSS3 示例:http://www.w3school.com.cn/cssref/pr_keyframes.asp 以下是代码: <!DOCTYPE html> <html> ...
- undefined reference to...
wj@wj-Inspiron-:~/Downloads/LBD_Descriptor/build$ cmake .. -- Configuring done -- Generating done -- ...
- YII2中查询生成器Query()的使用
YII2中的yii\db\Query给我们提供了非常丰富的方法,方便我们构建复杂的SQL语句. Query()与createCommand最大区别在于,后者直接使用我们写好的SQL语句,前者通过参数和 ...
- datepicker动态初始化
datepicker 初始化动态表单的input,需要调用jquery的on方法来给未来元素初始化. //对动态添加的时间文本框进行动态初始化 $('table').on("focus&qu ...