你的位置:首页 > Java教程

[Java教程]JavaScript jQuery 入门回顾 2

JQuery 滑动

利用jQuery可以在元素上创建滑动效果。

  • slideDown() 向下滑动元素。
  • slideUp() 向上滑动元素。
  • slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换。
  • $(selector).slide(speed,callback);
    {
      可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
      可选的 callback 参数是滑动完成后所执行的函数名称。
    }

jQuery 动画 

jQuery animate() 方法用于创建自定义动画。
语法:

$(selector).animate({params}, speed, callback);// 必需的 params 参数定义形成动画的 CSS 属性。// 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。// 可选的 callback 参数是动画完成后所执行的函数名称。

默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的CSS 的 position 属性设置为 relative、fixed 或 absolute。
jQuery animate() - 能够操作多个属性
如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() - 使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":

$("button").click(function(){  $("div").animate({    height:'toggle'  });});

jQuery animate() - 使用队列功能
默认地,jQuery 提供针对动画的队列功能。
这意味着如果在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

ex1,ex2

jQuery stop()

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll, goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

默认地,stop() 会清除在被选元素上指定的当前动画。

事件和方法

文档就绪函数

$(document).ready(function(){--- jQuery functions go here ----});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。

把所有 jQuery 代码置于事件处理函数中,把所有事件处理函数置于文档就绪事件处理器中

hide/show/toogle

$(selector).hide(speed, callback);$(selector).show(speed, callback);$(selector).toggle(speed, callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示或切换完成后所执行的函数名称。

jQuery 事件

Event 函数绑定函数至
$(document).ready(function)将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

jQuery Fading

通过 jQuery,您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo() 

jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。

由于 JavaScript 语句(指令)是逐一执行的,按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。

为了避免这个情况,您可以以参数的形式添加 Callback 函数。如果您希望在一个涉及动画的函数之后来执行语句,请使用 callback 函数。

Ajax

获取Ajax - HttpRequest对象:

htmlobj=$.ajax({url:"/jquery/test1.txt", async:false});

jQuery load()

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

$(selector).load(URL, data, callback);

  • 必需的 URL 参数规定您希望加载的 URL。
  • 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
  • 可选的 callback 参数是 load() 方法完成后所执行的函数名称。

注:也可以把 jQuery 选择器添加到 URL 参数。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示“外部内容加载成功!”,而如果失败,则显示错误消息:

复制代码
$("button").click(function(){  $("#div1").load("demo_test.txt",function(responseTxt, statusTxt, xhr){
   if(statusTxt=="success")      alert("外部内容加载成功!");
   if(statusTxt=="error")      alert("Error: "+xhr.status+": "+xhr.statusText);  });});
复制代码

HTTP 请求:GET vs POST

两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。

  • GET - 从指定的资源请求数据
  • POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

Get():

$.get(URL, callback:function(data, status));

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。

Post():

$.post(URL, data, callback:function(data, status));

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。

实例:

$("button").click(function(){ $.post("demo_test_post.asp", {  name:"Donald Duck",  city:"Duckburg" }, function(data,status){  alert("Data: " + data + "\nStatus: " + status); });});

More 

___________________________________________________________________________________

jQuery 操作 CSS

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回被选元素的一个或多个样式属性。

jQuery css()

css("propertyname"); // 返回 CSS 属性css("propertyname","value"); // 设置 CSS 属性css({"propertyname":"value","propertyname":"value",...}); // 设置多个 CSS 属性

jQuery width|height

jQuery 提供多个处理尺寸的重要方法:

  • width() 设置或返回元素的宽度(不包括内边距、边框或外边距)。
  • height() 设置或返回元素的高度(不包括内边距、边框或外边距)。
  • innerWidth() 返回元素的宽度(包括内边距)。
  • innerHeight() 返回元素的高度(包括内边距)。
  • outerWidth() 返回元素的宽度(包括内边距、边框和外边距)。
  • outerHeight() 返回元素的高度(包括内边距、边框和外边距)。

 设置值

$("#div1").width(500).height(500); 
$(window/document).width/height; 

var if (window.// code for IE7+, Firefox, Chrome, Opera, Safari  new else{// code for IE6, IE5  new ActiveXObject("Microsoft.);}

向服务器发送请求

如需将请求发送到服务器,我们使用

方法描述
open(methodurlasync)

规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)
send(string)

将请求发送到服务器。

  • string:仅用于 POST 请求

GET请求

如果希望通过 GET 方法发送信息,请向 URL 添加信息:

true);

POST 请求

一个简单 POST 请求:

true);

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

true);"Content-type","application/x-www-form-urlencoded");"fname=Bill&lname=Gates");

方法描述
setRequestHeader(headervalue)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值

GET or POST

在以下情况中,请使用 POST 请求(Post方式不产生缓存):

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
  • 需要传送参数的时候用Post方式,如注册、提交;

通过 AJAX,JavaScript 无需等待服务器的响应,而是:在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理。

Async = true / false

当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
注:当使用 async=false 时,不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:

function(){if (){  document.getElementById("myDiv").innerHTML="GET","test1.txt",true);

服务器响应

如需获得来自服务器的响应,请使用

属性描述
responseText获得字符串形式的响应数据。
response获得

1. 如果来自服务器的响应并非

responseText 属性返回字符串形式的响应,因此您可以这样使用:

document.getElementById("myDiv").innerHTML=

2. 如果来自服务器的响应是

如:请求 books.

="";x=);for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; }document.getElementById("myDiv").innerHTML=txt; 

onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有

下面是

属性描述
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status

200: "OK"

404: 未找到页面

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

function() { if ()  {  document.getElementById("myDiv").innerHTML=

注:onreadystatechange 事件被触发 4 次,对应着 readyState 的每个变化。

使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果网站上存在多个 AJAX 任务,那么应该为创建

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):