Jquery基础
表单的jquery操作，包括多选框与下拉列表，有一个地方比较容易犯错
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单属性选择器title>
<script type="text/javascript" src="jquery-1.3.1.js">script>
head>
<body>
<form >
<button type="reset">重置表单所有元素button>
<br>
<button id="btn1">对表单能进行赋值button>
<br>
<button id="btn2">对表单不能进行赋值button>
<br>
<input type="text" name="name" disabled="disabled" value="不可用input赋值" title=""/><br>
<input type="text" name="email" value="可以用input赋值" title=""/><br>
多选框：<br>
<input type="checkbox" name="newLetter" checked="checked" value="test1" title="">test1
<input type="checkbox" name="newLetter" value="test1" title="">test2
<input type="checkbox" name="newLetter" value="test1" title="">test3
<input type="checkbox" name="newLetter" value="test1" title="">test4
<input type="checkbox" name="newLetter" checked="checked" value="test1" title="">test5
<div>div>
<br><br>
操作下拉列表：
<br>
<select name="test1" multiple="multiple" style="height: 60px" title="">
<option>广州option>
<option selected="selected">深圳option>
<option>茂名option>
<option>珠海option>
select>
<br><br>
下拉列表：<br>
<select name="test2" title="">
<option selected="selected">北京option>
<option>重庆option>
<option>成都option>
select>
<br><br>
<div>div>
form>
body>
<script type="text/javascript">
$(function(){
//可以变化的表单
$("#btn1").click(function(){
$("input:enabled").val("这里变化了");
return false;
});
//不可以变化的表单
$("#btn2").click(function(){
$("input:disabled").val("这里变化不了") ;
return false;
});
//操作复选框
// alert($("input[checked=checked]").length);
$(":checkbox").click(function(){
//input:checked没有空格
$("div:first").html("共有"+($("input:checked").length)+"被选中");
});
//操作下拉列表
$("select").change(function() {
var str = "";
//select: selected注意有空格,因为加了空格表示select下面的子元素
$("option:selected").each(function () {
str += $(this).text() + ",";
});
$("div").eq(1).html("你选择了：" + str);
}).trigger('change');
//使用:selected选择器，来操作下拉列表.
// $("select").change(function () {
// var str = "";
// $("select :selected").each(function () {
// str += $(this).text() + ",";
// });
// $("div").eq(1).html("你选中的是："+str+"");
// }).trigger('change');
//
});
script>
html>