Web技术-5 jQuery和AJAX

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()用于序列化表单内容为字符串

Visant

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: