jQuery是目前最流行的JavaScript程序库,它对javascript对象和函数进行了封装,是我们更方便地处理HTML、实现动画效果和AJAX交互。AJAX即异步javascript及XML,是一种创建交互式网页应用的技术,通过在后台与服务器进行少量数据交换,使网页实现异步更新。
jQuery
1、jQuery简介
jQuery是目前最流行的javascript程序库,它是对javascript对象和函数的封装
jQuery库文件:官网下载.js ,.min.js文件
页面引入:
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
2、jQuery语法结构 $(selector).action();
工厂函数$():将DOM对象转化为jQuery对象 “$”等同于“jQuery”
选择器selector:获取需要操作的DOM元素
方法action():jQuery中提供的方法,包括绑定事件处理的方法
3、方法
连缀书写形式:
$("h2").css("color","#CCFFFF").next().css("display","block");
$(document).ready() window.onload 类似
$("#title").html( ); 等同于
document.getElementById("title").innerHTML;
jQuery对象转DOM对象 [index] get()方法
var txtName = $txtName[0]; //DOM对象
var txtName =$txtName.get(0); //DOM对象
DOM对象转jQuery对象 $()函数方法
var $txtName = $(txtName);
4、jQuery选择器
类CSS选择器
基本选择器
层次选择器
属性选择器
过滤选择器
基本过滤选择器 $(“li:first”)来选取第一个li元素
可见性过滤选择器
$("p:hidden").show(); $("p:visible").hide();
表单选择器
内容过滤器
5、特殊符号的转义
$("#id\\#a");
$("#id\\[2\\]");
6、DOM操作分为三类:
DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById()
HTML-DOM:用于处理HTML文档,如document.forms
CSS-DOM:用于操作CSS,如element.style.color=”green”
jQuery中的DOM操作可分为:
样式操作
文本内容及value属性值操作
节点操作
节点属性操作
节点遍历
CSS-DOM操作
7、jQuery的事件
基础事件
window事件
鼠标事件
键盘事件
表单事件
复合事件
鼠标光标悬停
鼠标连续点击
8、jQuery的动画效果“
控制元素显示与隐藏 show([duration][,complete])
hide([duration][,complete])
控制元素淡入淡出
$("img").fadeIn("slow"); $("img").fadeOut(1000);
切换元素可见状态
$("li:gt(5):not(:last)").toggle();
改变元素高度
$(".txt").slideUp("slow"); $(".txt").slideDown("slow");
自定义动画
$(selector).animate( params [, speed] [,easing] [,fn] );
AJAX
1、AJAX简介
AJAX(Asynchronous javascript And XML):异步javascript及XML
作用:Web2.0的主要开发技术、实现页面局部刷新
提升用户体验、异步方式发送请求
2、工作流程与实现步骤
javascript使用XMLHttpRequest 对象来直接与服务器进行通信,异步传输数据
实现步骤:创建XMLHttpRequest 对象-设置回调函数-初始化XMLHttpRequest组件-发送请求
3、使用AJAX发送请求及处理响应
//(1) 创建XMLHttpRequest对象//代码略
//(2) 设置回调函数xmlHttp.onreadystatechange
= function callback(){if(xmlHttp.readyState == 4 && xmlHttp.status == 200 ){//根据不同的返回类型处理响应} }
//(3)初始化XMLHttpRequest 组件xmlHttp.open(type,url,async);
//(4) 发送请求xmlHttp.send(null / string);
发送请求方式:GET方式和POST方式
第(3)步
–Get方法 xmlHttpRequest.open(“GET”,url,true);
–Post方法 xmlHttpRequest.open(“POST”,url,true);
xmlHttpRequest.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded”);
第(4)步
–Get方法 xmlHttpRequest.send(null);
–Post方法 xmlHttpRequest.send(数据信息);
处理响应的方法:文本响应和XML响应
文本:var username = xmlHttpRequest.responseText;
XML:var dom = xmlHttpRequest.responseXML;
4、jQuery实现AJAX方法
$.ajax()方法 ajax({url: “发送的请求地址”,type:”请求方式”});
$.get()方法 通过HTTP GET 请求载入信息
$.post()方法 通过远程HTTP POST请求载入信息
$.getJSON()方法 通过HTTP GET 请求载入JSON 数据
$.getScript()方法 通过HTTP GET请求载入并执行一个javascript 文件
$(“form”).serialize()用于序列化表单内容为字符串