jQuery学习总结

jQuery介绍

什么是jQuery

jQuery是一个优秀的 JavaScript框架。一个轻量级的JavaScript库

JQuery的编程步骤

1. 引入JQuery的js文件
2. 使用选择器定位要操作的节点
3. 调用JQuery的方法进行操作

什么是JQuery对象

为了解决浏览器的兼容问题而提供的一种统一封装后的对象描述

DOM对象转JQuery对象

实现方式：$(DOM对象)

function f(){
	var obj = document.getElementById('d1');
	//DOM->JQuery对象
	var $obj = $(obj);
	$obj.html('hello jQuery');
}

jQuery对象转DOM对象

实现方式：$obj.get(0) 或者 $obj[0]

function f(){
	var $obj = $('#d1');
	//jQuery对象->DOM
	var obj = $obj.get(0);
	obj.innerHTML = 'hello jQuery';
}

jQuery选择器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#crazy")	id="crazy"的元素，速度最快
.class	$(".intro")	所有class="intro"的元素
element	$(“p”)	所有 < p > 元素
.class.class	$(".intro.demo")	所有class="intro"且class="demo"的元素
:first	$(“p:first”)	第一个< p >元素
:last	$(“p:last”)	最后一个< p >元素
:even	$(“tr:even”)	所有偶数< tr >元素
:odd	$(“tr:odd”)	所有奇数< tr >元素
:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列出 index 大于 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列出 index 小于 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不为空的 input 元素
:header	$(":header") 所有标题元素	< h1 > - < h6 >
:animated		所有动画元素
:contains(text)	$(":contains(‘crazy’)")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$(“p:hidden”)	所有隐藏的 < p > 元素
:visible	$(“table:visible”)	所有可见的表格
s1,s2,s3	$(“th,td,.intro”)	所有带有匹配选择的元素
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href=’#’]")	所有 href 属性的值等于 “#” 的元素
[attribute!=value]	$("[href!=’#’]")	所有 href 属性的值不等于 “#” 的元素
[attribute$=value]	$("[href $=’.jpg’]")	所有 href 属性的值包含以 “.jpg” 结尾的元素
:input	$(":input")	所有 < input > 元素
:text	$(":text")	所有 type=“text” 的 < input > 元素
:password	$(":password")	所有 type=“password” 的 < input > 元素
:radio	$(":radio")	所有 type=“radio” 的 < input > 元素
:checkbox	$(":checkbox")	所有 type=“checkbox” 的 < input > 元素
:submit	$(":submit")	所有 type=“submit” 的 < input > 元素
:reset	$(":reset")	所有 type=“reset” 的 < input > 元素
:button	$(":button")	所有 type=“button” 的 < input > 元素
:image	$(":image")	所有 type=“image” 的 < input > 元素
:file	$(":file")	所有 type=“file” 的 < input > 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

jQuery操作DOM

JQuery操作DOM查询

<div id='d1'>
	<span>hello jQuery</span>
	<input name="uname"/>
</div>
function f(){
	//html()读取或修改节点的HTML内容
	alert($('#d1').html());
	//text()读取或修改节点的文本内容
	alert($('#d1').text());
	//val()读取或修改节点的value属性值
	alert($(':text').val('空白格'));
	//attr()读取或修改节点的属性
	alert($('#d1').attr('style', 'color:red;'));
}

jQuery操作DOM创建、插入、删除

//创建一个div，并加在body的最后一个节点
$('body').append('<div>...</div>');
//插入DOM节点
.append() //作为最后一个子节点添加进来
.prepend() //作为第一个子节点添加进来
.after() //作为下一个兄弟节点添加进来
.before() //作为上一个兄弟节点添加进来
//删除DOM节点
.remove() //移除
.remove(s) //按选择器定位后删除
.empty() //清空节点

JQuery操作DOM复制节点

.clone()
.clone(true) //复制的节点也具有行为

JQuery操作DOM样式操作

.attr("class", "") //获取和设置
.addClass("") //追加样式
.removeClass("") //移除样式
.removeClass() //移除所有样式
.toggleClass("") //切换样式
.hasClass("") //是否有某个样式
.css("") //读取css的值
.css("", "") //设置多个样式

JQuery操作DOM遍历节点

.children()/.chiledren(s) //只考虑直接子节点
.next()/.next(s) //下一个兄弟节点
.prev()/.prev(s) //上一个兄弟节点
.siblings()/.siblings(s) //其他兄弟
.find(s) //查找满足选择器的所有后代
.parent() //父节点

JQuery事件处理

//事件绑定$obj.bind(事件类型， 事件处理函数)
$obj.bind('click', fn);
$obj.click(fn);//绑定事件简写形式
//获得事件对象event
$obj.click(function(e){...});//e就是事件对象

JQuery对Ajax的支持

$obj.load(请求地址, 请求参数)

1. 将服务器返回的数据字节添加到符合要求的节点之上
2. 请求参数
   • “username=tom&age=22”
   • {‘username’ : ‘tom’, ‘age’ : ‘22’}
3. 有请求参数时，load方法发送POST请求，否则发送GET请求

$.get(请求地址, 请求参数, 回调函数, 服务器返回的数据类型)

1. 发送GET类型的请求
2. 回调函数添加的参数是服务器返回的数据

$.ajax({})

{}内可以设置的选项参数

• url：请求地址
• type：请求方式
• data：请求参数
• dataType：服务器返回的数据类型
• success：服务器处理正常对应的回调函数
• error：服务器出错对应的回调函数
• async：true(缺省)，当值为false时发送同步请求