python jQuery

1.jQuery - 尺寸

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

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

下面的例子返回指定的 <div> 元素的宽度和高度：

js文件中：

$(document).ready(function(){
    main();
});

function main() {
    chicun();
}

function chicun() {
    $("button").click(function () {
        var txt = "";
        txt += "Width: " + $("#div1").width() + "</br>";
        txt += "Height: " + $("#div1").height();
        $("#div1").html(txt);
    });
}

HTML：

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>

点击按钮后，会出现高与宽。

2.jQuery - AJAX

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

（1）jQuery load() 方法

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

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

语法：

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

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

这是示例文件（"demo_test.txt"）的内容：

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：

js：

$(document).ready(function(){
    main();
});

function main() {
    load();
}
function load() {
    $("#btn1").click(function () {
        $('#test').load('./scripts/demo_test.txt');
    });
}

HTML:

<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>

点击按钮后，会将“test”标签的内容替换成文本中的内容。

也可以把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：

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

这样TXT文件中“id=p1”的内容就会替换“test”。

（2）jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求：GET vs. POST

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

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

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

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

jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback);

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

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

js：

function get() {
   $("button").click(function(){
   $.get("./scripts/demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
}

HTML：

<button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>

提交之后会出现弹窗。

$.get() 的第一个参数是我们希望请求的 URL（"demo_test.asp"）。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

提示：这个 ASP 文件 ("demo_test.asp") 类似这样：

<%
response.write("This is some text from an external ASP file.")
%>

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：

$.post(URL,data,callback);

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

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

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

js:

function js_post() {
    $("button").click(function(){
        $.post("demo_test_post.asp",
        {
          name:"Donald Duck",
          pwd:"Duckburg"
        },
        function(data,status){
          alert("数据：" + data + "\n状态：" + status);
        });
      });
}

HTML：

<button>向页面发送 HTTP POST 请求，并获得返回的结果</button>

点击按钮会向asp文件提交data数据，并返回结果。

$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。

然后我们连同请求（name 和 city）一起发送数据。

"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

提示：这个 ASP 文件 ("demo_test_post.asp") 类似这样：

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>