概述
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();
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常用技巧的全部内容，希望文章能够帮你解决Jquery和javascript常用技巧所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复