jQuery的一些备忘

http://www.cnblogs.com/zyh-nhy/archive/2009/11/06/1597582.html

 

操作元素的样式

主要包括以下几种方式：

$("#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]...   匹配多个属性条件中的一个