表单对象选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值" id="b1"/>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值" id="b2"/>
<input type="button" value="利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
<input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
<br>
<input type="text" value="篮球1"/>
<input type="text" value="篮球2"/>
<input type="text" value="篮球3" disabled="true"/>
<input type="text" value="篮球4" disabled="true"/>
<br>
<input type="checkbox" value="爱好1"/>爱好1
<input type="checkbox" value="爱好2"/>爱好2
<input type="checkbox" value="爱好3"/>爱好3
<input type="checkbox" value="爱好4"/>爱好4
<br>
<select name="job" size=9 multiple="multiple">
<option value="选项1">选项1^^</option>
<option value="选项2">选项2^^</option>
<option value="选项3">选项3^^</option>
<option value="选项4">选项4^^</option>
<option value="选项5">选项5^^</option>
<option value="选项6">选项6^^</option>
</select>
<select id="hsp" name="edu">
<option value="博士">博士^^</option>
<option value="硕士">硕士^^</option>
<option value="本科">本科^^</option>
<option value="小学">小学^^</option>
</select>
</body>
<script language="JavaScript">
//*利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值
$("#b1").click(function(){
$("input[type=text]").val("篮球")
})
//**利用 jQuery 对象的 length 属性获取多选框选中的个数
$("#b3").click(function(){
window.alert($("input[type=checkbox]:checked").length)
})
//****利用 jQuery 对象的 text() 方法获取下拉框选中的内容
$("#b4").click(function(){
window.alert($("select option:selected").text())
})
</script>
</html>
相关文章
- 1. jQUery选择器之表单对象属性筛选选择器
- 2. jQuery选择器—表单选择器
- 3. jQuery选择器——表单选择器
- 4. jQuery(2-8)表单对象过滤属性选择器
- 5. 尚硅谷：jQuery的表单对象属性过滤选择器
- 6. jQuery 对象、基本选择器、筛选选择器
- 7. 8.:input表单选择器
- 8. jQuery 表单选择器
- 9. 表单和CSS选择器
- 10. 表格，表单和高级选择器
- 更多相关文章...
- • jQuery Mobile 表单选择菜单 - jQuery Mobile 教程
- • ionic 单选框 - ionic 教程
- • Docker容器实战(七) - 容器眼光下的文件系统
- • Docker容器实战(六) - 容器的隔离与限制
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章