jQuery/Json/Ajax基础知识

jQuery
1. 什么是 jQuery??
jQuery 是一个优秀的 JavaScript 框架，一个轻量级的 JavaScript 类库。
jQuery 的核心理念是 Write less，Do more。
使用 jQuery 可以兼容各种浏览器，方便的处理 HTML、Events、动画效果
等，并且方便的为网站提供 AJAX 交互。
2.jQuery 的特点：
利用选择器来查找要操作的节点， 然后将这些节点封装成一个 jQuery 对象，
通过调用 jQuery 对象的方法或者属性来实现对底层被封装的节点的操作。
好处：a、兼容性更好；b、代码更简洁
3.编程步骤：
step1、使用选择器查找节点
step2、调用 jQuery 的属性和方法
4.jQuery 对象与 DOM 对象之间的转换
1. 什么是 jQuery 对象？？
jQuery 对象是 jQuery 对底层对象的一个封装，只有创建了这个对象，才能
使用类库中提供的方法。
2. DOM 对象 ----> jQuery 对象
DOM 对象向 jQuery 对象的转变很容易，外面追加$和圆括号即可。
function f( ){
var obj = document.getElementById(‘d1’);
//DOM -> jQuery 对象
var $obj = $(obj);
$obj.html(‘hello jQuery’);
} 3
. jQuery 对象 ----> DOM 对象
jQuery 对象向 DOM 对象转化，通过调用 get 方法加参数值 0 即可
$obj.get(0)。
function f( ){
var $obj = $(‘#d1’);
//jQuery 对象 -> DOM
var obj = $(obj).get (0);
obj.innerHTML = ‘hello jQuery’;
}
5. jQuery 选择器
1. 什么是 jQuery 选择器？？
jQuery 选择器是一种类似 CSS 选择器的特殊说明符号，能够帮助 jQuery
定位到要操作的元素上，使用了选择器可以帮助 HTML 实现内容与行为的分离。
只需要在元素上加上 Id 属性。
2. 选择器的种类
a、基本选择器
#id 根据指定的 ID 匹配一个元素
.class 根据指定的类匹配一个元素
element 根据的指定的元素名匹配所有的元素
select1,select2,......将每一个选择器匹配到的元素合并后一起返回
*匹配所有元素
b、层级选择器
1. select1 空格 select2 查找指定元素的所有的后代
2. select1 > select2 查找子节点
3. select1 + select2 下一个兄弟
4. select1 ~ select2 下面所有的兄弟
c、过滤选择器
1. 基本过滤选择器
:first 获取第一元素
:last 获取最后一个元素
:not 排除选择器要求的元素
:even 匹配所有下标为偶数的元素
:odd 匹配所有下标为奇数的元素
:eq 匹配所有给定索引值的元素
:gt 匹配所有大于给定索引值的元素
:lt 匹配所有小于给定索引值的元素
2. 内容过滤选择器
:contains 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素
3. 可见性过滤选择器
根据元素在页面中的可见属性进行过滤，主要是对 hidden 属性和 visible
属性的判断。
:hidden 匹配所有不可见元素，或者 type 为 hidden 的元素
:visible 匹配所有的可见元素
4. 属性过滤选择器
属性过滤器会对标记的属性进行判断，符合条件的元素会作为返回的对象。
[attribute] 匹配包含给定属性的元素。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的
元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时
使用。
5. 子元素过滤选择器
子元素过滤选择器会根据子元素的位置的数值来进行筛选。
:nth-child （index、enven、odd）匹配其父元素下的第 N 个子或奇偶元
素。注意':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元
素。:nth-child 从 1 开始的，而:eq()是从 0 算起的！
6. 表单对象属性过滤选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括 select
中的 option)
:selected 匹配所有选中的 option 元素
d、表单选择器
使用的规则和以上各选择器一致。$(“：input”)就会返回所有的 input 输
入框，大多数情况下，表单选择器会和其他选择器进行配合来定位元素。
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图片
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有的文件域
:hidden 匹配所有不可见元素，或者 type 为 hidden 的元素
6.jQuery 操作 DOM-查询
1. html（） html()等价于 innerHTML
读取或修改节点的 HTML 内容的属性和 value 值。与 DOM 对象的
innerHTML 的作用一致。
2. text（） text()等价于 innerText
读取或修改节点中的文本内容，会过滤掉标记内容，与 innerText 的作用基
本一致，但 innerText 在不同浏览器中写法不同，在 jQuery 中则使用 text（）
方法即可。
3. val（）
读取或修改节点的 value 属性值，也就是针对表单元素中有 value 属性的哪
些元素的操作。
4. attr（）
读取或设置修改节点的属性。这个方法会更宽泛一些，可以修改元素的任何
属性。
7. jQuery 操作 DOM-创建、插入、删除
1. 创建 DOM 节点的语法
使用$符号将 HTML 标记的字符串文本括起来，即创建了 DOM 节点，如$
（html） 。大多数时候创建后的节点需要放入文档中，使用到后续的一些方法可
以实现节点的插入简写形式
如 $(‘body’).append(‘<div>…</div>”)
2. 插入 DOM 节点的方法
append 方法会将 DOM 节点作为最后一个孩子节点添加进来
prepend 方法将 DOM 节点作为第一个孩子节点添加进来
after 方法将 DOM 节点作为下一个兄弟节点添加进来
before 方法将 DOM 节点作为上一个兄弟节点添加进来
3. 删除 DOM 节点的方法
remove（）可以移除 DOM，remove（selector）可以按选择器定位后删
除，empty（）清空节点。
4.将 js 和 html 内容分离
$(fn);
注意：window.onload=function(){}等价于$(fucntion(){});但是内在的机制
不相同。fn 是一个函数，表示当整个页面记载完成之后就会执行 fn。
8. jQuery 操作 DOM-复制节点
1.复制 DOM 节点的方法
clone（）方法和 clone（true）都会实现复制，添加参数 true 的时候会将
节点的行为也复制到新的对象之上。
9. jQuery 操作 DOM-属性操作
1. 属性操作的方法
读取属性使用 attr（）方法，设置属性使用 attr（ ‘’ ， ‘’ ）方法。删除属性
使用 removeAttribute（ ‘’ ）方法。
10. jQuery 操作 DOM-样式操作
attr("class","")获取和设置
addClass("")追加样式
removeClass("")删除所样式
toggleClass("")切换样式
hasClass("")是否有某个样式
css("")读取 css 值
css("","")设置多个样式
11.jQuery 操作 DOM-遍历节点
childern()/childern(selector)只考虑直子节点
next()/next(selector)下一个兄弟的节点
perv()/perv(selector)上一个兄弟的节点
sibling()/sibling(selector)其他的兄弟
find(selector)查找满足选择器的所有的后代
parent()父节点，没有选择器
jQuery 事件处理
1. 使用 jQuery 实现事件绑定
1. 使用 jQuery 实现事件绑定
$obj. bind(事件类型，事件处理函数)；
注 意 ： 为 一 个 jQuery 对 象 绑 定 单 击 事 件 的 代 码 实 现 为
$obj.bind(‘click’,fn);也可以简写为 $obj.click(fn);
2. 获得事件对象 event
$(fucntion(e){
e 就是事件处理对象 （jQuery 对底层事件对象做了一个封装， 简化代码）
});
3. 事件对象的常用属性
a、找到事件源：
var obj = e.target
获取事件源使用 事件对象的 target 属性。
b、获取发生事件时的鼠标点击的坐标：
alert(e.pageX + ' ' + e.pageY);
获取发生事件时的鼠标坐标使用 pageX 和 pageY 属性。
c、禁止事件冒泡
e.stopPropagation();
2. 事件冒泡
子节点产生的事件会依次向上抛给相应的父节点
当事件发生时， 会首先发送给最内层的元素， 在这个元素获得响应机会之后，
事件会向上冒泡给更外层的元素，及从内层向外层依次传递。
3. 合成事件
.hover（over，out）模拟鼠标悬停事件
它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移
出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在
特定元素中的检测（例如，处在 div 中的图像） ，如果是，则会继续保持“悬停”
状态，而不触发移出事件（修正了使用 mouseout 事件的一个常见错误） 。
toggle（f1，f2，... ...）模拟连续单机事件
注意的是，通过 jQuery 这种方式触发事件时，不会发生事件传播；只会执
行直接添加到元素的处理程序。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元
素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。
随后的每次点击都重复对这几个函数的轮番调用。
4.模拟操作
trigger（type，[data]）在每一个匹配的元素上触发某类事件。也就是提交
第一个表单，但不用 submit()的效果。
$('#username').trigger('focus');
简写$obj.focus();
jQuery 动画
1. 显示隐藏的动画效果
.hide() 和 .show() 方法是对 display 的属性的操作。如果添加一个速度参
数，就会产生动画效果。
2. 上下滑动式动画效果
$('div').slideDown(800);
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可
选地触发一个回调函数。
$('div').slideUp('fast');
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可
选地触发一个回调函数。
$('div').slideToggle(speed, [callback])
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一
个回调函数。
3. 淡入淡出式动画效果
如 果 针 对 一 个 元 素 ， 只 是 逐 渐 增 大 其 不 透 明 度 ， 那 么 使 用 fadeIn
（ ‘slow’ ）;fadeOut 是逐渐减少不透明度，可以使用 /.fadeOut()
4. 自定义动画效果
用法：animate（{js 对象}，执行时间，回调函数） ；
js 对象：{ }描述动画执行之后元素的样式
执行时间：毫秒数
callback 回调函数：动画执行结束后要执行的函数
jQuery 类数组
1. 什么是类数组
jQuery 对象封装的 DOM 对象。
2. 类数组的操作
length 属性：获得 jQuery 对象封装的 dom 对象的个数
each（fn）遍历类数组，fn 用来处理 DOM 对象。在 fn 中 this 表示正在被
遍历的那个DOM对象。 fn函数可以添加一个参数i用于表示正在被遍历的DOM
对象的下标（从 0 开始）
eq(index)：将下标等于 index 的 DOM 对象取出来
get(index):获得下标为 index 的 dom 对象
get（） ：返回一个 DOM 对象组成的数组
index（obj） ：返回 DOM 或 jQuery 对象在类数组中的下标
jQuery 对 AJAX 的支持
1. load（）方法
作用：将服务器返回的数据字节添加到符合要求的节点之上
用法：
$obj.load ( 请求地址，请求参数） ；
请求参数可以有两种格式：
“username=tom & age=22”
{‘username’ ： ‘tom’ ， ‘age’ ：22 }
有请求参数时，load 方法发送 POST 请求，否则发送 GET 请求
2.$.get 和$.post
a,作用:向服务器发送异步请求，可将服务器返回的数据进行处理。
b,用法:
$.get(url,data,callback,type)
url: 请求地址
data:请求参数，可以有两种格式
格式一;"username=tom"
格式二:{"username":"tom"}