Jquery的一些总结

小小大人物

2012-11-21

1、文本框：$(":text[name='userName']")

a)、如果text域只有一个，刚返回jquery dom，取值$(":text[name='userName']").val();

b)、如果有两个名称为userName时，则返回是dom结点的数组，取数组第一个元素的值：$(":text[name='userName']")[0].value；而不能用$(":text[name='userName']")[0].val();

c)、如果有两个名称为userName, $(":text[name='userName']").val(); //取第一个元素的值

d)、$(":text[name='userName']:first").val(); //取第一个元素值

2、单选按钮：$(":radio[name='sex']:checked") //取得选中的单选按钮

3、复选框：$(":checkbox[name='favorite']:checked") //取得选中的复选框

4、下拉框：$("select[name='education']").val() //取得选中的下拉框的值

设置取结点的值

5、dom.html(); //取结点的html

dom.html("html内容"); //设置结点的html

6、dom.append("html内容"); //在某个结点添加html

7、按照样式选取结点

$(".class")

$(". class ul") //选取引用class样式结点的下的ul元素的结点

8、jQuery.getScript(url,success(response,status))：通过 AJAX 请求来获得并运行一个 JavaScript 文件，

参考：http://www.w3school.com.cn/jquery/ajax_getscript.asp

9、操作css样式

$("p").css("color","red");

$(".sign").css("display", "none");
$(".signed").css("display", "");

10、样式添加、修改

http://www.w3school.com.cn/jquery/jquery_css_classes.asp

11、取某元素的样式、设置某元素的样式

$('#myid').attr('class')这是取得元素的class
$('#otherid').attr('class',$('#myid').attr('class'));

11、jquery的ready方法中使用全局：window.xxx='全局变量'；

100、有一单选按钮控制图层显示

$("#divHidden81").toggle(ture) //根据toggle( switch )， switch：true/false，显示或隐藏元素，这里可以是div，也可以是其他标签，如：<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>

<div id="divHidden6" style="display: none; border: 1px solid rgb(201, 254, 247); background: none repeat scroll 0% 0% rgb(232, 255, 250); padding: 10px; margin-top: 10px;">
	<strong>1、降薪的比例为？（填空）：</strong>
		<input type="text" class="name" name="QA80">%<br>
	<strong>2、降薪主要针对的群体是？（可多选）</strong>
			<div class="main11">
				<p>
				  <input type="checkbox" value="1" name="QA81">业务线员工&nbsp;&nbsp;
				  <input type="checkbox" value="2" name="QA82">非业务线员工&nbsp;&nbsp;
				</p>
			</div>
</div>

js代码：

<script type="text/javascript">
function showDate(){
	alert($(":text[name='userName']").val());
	alert($(":radio[name='sex']:checked"));
	alert("checkbox:"+$(":checkbox[name='favorite']:checked").val());
	alert("select"+$("select[name='education']").val());
}

$(document).ready(function(){
	$(":radio[name=showRadioButton]").click(function(){
		$("#divHidden6").toggle(this.value=="1");
	})
})
</script>

12、$.trim("dddddd")

13、$(selector).focus()

14、判断jquery取的元素是否存在，if($("#userName").length>0){alert("元素存在");}

15、jquery判断checkbox是否选中、改变checkbox状态

jquery判断checked的三种方法:
.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦
jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");

jquery