元素的each方法
目前已知,radio,checkbox在jQuery中无法直接遍历,需要使用each方法进行遍历.
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
var cks = $('div input:checked');
//alert(cks.val());
//jQuery无法直接遍历checkbox
//需要使用each方法,但是ele是doc元素,需要转换为jquery对象打印出value值
//注意在html中checked='checked'写法!
cks.each(function (index, ele) {
alert('=' + index + '=' + $(ele).val());
});
});
});
</script>
</head>
<body>
<input type="button" name="name" value="改变" id='btn' />
<div id='dv'>
<input type="checkbox" name="name" value="11" checked='checked' />1
<input type="checkbox" name="name" value="12" checked='checked' />2
<input type="checkbox" name="name" value="13" checked='checked' />3
<input type="checkbox" name="name" value="14" />4
<input type="checkbox" name="name" value="15" />5
<input type="checkbox" name="name" value="16" />6
<input type="checkbox" name="name" value="17" />7
</div>
</body>
</html>
知识点:jQuery对象如果需要获取属性的值,则在括号内空着,如果需要设置属性的值,则直接在方法内输入值.如上代码段中通过 $(ele).val()
获取ele的value值.
表单的选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//textarea--多用于条款
$(function () {
$('#btn').click(function () {
//写:input 注意冒号,
//能获取到的标签类型为: input textarea select button
//和不写冒号不同,不写冒号将只获取input标签
$(':input').css('backgroundColor', 'red');
//选取所有的单行文本框
$(':text').css('backgroundColor', 'red');
//hidden 选取所有不可见元素 注意,父元素隐藏,子元素自然也隐藏
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id='btn' />
<input type="text" name="name" value="第一个文本框" />
<textarea rows='30' cols='80'>我要做什么就做什么呢</textarea>
</body>
</html>
知识点: :input前面有个冒号,可以选择input,textarea,select,buttom等标签.