jQuery

通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素(通过标签名、属性名或内容对 HTML 元素进行选择)。

基础语法是:$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

示例

  • $(this).hide() – 隐藏当前元素
  • $(“p”).hide() – 隐藏所有段落
  • $(“p.test”).hide() – 隐藏所有 的段落
  • $(“#test”).hide() – 隐藏所有 id=”test” 的元素
$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

  • $(“p”) 选取 <p> 元素。
  • $(“p.intro”) 选取所有 的 <p> 元素
  • $(“p#demo”) 选取所有 id=”demo” 的 <p> 元素
  • $(“#intro”) id=”intro” 的第一个元素
    $(“ul li:first”) 每个 <ul> 的第一个 <li> 元素

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

  • $(“[href]”) 选取所有带有 href 属性的元素
  • $(“[href=’#’]”) 选取所有带有 href 值等于 “#” 的元素
  • $(“[href!=’#’]”) 选取所有带有 href 值不等于 “#” 的元素。
  • $(“[href$=’.jpg’]”) 选取所有 href 值以 “.jpg” 结尾的元素

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色:

实例

$("p").css("background-color","red");

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。通常会把 jQuery 代码放到 <head>部分的事件处理方法中.

如果您的网站包含许多页面,若要 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中,通过 src 属性来引用文件:

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:

  • 把所有 jQuery 代码置于事件处理函数中
  • 把所有事件处理函数置于文档就绪事件处理器
  • 把 jQuery 代码置于单独的 .js 文件中
  • 如果存在名称冲突,则重命名 jQuery 库: var jq=jQuery.noConflict(),使用自己的名称(比如 jq)来代替 $ 符号

在一个涉及动画的函数之后来执行语句,请使用 callback 函数。

jQuery 在语法是不是很严格;您可以按照希望的格式来写,包含折行和缩进:jQuery 会抛掉多余的空格,并按照一行长代码来执行下面的代码行
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

jQuery DOM 操作

jQuery 中非常重要的部分,就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易

提示:DOM = Document Object Model(文档对象模型)

DOM 定义访问 HTML 和 XML 文档的标准:“W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容 – text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法:

  • text() – 设置或返回所选元素的文本内容
  • html() – 设置或返回所选元素的内容(包括 HTML 标记)
  • val() – 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:

实例

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法:

  • append() – 在被选元素的结尾插入内容
  • prepend() – 在被选元素的开头插入内容
  • after() – 在被选元素之后插入内容
  • before() – 在被选元素之前插入内容
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)
AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。
不重载整个网页的情况下AJAX 通过后台加载数据,并在网页上进行显示
使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
  • GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
  • POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

jQuery $.get() 方法

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

语法:

$.get(URL,callback);
  • 必需的 URL 参数规定您希望请求的 URL。
  • 可选的 callback 参数是请求成功后所执行的函数名

jQuery $.post() 方法

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

语法:

$.post(URL,data,callback);
  • 必需的 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);
  });
});
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 & ".")
%>

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办?

其他一些 JavaScript 框架包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写

jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。您仍然可以通过全名替代简写的方式来使用 jQuery:

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行!");
  });
});

<script>
var jq=$.noConflict();
jq(document).ready(function(){
jq(“button”).click(function(){
jq(“p”).text(“jQuery 仍在运行!”);
});
});
</script>

可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 – 而在函数外,依旧不得不使用 “jQuery”:

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行!");
  });
});

w

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web

%d bloggers like this: