jQuery应用杂记

文章目录

  1. 1. 全选
  2. 2. 获取选择内容
  3. 3. 全选和其他选项不能同时选中
  4. 4. 重置表单
  5. 5. select选择显示隐藏相关元素
  6. 6. 输入框字数检测

工作中常用的一些代码片段

全选

1
2
3
4
5
6
7
8
9
$("#ckAll").click(function() {
$("input[name='sub']").prop("checked", this.checked);
});
//全部checkbox选中后 全选框也选中
$("input[name='sub']").click(function() {
var $subs = $("input[name='sub']");
$("#ckAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);
});

获取选择内容

1
2
3
4
5
6
var uids = $('[name=subCk]:checked')
.map(function () {
return $(this).data('id');
})
.get()
.join();

全选和其他选项不能同时选中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
*@ckName checkbox-name
*@i 对应index
*/
function checkToggle(ckName,i){
if(arguments.length==1){
i=0;
}
$("[name='"+ckName+"']:eq("+i+")").change(function () {
if ($(this).prop('checked')) {
$(this).parent().nextAll().children().prop('checked', false);
}
});
$("[name='"+ckName+"']").not(":eq("+i+")").change(function () {
if ($(this).prop('checked')) {
$("[name='"+ckName+"']:eq("+i+")").prop('checked', false);
}
});
}
## 切换条数
var pageData={
limit:<?=$limit;?>
};
$("[value="+pageData.limit+"]:radio").prop('checked','true');
$('[name=limit]:radio').change(function(){
var limit=$(this).val();
if(parseInt(limit)<10){
return;
}
if(location.search.indexOf('limit=')!==-1){
location.search=location.search.replace(/limit=(\d*)?/,'limit='+limit);
}else{
console.log((location.search=='')?'limit='+limit:'&limit='+limit);
location.search=(location.search=='')?'limit='+limit:location.search+'&limit='+limit;
}
});

重置表单

jQuery中没有重置表单的方法,如果需要,可以使用Dom的reset方法

1
$('#myform')[0].reset()

select选择显示隐藏相关元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//选中与否select对应值,进行相应显示切换
var selectMap = {
'#ddtype': {
2: {show: 'input[name=deadline]', hide: ''}
},
'#aliasType': {
1: {show: '.divAlias', hide: ''}
},
'#type': {
2: {show: '#sceneId', hide: '.divExtra'}
},
};
selectShow.register(selectMap);
//函数
var selectShow = {
register: function (selectMap) {
var me = this;
for (var select in selectMap) {
var _select = selectMap[select];
(function (select, _select) {
$(select).change(function () {
for (var option in _select) {
if ($(this).val() == option) {
me.toggle(_select[option]['show'], _select[option]['hide'])
} else {
me.toggle(_select[option]['hide'], _select[option]['show'])
}
}
});
$(select).change();
})(select, _select);//闭包注册
}
},
toggle: function (show, hide) {
if (show != '') {
$(show).removeClass('hide');
}
if (hide != '') {
$(hide).addClass('hide');
}
}
};

输入框字数检测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<textarea id="msg" name="msg" cols="40" rows="4" data-max-len="50" placeholder="内容字数不超过50个字"></textarea>
还可输入<span id="showLeft">50</span>字
//注册
$(document).on('keyup', '#msg', function () {
_maxlen.isMax('#msg', '#showLeft');
}).focus(function () {
_maxlen.disabledRightMouse();
}).blur(function () {
_maxlen.enabledRightMouse();
});
/*
*监控输入字数
* content:textarea[data-max-len] 输入框
* container:span 显示剩余字数
* */
var _maxlen = {
isMax: function (content, container) {
var textarea = (typeof content == 'string') && content.constructor == String ? $(content) : content;
container = (typeof container == 'string') && container.constructor == String ? $(container) : container;
var max_length = parseInt(textarea.data('max-len'));
var _val = $.trim(textarea.val());
var _leftLen = max_length;
if (twttr.txt.getTweetLength(_val) > max_length) {
textarea.val(_val.substring(0, max_length));
_leftLen = 0;
} else {
_leftLen = max_length - twttr.txt.getTweetLength(textarea.val());
}
container.text(_leftLen);
},
disabledRightMouse: function () {
document.oncontextmenu = function () {
return false;
}
},
enabledRightMouse: function () {
document.oncontextmenu = null;
}
};
如有疑问,请留言或邮件newbvirgil@gmail.com
本文链接 : http://blog.newbmiao.com/2015/10/25/jQuery-code-record.html