jQuery 语法
jQuery 语法是为 HTML 元素的选取编制,可以对元素执行某些操作。
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery action() 执行对元素的操作
实例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){ --- jQuery functions go here ---- });
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
jQuery 选择器
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
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");
更多的实例
语法 | 描述 |
---|---|
$(this) | 当前 HTML 元素 |
$("p") | 所有 <p> 元素 |
$("p.intro") | 所有 class="intro" 的 <p> 元素 |
$(".intro") | 所有 class="intro" 的元素 |
$("#intro") | id="intro" 的第一个元素 |
$("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
$("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的 href 属性的属性 |
$("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
JQuery是一个事件驱动 :
jQuery 事件
下面是 jQuery 中事件函数的一些例子:
Event 函数 | 绑定函数至 |
---|---|
$(document).ready(function) | 文档的就绪事件 (当 HTML 文档就绪可用) |
$(selector).click(function) | 被选元素的点击事件 |
$(selector).dblclick(function) | 被选元素的双击事件 |
$(selector).focus(function) | 被选元素的获得焦点事件 |
$(selector).mouseover(function) | 被选元素的鼠标悬停事件 |
事件驱动 :针对每个事件都可以有一个handler,当此事件发生时候,就会去调用对此事件注册的event handler,此event handler还有可能会触发新的事件。
jQuery HTML 操作(示例)
函数 | 描述 |
---|---|
$(selector).html(content) | 改变被选元素的(内部)HTML |
$(selector).append(content) | 向被选元素的(内部)HTML 追加内容 |
$(selector).prepend(content) | 向被选元素的(内部)HTML “预置”(Prepend)内容 |
$(selector).after(content) | 在被选元素之后添加 HTML |
$(selector).before(content) | 在被选元素之前添加 HTML |
jQuery CSS 操作
jQuery 拥有三种供 CSS 操作的重要函数:
- $(selector).css(name,value)
- $(selector).css({properties})
- $(selector).css(name)
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 文件 |
$.ajax()详细
http://www.w3cschool.cn/ajax_ajax.html更加细致的选项。