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

Jquery 总结的几种常用操作

2013-12-17 22:31 441 查看
<script type="text/javascript" src="<%=basePath%>common/js/jquery-1.5.1.min.js"></script> <script type="text/javascript"> //jquery获得对象的两种方式 function getObj(){ var valByName = $("input[name='namej']").val(); alert(valByName+' byName'); var valById = $("#idj").val(); alert(valById+' byId'); } //禁用、启用 attr function noObj(){ var diabledVal = $("input[name='namej']").attr("disabled"); if(diabledVal){ $("input[name='namej']").attr("disabled",false); }else{ $("input[name='namej']").attr("disabled",true); } } //测试select function testSelect(){ var selectVal = $("select[name='selectName']").val(); if(selectVal == '1'){ $("#man").attr("checked",true); //$("#woman").attr("checked",false); }else if(selectVal == '0'){ //$("#man").attr("checked",false); $("#woman").attr("checked",true); } } //全选 function checkAll(){ var checks = $("input[name='like']"); $.each(checks,function(){ $(this).attr("checked",true); }); } //反选 function checkOpp(){ var checks = $("input[name='like']"); $.each(checks,function(){ if($(this).attr("checked")){ $(this).attr("checked",false); }else{ $(this).attr("checked",true); } }); } </script> </head> <body> <input type="text" name="namej" id="idj" value="hello" /> <input type="button" onclick="getObj()" value="显示对象值"> <input type="button" onclick="noObj()" value="禁用/启用input"> <hr/> <select name="selectName" id="selectId" onchange="testSelect();"> <option value="">请选择选项</option> <option value="1">男</option> <option value="0">女</option> </select> <input type="radio" id="man" name="sex" value='1' />男<input type="radio" id="woman" name="sex" value='0'/>女 <hr/> <input type="checkbox" name="like" value="lq"/> 篮球 <input type="checkbox" name="like" value="zq"/> 足球 <input type="checkbox" name="like" value="ppq" /> 乒乓球 <input type="button" onclick="checkAll();" value="全选"> <input type="button" onclick="checkOpp();" value="反选"> </body>

=========================================================================================

一、获得dom 元素(选择器)
1 $("#id") <input id = 'id' /> $("#id")
2 $(.class) <input class='sheet' /> $(".sheet")
3 $([attribute=value]) <input name="name" /> $("input[name='name']")
$("") ""内的内容是jquery 的选择器 selector
4 $(:checked) <input type="checkbox" value="aa" /> $("input[type='checkbox']:checked")
:checked 筛选器适用于 checkbox 和 radio
5 $(:selected) <select name="like"><option selected value="1" >篮球</option></select> $("select[name='like'] option:selected")
:selected 筛选器 适用于select

二：属性函数
.attr(key,value);
.html(value);
.val(value);
.removeAttr(name);

三：文档处理函数
.append(content); 附加html或者text 信息
.empty(); 清空元素内信息
.remove (); 移除元素
.replaceWith(html);将制定元素用html 替换
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航