jquery 学习历程2

最新推荐文章于 2024-10-01 06:15:44 发布

wei_wei_hnu

最新推荐文章于 2024-10-01 06:15:44 发布

阅读量549

点赞数

文章标签： jquery callback function ajax html properties

本文链接：https://blog.csdn.net/wei_wei_hnu/article/details/6072481

版权

jQuery Callback 函数

如果您希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。

<html> <head> <mce:script type="text/javascript" src="/jquery/jquery.js" mce_src="jquery/jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <button type="button">Hide</button> <p>This is a paragraph with little content.</p> </body> </html>

jQuery HTML 操作

jQuery 包含很多供改变和操作 HTML 的强大函数。

改变 HTML 内容

语法

$(selector).html(content)

html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。

<mce:script type="text/javascript"></mce:script>

添加 HTML 内容

语法

$(selector).append(content)

append() 函数向所匹配的 HTML 元素内部追加内容。

<mce:script type="text/javascript"></mce:script>

$(selector).after(content)

after() 函数在所有匹配的元素之后插入 HTML 内容。

语法

$(selector).before(content)

before() 函数在所有匹配的元素之前插入 HTML 内容。

jQuery CSS 函数

jQuery CSS 操作

jQuery 拥有三种供 CSS 操作的重要函数：

$(selector).css(name,value)
$(selector).css({properties})
$(selector).css(name)

函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值：
$("p").css("background-color","yellow");

函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值：

<mce:script type="text/javascript"><!--
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
// --></mce:script>

函数 css(name) 返回指定的 CSS 属性的值：
实例
$(selector).css(name)
$(this).css("background-color");
jQuery Size 操作
jQuery 拥有两种供尺寸操作的重要函数：
   
   $(selector).height(value)
$(selector).width(value)

$("#id100").height("200px");

$("#id200").width("300px");

Query CSS 函数

CSS 属性	描述
$(selector).css(name,value)	为匹配元素设置样式属性的值
$(selector).css({properties})	为匹配元素设置多个样式属性
$(selector).css(name)	获得第一个匹配元素的样式属性值
$(selector).height(value)	设置匹配元素的高度
$(selector).width(value)	设置匹配元素的宽度

jQuery AJAX 函数

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种创建快速动态网页的技术。

AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新。

jQuery 提供了供 AJAX 开发的丰富函数（方法）库。

通过 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。

而且您可以直接把远程数据载入网页的被选 HTML 元素中！

jQuery 的 load 函数是一种简单的（但很强大的）AJAX 函数。它的语法如下：

$(selector).load(url,data,callback)

请使用选择器来定义要改变的 HTML 元素，使用 url 参数来指定您的数据的 web 地址。

只有当您希望向服务器发送数据，才需要使用 data 参数。只有当您需要在完毕之后触发一个函数时，您才需要使用 callback 参数。

Low Level AJAX

$.ajax(options) 是低层级 AJAX 函数的语法。

$.ajax 提供了比高层级函数更多的功能，但是同时也更难使用。

option 参数设置的是 name|value 对，定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。

jQuery AJAX 请求

请求	描述
$(selector).load(url,data,callback)	把远程数据加载到被选的元素中
$.ajax(options)	把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type)	使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type)	使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback)	使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback)	加载并执行远程的 JavaScript 文件