Jquery和javascript常用技巧
??????? var objSel = document.getElementById("selOp");?
?????????
??????? //這是獲取值?
??????? alert("當前值: " + objSel.value);?
?????????
??????? //這是獲取文本?
??????? alert("當前文本: " + objSel.options(objSel.selectedIndex).text);?
?
?
增加復選框套路
var e = document.createElement("input");
??e.type = "checkbox";
??e.value = result.content[i].id;
??fbox.appendChild(e);
??fbox.appendChild(document.createTextNode(result.content[i].name+"??? "));
刪除子節點
var fbox = document.getElementById("chbox");
fbox.innerHTML ='';??
<div id="chbox"></div>
?
動態添加下拉框節點
var eles = document.forms['theForm'].elements;
?? eles['goodsList'].length = 1;
?? for (i = 0; i < result.content.length; i++)
?? {
???? var opt = document.createElement('OPTION');
???? opt.value = result.content[i].id;
???? opt.text? = result.content[i].name;
???? eles['goodsList'].options.add(opt);
?? }
?
?
中文檢測的正則
function?? checkStr(str)?? //中文值檢測
{?
var reg =/^[\u4e00-\u9fff]*$/;
????? if(!reg.test(str)){
?????? return true;
????? }
????? return false;
}
注意網上的 [\u4e00-\u9fa5]區間不對
?
?var reg= /^[1][3458]\d{9}$/; //驗證手機號碼?
????? if(!reg.test(str)){
?????? return false;
????? }
????? return true;
?
//jquery bug IE7,8不能取到單選按鈕的選中狀態，IE9 可以
//if($("#rd_getsupplierinfo:checked").get(0).checked == true)
這個辦法可以
if($("#rd_getsupplierinfo").attr("checked")=="checked")
?
//jquery bug IE7,8不支持
$("span[class*='allprice']").each(function() {
只能用
?$("span").each(function(){?? if($(this).attr("class")=="allprice"){
遍歷
$("button").click(function(){? $("li").each(function(){??? alert($(this).text())? });});
?
文本框立輸入值立即觸發事件
<input type="number" min="0" step="1" name="goods_num" id="goods_number" size="10" value=""? οninput="alert('7')" onpropertychange="alert(1)" required="required"/>
?
動態id
var id = 'one';
var el = $('#' + id);
?
遍歷
$("span[class*='price']").each(function()
?{??
?$('#count').text(parseInt($('#count').text())+parseInt($(this).text()));????????????
?});
?
$("select").each(
? function()
? {
??? if($(this).attr('class')=="brand")
????????? {
???????????? if($(this).val()=="0"||$(this).val()==null)
???????????????? {
???????????????????? validator.addErrorMsg("不能為空");
???????????????? }
??????????????
????????? }
?
? });
遍歷下拉框
?
?
jquery驗證
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
?
下面分類別的簡單介紹一下jQuery選擇器：
1、基本選擇器:通過標簽元素id、class、標簽名等來查找DOM元素
$("#id名")，如$("#test")是選取了id為test的標簽節點
$("標簽名")，如$("p")是選取了所有的P標簽節點
$(".class名")，如$(".test")是選取了所有class為test的標簽節點
$("*"),如$("*")是選取所有的標簽元素
$("標簽名1,標簽名2,...")，如$("div,span,p.myClass")是選取所有<div>,<span>和擁有class為myClass的<p>的一線標簽元素。
2、層次選擇器:通過DOM元素的層次關系來獲取特定元素，包括后代元素、子元素、相依元素、兄弟元素等。
$("標簽名 標簽名")，如$("div span")選取<div>里所有的<span>元素
$("parent child")，如$("div>span")選取<div>元素下元素名是<span>的子元素
$('prev+next')等價$('prev').next('next')，如$('.one+div')等價$('.one').next('div')是選取class為one的下一個<div>標簽元素
$('prev~siblings')等價$('prev').nextAll('div')，如('#two~div')等價$('#two').nextAll('div')是選取id為two的元素后面的所有<div>兄弟元素
3、過濾選擇器：主要是通過一些過濾規則來篩選DOM元素，過濾規則與CSS中的偽類選擇器語法相同，即選擇器都以一個冒號(:)開頭
$("標簽元素:first")，如$("div:first")是選取所有<div>元素中第一個<div>元素
?
js父節點
this.parentNode.id
this.parentNode.parentNode.id
?
增加節點
$("p").before( $("b");在每個匹配的元素之前插入內容。
表示p的前面是b，也就是b要插到p的前面。
$("p").insertBefore("b");表示將p插入到b的前面
$("p").insertAfter("#foo");把所有匹配的元素插入到另一個、指定的元素元素集合的后面。
$("p").append("<b>Hello</b>");向每個匹配的元素內部追加內容,這個操作與對指定的元素執行
appendChild方法，將它們添加到文檔中的情況類似。
$("p").remove();
從DOM中刪除所有匹配的元素。
?
?
span
$("#fok").text("aaaaaaaa");
$("#fok").html("aaaaaaaa");
$(document).ready(function(){????
??? $("#resetbtn").click(function(){?
??????? $("#user_id").val("");//清空?
??????? $("#realname").val("www");//賦值?
?? });?
});
?
設置select的value值為4的項選中： $("#slc1 ").val(4);?
?
頁面有多個下拉框，需要遍歷判斷
非主動觸發，例如統一驗證
$("select").each(
? function()
? {alert($(this).attr('name'));
?? alert($(this).val())
alert($(this).text());當前所有text
alert($(this).find("option:selected").text());當前選中text
? });
?
?
主動觸發
<select name="s_id[{$goods.goods_id}]" οnchange="changBrandEach(this)">
function changBrandEach(sld)
??????????????? {
??????????????????? alert($(sld).val());
js獲取id和name
sld.id?? sld.name
單個
var s_id = $("#s_id ").val();
說明如果是動態的就去掉#和""
?
jquery獲得下拉框的值
獲取Select ：
?獲取select 選中的 text :
?? $("#ddlRegType").find("option:selected").text();
?
?獲取select選中的 value:
?? $("#ddlRegType ").val();
?
?獲取select選中的索引:
???? $("#ddlRegType ").get(0).selectedIndex;
?
設置select:
?設置select 選中的索引：
???? $("#ddlRegType ").get(0).selectedIndex=index;//index為索引值
?
?設置select 選中的value：
??? $("#ddlRegType ").attr("value","Normal“);
??? $("#ddlRegType ").val("Normal");
??? $("#ddlRegType ").get(0).value = value;
?
?設置select 選中的text:
var count=$("#ddlRegType option").length;
? for(var i=0;i<count;i++)?
???? {?????????? if($("#ddlRegType ").get(0).options[i].text == text)?
??????? {?
??????????? $("#ddlRegType ").get(0).options[i].selected = true;?
?????????
??????????? break;?
??????? }?
??? }
?
$("#select_id option[text='jQuery']").attr("selected", true);
?
設置select option項:
?
?$("#select_id").append("<option value='Value'>Text</option>");? //添加一項option
?$("#select_id").prepend("<option value='0'>請選擇</option>"); //在前面插入一項option
?$("#select_id option:last").remove(); //刪除索引值最大的Option
?$("#select_id option[index='0']").remove();//刪除索引值為0的Option
?$("#select_id option[value='3']").remove(); //刪除值為3的Option
?$("#select_id option[text='4']").remove(); //刪除TEXT值為4的Option
?
?
動態增加下拉選項
var eles = document.forms['theForm'].elements;
??????????????????? eles[brand_id].length = 0;//這句很重要，否則會以疊加的形式出現
??????????????????? for (i = 0; i < result.content.length; i++)
??????????????????? {
??????????????????? var opt = document.createElement('OPTION');
??????????????????? opt.value = result.content[i].brand_id;
??????????????????? opt.text? = result.content[i].brand_name;
??????????????????? eles[brand_id].options.add(opt);
??????????????????? }?
清空 Select:
$("#ddlRegType ").empty();
?
1,下拉框:var cc1? = $(".formc select[@name='country']? option[@selected]").text(); //得到下拉菜單的選中項的文本(注意中間有空格)
var cc2 = $('.formc? select[@name="country"]').val();? //得到下拉菜單的選中項的值
var cc3 = $('.formc? select[@name="country"]').attr("id");? //得到下拉菜單的選中項的ID屬性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option? value='1'>1111</option>").appendTo("#select")//添加下拉框的option
稍微解釋一下:
1.select[@name='country']? option[@selected] 表示具有name 屬性，
并且該屬性值為'country' 的select元素 里面的具有selected? 屬性的option? 元素；
可以看出有@開頭的就表示后面跟的是屬性。
2,單選框:
$("input[@type=radio][@checked]").val();? //得到單選框的選中項的值(注意中間沒有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked');? //設置單選框value=2的為選中狀態.(注意中間沒有空格)
3,復選框:
$("input[@type=checkbox][@checked]").val();? //得到復選框的選中的第一項的值
$("input[@type=checkbox][@checked]").each(function(){? //由于復選框一般選中的是多個,所以可以循環輸出
? alert($(this).val());
? });
$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){}? //判斷是否已經打勾
javascript 獲得下拉框選中值
var index = document.getElementById("DropDownList1").selectedIndex;
var v=document.getElementById("DropDownList1").options[index].value;
===============
下拉框值選中
/獲取第一個option的值?
$('#test option:first').val();?
//最后一個option的值?
$('#test option:last').val();?
//獲取第二個option的值?
$('#test option:eq(1)').val();?
//獲取選中的值?
$('#test').val();?
$('#test option:selected').val();?
//設置值為2的option為選中狀態?
$('#test').attr('value','2');?
//設置第一個option為選中?
$('#test option:last').attr('selected','selected');?
$("#test").attr('value' , $('#test option:last').val());?
$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());?
//獲取select的長度?
$('#test option').length;?
//添加一個option?
$("#test").append("<option value='9'>ff</option>");?
$("<option value='9'>ff</option>").appendTo("#test");?
//添除選中項?
$('#test option:selected').remove();?
//指定項選中?
$('#test option:first').remove();?
//指定值被刪除?
$('#test option').each(function(){?
if( $(this).val() == '5'){?
$(this).remove();?
}?
});?
$('#test option[value=5]').remove();?
//獲取第一個Group的標簽?
$('#test optgroup:eq(0)').attr('label');?
//獲取第二group下面第一個option的值?
$('#test optgroup:eq(1) :option:eq(0)').val();?
獲取select中選擇的text與value相關的值?
獲取select選擇的Text : var checkText=$("#slc1").find("option:selected").text();?
獲取select選擇的value:var checkValue=$("#slc1").val();?
獲取select選擇的索引值: var checkIndex=$("#slc1 ").get(0).selectedIndex;?
獲取select最大的索引值: var maxIndex=$("#slc1 option:last").attr("index");?
設置select選擇的Text和Value?
設置select索引值為1的項選中：$("#slc1 ").get(0).selectedIndex=1;?
設置select的value值為4的項選中： $("#slc1 ").val(4);?
設置select的Text值為JQuery的選中：?
$("#slc1 option[text='jQuery']").attr("selected", true);?
PS：特別要注意一下第三項的使用哦。看看JQuery的選擇器功能是如此地強大呀！?
添加刪除option項?
為select追加一個Option(下拉項)?
$("#slc2").append("<option value='"+i+"'>"+i+"</option>");?
為select插入一個option(第一個位置)?
$("#slc2").prepend("<option value='0'>請選擇</option>");?
PS: prepend 這是向所有匹配元素內部的開始處插入內容的最佳方式。?
刪除select中索引值最大option(最后一個)?
$("#slc2 option:last").remove();?
刪除select中索引值為0的option(第一個)?
$("#slc2 option[index='0']").remove();?
刪除select中value='3'的option?
$("#slc2 option[value='3']").remove();?
刪除select中text='4'的option?
$("#slc2 option[text='3']").remove();
=====================
驗證
validator = new Validator("theForm");???
validator.required("goods_number","商品數量不能為空");???
validator.isNumber("goods_number","商品數量必須為數字");???
if($("#rd_tuan_price").attr("checked")==undefined)??? {???????
validator.required("tuan_price_my","自定義團購價格不能為空");???????
validator.isNumber("tuan_price_my","自定義團購價格必須為數字");??? }???????
?if(validator.passed()==false)???
?{???????????
?return false;???
?}
總結
以上是生活随笔為你收集整理的Jquery和javascript常用技巧的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 祛雀斑大约要多少钱？
- 下一篇： windows版本下使用xdebug