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 ...
随机推荐
- springboot security 获取当前登录用户名
System.out.println(((User)SecurityContextHolder.getContext().getAuthentication().getPrincipal()).get ...
- eclipse环境的搭建(转载)
原文地址:http://hanqunfeng.iteye.com/blog/982182 此文章发表于2011年到2012年 使用eclipse真的有年头了,相信java程序员没有不知道它的,最近在给 ...
- idea使用maven打包jar包
1.在pom.xml中加入以下内容: <?xml version="1.0" encoding="UTF-8"?> <project xmln ...
- codis
总体架构 192.168.199.223(zookeeper.codis-proxy.codis-dashborad:18080.codis-fe:18090.codis-server) 192.16 ...
- 基于xtrabackup GDIT方式不锁库作主从同步（主主同步同理，反向及可）
1.安装数据同步工具 注:xtrabackup 在数据恢复的时候比mysqldump要快很多,特别是大数据库的时候,但网络传输的内容要多,压缩需要占用时间. yum install https://w ...
- 9. Palindrome Number （考虑负数的情况）
Determine whether an integer is a palindrome. Do this without extra space. long int reverse(int x) { ...
- Codeforces Beta Round #76 (Div. 2 Only)
Codeforces Beta Round #76 (Div. 2 Only) http://codeforces.com/contest/94 A #include<bits/stdc++.h ...
- ES3之变量提升 ( hoisting )
JavaScript引擎在预编译时,会将声明(函数声明.变量声明)自动提升至函数或全局代码的顶部.但是赋值不会提升. Because variable declarations (and declar ...
- （转）css选择器及其优先级
文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...
- @params、@PathVariabl和@RequestParam用法与区别
[1]params params: 指定request中必须包含某些参数值是,才让该方法处理. @RequestMapping(value = "testParamsAndHeaders&q ...