本文目的
使用jQuery有一段时间，积累了一些使用技巧，记录在这里，方便日后查阅。jQuery的确实现了对用户的承若 —— “Write Less, Do More”。
文本框 <input type=’text’/>
html页面代码：<input id="id_demo_text" type="text"/>
获取文本框输入： var sTxt = $(‘#id_demo_text’).val(); // sTxt变量现在的值为文本框的输入
设置文本框：$(‘#id_demo_text’).val(‘some text that will be shown in the text box’);
P.S.: 注意访问控件时，id前面有个‘#’号。
单选框 <input type=’radio’/>
html页面代码：
<input type="radio" id="rb_start" name="rb_status" value="0" >启动</input>
<input type="radio" id="rb_stop" name="rb_status" value="1">停止</input>
获取单选框选项：
var sSelectedVal = $(‘input:[name=rb_status]:radio:checked’).val();
// sSelectedVal得到被选择的单选框的value
设置单选框：
var nSelected = 0; // 0：“启动”被选上，1：“停止”被选上
$("input[name='rb_status'][value='" + nSelected + "']").attr("checked",true);
多选框 <input type=’checkbox’/>
html页面代码：<input id="cb_alarm" type="checkbox" value="1">香蕉</input>
判断是否被选中：
var bSelected = $(“#cb_alarm”).is(“:chekced”); // bSelected为 true表示被勾选，否则为false
设置多选框：
var bSelected = true; // true设置选择，false取消选择
$(“#cb_alarm”).attr(‘checked’, bSelected);
【全选/反选】控制，html代码如下：
<input type=”checkbox” id=”select_all”>全选/反选</input>
<input type=”checkbox” name=”opt” value=”1”>选项1</item>
<input type=”checkbox” name=”opt” value=”2”>选项2</item>
<input type=”checkbox” name=”opt” value=”3”>选项3</item>
<input type=”checkbox” name=”opt” value=”4”>选项4</item>
现在想要点击【全选/反选】多选框，完成对选项1-4的批量抄作，代码如下：
$(“#select_all”).click(function(){
$(“input[name=’opt’]”).attr(“checked”, $(this).is(“:checked”));
});
上面的代码绑定了select_all的click时间，在点击select_all后，根据当前select_all状态批量修改选项1-4的状态。
如果想获取选项1-4中选取的value呢？代码如下：
var selected = [];
$(“input[name=’opt’]”).each(function(){
if ($(this).is(“:checked”)) {
selected.push($(this).val());
}
});
这样，后面selected数组中的值就是选择的check的value值列表。
下拉菜单<select>
html页面代码：
<select id=”select_id”>
<option value=”banana”>香蕉</option>
<option value=”appale”>苹果</option>
<option value=”pear”>鸭梨</option>
</select>
获取当前选中的值：
var sCurVal = $(“#select_id”).val(); // 与文本框相同
获取当前选中的option dom对象（有时需要访问到选择的option的文本）：
var opt = $(“#select_id”).children(“option:selected”);
设置当前选中值
var sVal = “apple”; // 显示value对应的option
$(“#select_id”).val(sVal);
多属性选择器
除了id可以用来精确定位dom元素，多属性选择器也可以哦！看看下面的列子：
<ol>
<li id=”only_0” name=”li_name” order=”0”></li>
<li id=”only_1” name=”li_name” order=”1”></li>
<li id=”only_2” name=”li_name” order=”2”></li>
<li id=”only_3” name=”li_name” order=”3”></li>
</ol>
所以，可以用两种方式选取第二个li元素
id选择器：var opt = $(“#only_1”);
多属性选择器：var opt = $(“li[name=’li_name’][order=’1’]”);
多属性选择器虽然麻烦一点，但是却提高了灵活性，可以比较容易的通过js控制，而id一般不易灵活控制。order是自定义属性，也可以作为选取条件，是不是很好用！
动态绑定事件时传递参数
直接上例子
$(“#some_id”).click({param1:’hello’, param2: 2},function(event){
alert(event.data.param1 + “ ” + event.data.param2);
});
值就是这样传递的，你猜他会输出什么？
总结
因为jquery使用了css选择器，使得代码变得简介，所以如果要使用好jquery，必须了解常用css选择器。CSS选择器帮助我们拿到具体的html dom对象，然后再通过jquery提供的api操作这些对象。
参考资料
- jquery官方文档：http://docs.jquery.com/Main_Page
- css 选择器：http://www.w3.org/TR/CSS2/selector.html
- jQuery绑定事件时传递参数：http://stackoverflow.com/questions/3273350/jquery-click-pass-parameters-to-user-function
