(转)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="" oninput="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}]" onchange="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; }