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 ...
随机推荐
- MyEclipse2014安装aptana插件
1. 2. aptana插件下载地址 链接: https://pan.baidu.com/s/1sloiAK1 密码: a1nh 3. 4. 确认是否安装成功
- 第二章 向量（d5）有序向量：插值查找
- 侯捷STL课程及源码剖析学习2: allocator
以STL 的运用角度而言,空间配置器是最不需要介绍的东西,它总是隐藏在一切组件(更具体地说是指容器,container)的背后,默默工作默默付出. 一.分配器测试 测试代码 #include < ...
- ACM-ICPC 2018 南京赛区网络预赛 L.Magical Girl Haze(分层最短路)
There are N cities in the country, and M directional roads from u to v(1≤u,v≤n). Every road has a di ...
- HRBUST 2310 Tree Painting(无向图欧拉路径的性质)
Give you a tree, can you draw the tree with minimum strokes without overlapping? Noted that it is ok ...
- Java07-java语法基础（六）面向对象
Java07-java语法基础(六)面向对象 一.格式化输出 System.out.printf(“%格式字符”,输出项); 1.格式字符: d --->int.byte.short ld -- ...
- linux命令学习之：tar
tar命令可以为linux的文件和目录创建档案.利用tar,可以为某一特定文件创建档案(备份文件),也可以在档案中改变文件,或者向档案中加入新的文件.tar最初被用来在磁带上创建档案,现在,用户可以在 ...
- html5的离线缓存
一个离线网络应用程序就是一个URL的列表,html,css,js,图片,或者其他类型的资源. 把这些资源,在本地缓存下来,当你尝试在没有网络连接时访问网络应用程序,你的浏览器将自动切换并使用本地代替. ...
- hbuilder header消失
hbuilder的header在google浏览器中调试能正常显示,但是发布到app安装到手机后headr不显示. <header class="mui-bar mui-bar-nav ...
- Linux移植之配置过程分析
在Linux移植之移植步骤中已经将Linux移植的过程罗列出来了,现在分析一下Linux的配置过程,将分析以下两个配置过程: 1.make s3c2410_defconfig分析 2.make men ...