jQuery基础(二)
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
选择器 实例 选取
* $("*") 所有元素
#id $("#lastname")id="lastname" 的元素
.class $(".intro")所有 的元素
element $("p")所有 <p> 元素
.class.class$(".intro.demo")所有 且 的元素
:first$("p:first")第一个 <p> 元素
:last$("p:last")最后一个 <p> 元素
:even$("tr:even")所有偶数 <tr> 元素
:odd$("tr:odd")所有奇数 <tr> 元素
:eq(index)$("ul li:eq(3)")列表中的第四个元素(index 从 0 开始)
:gt(no) $("ul li:gt(3)")列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)")列出 index 小于 3 的元素
:not(selector)$("input:not(:empty)")所有不为空的 input 元素
:header$(":header")所有标题元素 <h1> - <h6>
:animated 所有动画元素
:contains(text)$(":contains('W3School')")包含指定字符串的所有元素
:empty$(":empty")无子(元素)节点的所有元素
:hidden$("p:hidden")所有隐藏的 <p> 元素
:visible$("table:visible")所有可见的表格
s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素
[attribute]$("[href]")所有带有 href 属性的元素
[attribute=value]$("[href='#']")所有 href 属性的值等于 "#" 的元素
[attribute!=value]$("[href!='#']")所有 href 属性的值不等于 "#" 的元素
[attribute$=value]$("[href$='.jpg']")所有 href 属性的值包含以 ".jpg" 结尾的元素
:input $(":input")所有 <input> 元素
:text $(":text")所有 type="text" 的 <input> 元素
:password$(":password")所有 type="password" 的 <input> 元素
:radio $(":radio")所有 type="radio" 的 <input> 元素
:checkbox$(":checkbox")所有 type="checkbox" 的 <input> 元素
:submit $(":submit")所有 type="submit" 的 <input> 元素
:reset $(":reset")所有 type="reset" 的 <input> 元素
:button $(":button")所有 type="button" 的 <input> 元素
:image $(":image")所有 type="image" 的 <input> 元素
:file $(":file")所有 type="file" 的 <input> 元素
:enabled$(":enabled")所有激活的 input 元素
:disabled$(":disabled")所有禁用的 input 元素
:selected$(":selected")所有被选取的 input 元素
:checked$(":checked")所有被选中的 input 元素
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
由于 JavaScript 语句(指令)是逐一执行的 - 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。
为了避免这个情况,您可以以参数的形式添加 Callback 函数。
jQuery CSS 操作
jQuery 拥有三种用于 CSS 操作的重要函数:
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 文件
(url) 被加载的数据的 URL(地址)
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时,所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项