您的位置：首页 > Web前端 > JQuery

jQuery(2-8)表单对象过滤属性选择器

2011-12-18 21:06 141 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>表单对象属性过滤选择器.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">



<script type="text/javascript" src="../jquery-1.7.1.js"></script>

</head>

<body>

<form action="#" id = "form1">

可用元素 :<input name = "add" value="可用文本框" /><br/>

不可用元素 :<input name = "email" disabled="disabled" value="不可用文本框" /><br/>

可用元素 : <input name = "che" value="可用文本框"/><br>

不可用元素 :<input name = "name" disabled="disabled" value="不可用文本框"/><br/> <br/>

多选框:<br/>

<input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1

<input type="checkbox" name = "newsletter" value="test2"/>test2

<input type = "checkbox" name = "newsletter" value = "test3" />test3

<input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4

<input type = "checkbox" name = "newsletter" value="test5"/>test5

<div></div>

<br/><hr/>

下拉列表1:<br/>

<select name = "test" multiple="multiple" style="height: 100px">

<option>浙江</option>

<option selected="selected">湖南</option>

<option>北京</option>

<option selected="selected">天津</option>

<option>广州</option>

<option>湖北</option>

</select>

<br/><br/>

下拉列表2:<br/>

<select name = "test2">

<option>浙江</option>

<option >湖南</option>

<option selected="selected">北京</option>

<option >天津</option>

<option>广州</option>

<option>湖北</option>

</select>

<div></div>

</form>

</body>

<script type="text/javascript">

/*$(function(){

$('#form1 :enabled').css("background","blue"); // :enabled选取所有可用的元素前面有空格如果没有空格是指整个表单可用的资源被选取

// 有空格指是在表单的元素里可用的资源被选取

});*/

/*$(function(){

$('#form1 :disabled').css("background","purple");// :disabled选取所有不可用的元素 :前面有空格无空格则无效

});

*/

/*$(function(){

$('#form1 :checked').css("background","purple"); // :checked 选取表单（多选框）被选中的元素 :前面有空格无空格则无效

});

*/

/*$(function(){

$('#form1 :selected').css("background","purple");// :selected 选取被选中的下拉列框中的元素 : 前面有空格无空格则无效

});

*/

//练习2

/*$(function(){

$('#form1 input:enabled').val("这里发生变化了 "); // :enabled选取所有可用的元素前面有空格给值val

});*/

/*$(function(){

$('#form1 input:disabled').val("这里发生变化了"); // :disabled选取所有不可用的元素

});

*/

/*$(function(){

var $a = $('#form1 input:checked').length;// :selected 选取被选中的下拉列框中的元素个数

alert('已经选取了' + $a);

});*/

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航