当前位置：首页 > news >正文

jquery常用技巧拾贝

news 来源：原创 2024/5/5 15:40:01

本文目的

使用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页面代码：

获取单选框选项：

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>

获取当前选中的值：

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>

</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

转载于:https://www.cnblogs.com/bourneli/archive/2012/05/27/2520377.html