JavaScript jQuery 入门回顾 2

Posted 2020-07-20 Coder25

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 - 包含 XMLHttpRequest 对象

下面的例子会在 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; 

XMLHttpRequest

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

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

方法	描述
open(method, url, async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

GET请求

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

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

POST 请求

一个简单 POST 请求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

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

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

方法	描述
setRequestHeader(header, value)	向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值

GET or POST

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

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

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
通过 AJAX，JavaScript 无需等待服务器的响应，而是：在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理。

Async = true / false

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

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
　　document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

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

1. 如果来自服务器的响应并非 XML，请使用 responseText 属性。

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

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

2. 如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

如：请求 books.xml 文件，并解析响应

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

onreadystatechange 事件

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

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

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

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

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

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

使用 Callback 函数

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

如果网站上存在多个 AJAX 任务，那么应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

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