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

Web技术-3 jQuery和AJAX

猜你喜欢