jQuery学习笔记（三）

很多时候，都会很头疼如何选择一个或几个HTML里的元素，下面是一些最基本的用法：

[b]jQuery 元素选择器[/b]
$(this) 当前 HTML 元素

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

$("ul li:first") 每个 <ul> 的第一个 <li> 元素

$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

$("p:first") 第一个 <p> 元素

$("tr:odd") 所有奇数 <tr> 元素

$("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）

$("ul li:lt(3)") 列出 index 小于 3 的元素

$("input:not(:empty)") 所有不为空的 input 元素

$(":header") 所有标题元素 <h1><h2>...

$(":contains('W3School')") 包含文本的所有元素

[b]jQuery 属性选择器[/b]
$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

$(":checked") 所有被选中的 input 元素

[b]jQuery CSS 选择器[/b]
$("p").css("background-color","red");

更高级的请参照这里：
http://w3school.com.cn/jquery/jquery_ref_selectors.asp

jQuery 名称冲突（这个还是挺好玩的）：

var jq=jQuery.noConflict()，用jq来代替 $ 符号。

（当 HTML 文档就绪可用）
$(selector).click(function) 被选元素的点击事件
$(selector).dblclick(function) 被选元素的双击事件
$(selector).focus(function) 被选元素的获得焦点事件
$(selector).mouseover(function) 被选元素的鼠标悬停事件

更多事件，请参照：
http://w3school.com.cn/jquery/jquery_ref_events.asp

hide()
show()
slideToggle()来回显示=显示/隐藏
fadeTo("slow",0.25)后面加速度和程度
fadeOut()
fadeIn()（其中fadeIn需要把要显示的内容display:none）
slideDown（其中slideDown需要把要显示的内容display:none）
slideUp
animate({width:300},"slow");参数是{属性：值},"速度"
也可以传多个参数，比如：
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"},3000);
属性包括：（位置不变）width,length,（运动型）left,top,fontSize
其中都可以加数字，表示毫秒数
[color=red]
注：HTML 元素默认是静态定位，且无法移动。

如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。
[/color]

可以设置一个效果结束之后再执行下一个函数，如下：
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

$("p").html("Google");html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。

$("p").append(" Google");在p标签后面加上Google，也可以写<b>Google</b>（在p标签里面）跟prepend用法相同

$("p").after(" Google.");在p标签后面加上Google，（在p标签外面）

还有几个常用的：addClass()添加类；remove()移除元素；wrap()把匹配的元素用指定的内容或元素包裹起来；val()设置或返回匹配元素的值。
更多文档方法，请参阅：
http://w3school.com.cn/jquery/jquery_ref_manipulation.asp

jQuery CSS:
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
获得id为abc的width属性的css
$("#abc").html($(this).css("width"));

定义高度：
$("#abc").height("200px");
$("#abc").width("200px");

导入txt里面的内容
$('#abc').load('/jquery/test1.txt')
比较常用的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 请求的所有键/值对选项
[color=red]
以下代码不知道什么意思：
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
有知道的大侠，麻烦告知一声
[/color]

[color=red]以下为新学的，挺好：
在id为abc的元素往下找到第一个class为cc的元素
$("#abc").find(".cc")
在id为abc的元素往下找到第一个select找到选中项的value
$("#abc").find("select").find("option:selected").val()
[/color]