[置顶] juery笔记常用代码

//添加样式---本节点的兄弟节点
$(this).next(".bankverify").find(".verifyone").eq(0).addClass("verifyone_on");
相对应------removeClass();

//隐藏
$(".btn-next-step").css('display','none');
$(this).next(".bankverify").hide();
//显示
$(".btn-next-step").css('display','block');
$(this).next(".bankverify").show();

//祖父
$(this).parents(".bankverify").find("#divexplain").addClass("explain").text(pauseTip);
//父节点
$(this).parent();

//根据type属性选择器，选取第一个、第二个隐藏域输入框的值。
<input type="hidden" name="paytip" id="paytip" value="$!{bg1.paytip}"/>
<input type="hidden" name="authtip" id="authtip" value="$!{bg1.authtip}"/>
$(".verifybox .verifyone").click(function(){
//点击事件
var paytip = $(this).find("input[type='hidden']").eq(0).val();
var authtip = $(this).find("input[type='hidden']").eq(1).val();
)}
//谷歌控制台输入：
$(".verifybox").click(function(){
var value = $(this).find("input[type='hidden']").eq(0).val();
console.log("value=", value);
})

JQuery取标签的属性值

$('div").attr("name"); 取div标签的name属性值

<tr>  
<td colspan="8" class="table_wh_page">  
<button ng-click="PreviouPage();">上一页</button>  
<button id="currentPage">第1页</button>  
<button id="countPage">共*页</button>  
<button ng-click="nextPage()">下一页</button>  
</td>  
</tr>  
//得到字符串中的数字  
var currentPage =$("#currentPage").text();//第1页
var countPage   =$("#countPage").text();
var currentPagenum=currentPage.replace(/[^0-9]/ig,"");//1
var countPagenum=countPage.replace(/[^0-9]/ig,""); 

js分页控制

//控制分页 
if(parseInt(currentPage)==parseInt(countPage)){
console.log("已经是最后一页");
if(parseInt(currentPage)==1){
//第一页 共一页
$("#nextPage").attr("disabled", true);
$("#nextPage").css('color','#999999');
$("#PreviouPage").css('color','#999999');
$("#PreviouPage").attr("disabled", true);
}else{
//当前页=总页数
$("#nextPage").attr("disabled", true);
$("#nextPage").css('color','#999999');
$("#PreviouPage").css('color','#dd6a31');
$("#PreviouPage").attr("disabled", false);
}
}else if(parseInt(currentPage)==1){
//当前页为第一页
$("#PreviouPage").attr("disabled", true);
$("#PreviouPage").css('color','#999999');
$("#nextPage").css('color','#dd6a31');
$("#nextPage").attr("disabled", false);
}else {
//当前页>1且 当前页<总页数
$("#PreviouPage").attr("disabled", false);
$("#PreviouPage").css('color','##dd6a31');
$("#nextPage").css('color','#dd6a31');
$("#nextPage").attr("disabled", false);
}

==============添加删除元素==============

<div>
<ul>
<li>myli1</li>
<li>myli2</li>
</ul>
</div id="mydiv">
添加元素
$("#mydiv").find("ul").append("<li>addLi</li>");

删除元素
$("#mydiv").find("ul").find("li").eq(0).remove();

==============添加删除样式=============

js改变css样式
$(selrow).parent().children().removeClass("checktrcolor");
$(selrow).addClass("checktrcolor");

document.getElementById("test-table-header-track").style.paddingRight="10px"
document.getElementById("pageBody").style.backgroundColor = "#ccc";

$(mydivlocation).css('display','none');

http://www.w3school.com.cn/cssref/pr_padding-right.asp
//HTML DOM Style 对象
http://www.w3school.com.cn/jsref/dom_obj_style.asp

js  获取值

document.getElementById("box").innerHTML=divcontext;//div赋值内容

document.getElementById("logic_id").innerHTML;
// td里有html元素的时候
document.getElementById("logic_id").innerText;
//td里只有字符的时候 
document.getElementById("logic_id").value();
//这个td没有value这个参数你是获取不到的，除非你在<td value="xxx">这样你就能获取了，但是这种写法一般只用于input 输入框。

jquery  获取值下拉框key value值

1:var options=$("#test option:selected");  //获取选中的项
2:alert(options.val());   //拿到选中项的值
3:alert(options.text());   //拿到选中项的文本

 列表展示中选择框 

/**全选择框**/
<input type="checkbox"  name="allchbox" id='allcheckbox' onclick="selectall('div');"/> 
function selectall(id){
var divid=$("#"+id);
var checkallobj=$(divid).find("input[name='allchbox']");
if($(checkallobj).is(":checked")){
$('#normlist').find('tr td input[name=userrecord]').each(function(i, obj){
$(obj).prop("checked",true);
});
}else{
$('#normlist').find('tr td input[name=userrecord]').each(function(i, obj){
$(obj).prop("checked",false);
});
}
}
/**除标题行的选择框**/
sb.append(" <input type='checkbox' name='userrecord' value='"+user.getId()+"#"+user.getName()+"' onclick=\"unselectCheckAll('div');\"/>");

/***数据记录选择框**/
function unselectCheckAll(divid){
var allLen=$('#'+divid).find('tr td input[name=userrecord]').length;
var len=$('#'+divid).find('tr td input[name=userrecord]:checked').length;
if(len==allLen){//数据记录全部选中时allchbox被选中
$('#'+divid).find('tr th input[name=allchbox]').attr('checked','checked');
}else{
$('#'+divid).find('tr th input[name=allchbox]').removeAttr('checked');
}
}
/**发送请求前统计所有的被选择的checkbox**/
var checkboxArray = "";//被选中的checkbox记录value
$("input:checkbox[name=userrecord]:checked").each(function(i){
if(0==i){
checkboxArray = $(this).val();
}else{
checkboxArray += (","+$(this).val());
}
});

自然数校验正则表达式

//正整数
function naturalNumber(str) {
var pattern = /^[1-9]*[1-9][0-9]*$/;
return pattern.test(str);
}

textarea字符长度限制

<script type="text/JavaScript">  
function isMaxLen(o){
var nMaxLen=o.getAttribute? parseInt(o.getAttribute("maxlength")):"";  
if(o.getAttribute && o.value.length>nMaxLen){  
o.value=o.value.substring(0,nMaxLen)
}
}
</script>
<textarea maxlength="10" onkeyup="return isMaxLen(this)"></textarea>

maxlength 属性是 <textarea> 标签在 HTML5 中的新属性。
<textarea maxlength="50"> Enter text here...</textarea> 

jQuery的选择器中的通配符[id^='code']  转载 http://blog.sina.com.cn/s/blog_6e001be701017kaz.html

(1)通配符：
$("input[id^='code']");//id属性以code开始的所有input标签
$("input[id$='code']");//id属性以code结束的所有input标签
$("input[id*='code']");//id属性包含code的所有input标签 

http://w51spring.blog.51cto.com/