jQuery的一些常用的方法(转载)

转载[url]http://www.cnblogs.com/zyh-nhy/archive/2009/11/06/1597582.html[/url]

操作元素的样式
主要包括以下几种方式：
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" }); //以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class
显示/隐藏元素
jQuery("#TagName").hide();
jQuery("#TagName").show();
jQuery(".TagName").css("display","none");
jQuery(".TagName").css("display","");
取得第一个匹配元素的属性值(如果元素没有相应属性，则返回 undefined )
jQuery("#tagName").attr("class") 或 jQuery("#tagname").attr("className");
jQuery("#checkName").attr("checked",true); // 选中checkBox
jQuery("SELECT#TagName").attr("disabled", "disabled"); // 将某个元素设置失效
val()与text()的区别
text()方法是取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
获取span,div ,p之类才用text()或html()方法。
例如：
<div>wahaha</div>
jQuery("div").text(); // 将得到文本"wahaha"
单行文本<input type="text" ...>不能用text()方法获得值，必须用val()方法。
val()方法是获得第一个匹配元素的当前值。
例：
<input type="text" value="a" />
<input type="text" value=" b"/>
<input type ="text" value= "cc"/>
<select>
<option>aaa</option>
<option selected="selected">bbb</option>
<option>ccc</option>
</select>
jQuery("input").val();
jQuery("select").val();
将得到：第一个匹配元素的值“wahaha" 和"bbb"
获取一组checbox/radio被选中项的值
<input name="ckTagName" type="checkbox" checked="true" value="nn"/>
jQuery("input[@name=ckTagName][@checked]").val()
获取一组checkbox被选中项的个数
jQuery(":checkbox[name='checkItems']:checked").length;
或通过class获取
jQuery(".pItem:checkbox:checked").length;
设置radio单选组的第二个选项为当前选中值
jQuery("input[@name=items]").get(1).checked = true;
获取select被选中项的文本
jQuery("select[@name=selcTagName] option[@selected]").text();
获取Select被选中项的Value值
jQuery("select[@name=selcTagName] option[@selected]").val();
设置Select下拉框选项的第二个元素为默认值
jQuery("#selectItems")[0].selectedIndex = 1;
索引 eq()、get()、Index()
eq(pos)
说明：减少匹配对象 到一个单独得dom元素
参数：pos (Number): 期望限制的索引，从0 开始
例子：
未执行jQuery前：
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">
jQuery</a>jQuery代码及功能：
function jq(){
alert($("p").eq(1).html())
}
运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个<p>标签的内容
get() get(num)
说明：获取匹配元素，get(num)返回匹配元素中的某一个元素
参数：get (Number): 期望限制的索引，从0 开始
例子：
未执行jQuery前：
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能：
function jq(){
alert($("p").get(1).innerHTML);
}
运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个<p>标签的内容
注意get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$("p").eq(1)对象的内容用jQuery方法html()，而取$("p").get(1)的内容用innerHTML
index(obj)
说明：返回对象索引
参数：obj (Object): 要查找的对象
例子：
未执行jQuery前：
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能：
function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}
运行：当点击id为test的元素时，两次弹出alert对话框分别显示0，1
size() Length
说明：当前匹配对象的数量，两者等价
例子：
未执行jQuery前：
<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能：
function jq(){
alert($("img").length);
}
运行：当点击id为test的元素时，弹出alert对话框显示2，表示找到两个匹配对象
JQuery选择器
(1)层级：
选择一[空格]选择二 表示选一内合符条件二的所有元素
选择一[>]选择二 表示选一内合符条件二的第一个元素
选择一[+]选择二 表示紧接选一符条件二的元素 next
选择一[~]选择二 表示选一后符条件二的所有元素 siblings
(2)运算符
:animated 动画元素
:eq(index) 索引位置，如：$("div:eq(1)"
:even 偶数元素
dd 奇数元素
:first 第一个
:gt(index) 大于索引的所有元素
:lt(index) 小于索引的所有元素
:header H1、H2... 这些标题元素
:last 最后一个
:not(Selector) 排除

:contains(string) 选择的对象内容里包含
:empty 选择的对象内容为空
:has(Selector) 含有
:parent 与empty相反
:first-child
:last-child
:nth-child(index) 第几个
nly-child 唯一的子元素

表单
:text :checkbox :radio :image :file :submit :reset :password :button

表单状态
:checked :disabled :enabled :selected

可见性
:hidden :visible

属性及其运算符
[属性名称] 匹配包含给定属性的元素
[att=value] 等同上面
[att*=value] 模糊匹配
[att!=value] 不能是这个值
[att$=value] 结尾是这个值
[att^=value] 开头是这个值
[att1][att2][att3]... 匹配多个属性条件中的一个