`

Jquery 操作方法记录

 
阅读更多

需要注意的是,这里的代码好多是针对jquery 1.32以前的版本(以后的版本已经不支持@),所以替换为空测试下即可。

jQuery获取Select选择的Text和Value: 
语法解释: 
1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 
3. var checkValue=$("#select_id").val(); //获取Select选择的Value 
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 

5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 

jQuery设置Select选择的Text和Value: 
语法解释: 
1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 
2. $("#select_id ").val(4); //设置Select的Value值为4的项选中 
3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 


jQuery添加/删除Select的Option项: 
语法解释: 
1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 
5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 


//遍历option和添加、移除option 
function changeShipMethod(shipping){ 
var len = $("select[@name=ISHIPTYPE] option").length 
if(shipping.value != "CA"){ 
$("select[@name=ISHIPTYPE] option").each(function(){ 
if($(this).val() == 111){ 
$(this).remove(); 

}); 
}else{ 
$("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]")); 




//取得下拉选单的选取值 

$(#testSelect option:selected').text(); 
或$("#testSelect").find('option:selected').text(); 
或$("#testSelect").val(); 
////////////////////////////////////////////////////////////////// 
记性不好的可以收藏下: 
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){} //判断是否已经打勾 


当然jquery的选择器是强大的. 还有很多方法. 

<script src="jquery-1.2.1.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
$("#selectTest").change(function() 

//alert("Hello"); 
//alert($("#selectTest").attr("name")); 
//$("a").attr("href","xx.html"); 
//window.location.href="xx.html"; 
//alert($("#selectTest").val()); 
alert($("#selectTest option[@selected]").text()); 
$("#selectTest").attr("value", "2"); 

}); 
}); 
</script> 


<a href="#">aaass</a> 

<!--下拉框--> 
<select id="selectTest" name="selectTest"> 
<option value="1">11</option> 
<option value="2">22</option> 
<option value="3">33</option> 
<option value="4">44</option> 
<option value="5">55</option> 
<option value="6">66</option> 
</select> 
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项的值 
var item = $('input[@name=items][@checked]').val(); 
获取select被选中项的文本 
var item = $("select[@name=items] option[@selected]").text(); 
select下拉框的第二个元素为当前选中值 
$('#select_id')[0].selectedIndex = 1; 
radio单选组的第二个元素为当前选中值 
$('input[@name=items]').get(1).checked = true; 
获取值: 
文本框,文本区域:$("#txt").attr("value"); 
多选框checkbox:$("#checkbox_id").attr("value"); 
单选组radio: $("input[@type=radio][@checked]").val(); 
下拉框select: $('#sel').val(); 
控制表单元素: 
文本框,文本区域:$("#txt").attr("value",'');//清空内容 
$("#txt").attr("value",'11');//填充内容 
多选框checkbox: $("#chk1").attr("checked",'');//不打勾 
$("#chk2").attr("checked",true);//打勾 
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 
单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 
下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 
$("<optionvalue='1'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//添加下拉框的option 
$("#sel").empty();//清空下拉框 

获取一组radio被选中项的值 
var item = $('input[@name=items][@checked]').val(); 
获取select被选中项的文本 
var item = $("select[@name=items] option[@selected]").text(); 
select下拉框的第二个元素为当前选中值 
$('#select_id')[0].selectedIndex = 1; 
radio单选组的第二个元素为当前选中值 
$('input[@name=items]').get(1).checked = true; 
获取值: 
文本框,文本区域:$("#txt").attr("value"); 
多选框checkbox:$("#checkbox_id").attr("value"); 
单选组radio: $("input[@type=radio][@checked]").val(); 
下拉框select: $('#sel').val(); 
控制表单元素: 
文本框,文本区域:$("#txt").attr("value",'');//清空内容 
$("#txt").attr("value",'11');//填充内容 
多选框checkbox: $("#chk1").attr("checked",'');//不打勾 
$("#chk2").attr("checked",true);//打勾 
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 
单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 
下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option 
$("#sel").empty();//清空下拉框

分享到:
评论

相关推荐

    jQuery计算器带操作记录.zip

    《jQuery计算器带操作记录》 在网页开发中,交互性和用户体验是至关重要的因素。这个名为“jQuery计算器带操作记录”的项目,就是一种优秀的实践,它利用了jQuery库的强大功能,为用户提供了直观、友好的计算体验,...

    jQuery mobile带历史记录的仿谷歌搜索

    在这个主题“jQuery mobile带历史记录的仿谷歌搜索”中,我们将深入探讨如何使用jQuery Mobile创建一个具有类似谷歌搜索功能的页面,同时利用其内置的历史管理功能,实现用户浏览历史的记录和回溯。 首先,jQuery ...

    jQuery的购买记录列表文字滚动更新代码.zip

    本项目涉及的是使用jQuery实现购买记录列表的文字滚动更新功能,这是一个常见的动态展示数据的方法,尤其适用于电商网站或者金融应用,用于实时显示用户的购买历史。 在网页设计中,动态滚动效果可以增加用户体验,...

    jQuery文字记录搜索历史代码.zip

    jQuery库通常通过`&lt;script&gt;`标签引入,可以使用`$.fn.extend`或`$.extend`扩展jQuery,增加自定义方法。在这个案例中,可能会有一个方法用于监听搜索框的`input`或`change`事件,当用户输入时,将搜索词保存到...

    jQuery学习记录----处理XML数据(二)

    在本篇博客“jQuery学习记录----处理XML数据(二)”中,我们将深入探讨如何使用jQuery库来解析和操作XML文档。XML(eXtensible Markup Language)是一种用于存储和传输结构化数据的标准格式,广泛应用于Web应用程序...

    jQuery考勤时间段记录代码.zip

    在这个考勤时间段记录代码中,jQuery被用来处理DOM元素的操作,如获取、添加、删除和修改页面元素,以及响应用户交互。 2. **时间管理**: 该代码的核心在于对时间段的管理,它能够记录每个工作日的签到和签退时间...

    jQuery实现的带操作记录计算器效果源码.zip

    该压缩包文件“jQuery实现的带操作记录计算器效果源码.zip”包含了一个使用jQuery库创建的计算器应用,具有操作记录功能。这个计算器不仅能够执行基本的数学运算,还能记录用户的计算过程,方便用户回顾和检查之前的...

    jQuery页面操作手册

    个人总结的jQuery页面操作记录,包括jQuery的基本使用方法和对页面表单控件的各种操作。

    综合案例--记录_jQuery记事本_

    本案例"综合案例--记录_jQuery记事本_"就是一个使用jQuery构建的简单记事本应用,它实现了记录、分类以及事件处理等功能,帮助用户方便地管理待办事项。 首先,让我们深入了解jQuery库。jQuery是由John Resig于2006...

    jquery网站功能引导用户提示操作

    "jquery网站功能引导用户提示操作"就是一种实现这一目标的技术手段。jQuery,一个广泛使用的JavaScript库,提供了丰富的功能和简单易用的API,使得创建这种用户引导提示变得轻而易举。 首先,我们需要理解jQuery的...

    jQuery购买记录列表文字滚动更新代码

    2. **DOM操作**:jQuery提供了方便的DOM操作方法,如`append()`和`prepend()`,分别用于在元素末尾和开头添加新的内容。在购买记录滚动列表中,可能使用这些方法将新的购买记录添加到列表顶部或底部。 3. **动画...

    jQuery购买记录列表文字滚动更新代码.zip

    本篇将深入解析“jQuery购买记录列表文字滚动更新代码”的核心概念与实现方法,帮助开发者理解和应用这一技术。 一、jQuery基础 jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...

    jQuery购买记录滚动更新代码.zip

    本资源"jQuery购买记录滚动更新代码.zip"提供了一个实现购买记录列表滚动更新的示例,这在电子商务网站或管理后台中非常常见。这种功能能够实时展示最新的购买记录,无需用户手动刷新页面,提升用户体验。 首先,...

    jQuery实现动态给table赋值的方法示例

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。本篇文章将深入探讨如何使用jQuery来动态地给HTML表格(table)赋值,通过一个具体的实例来展示相关技巧。...

    jquery-1.12.4-jquery.min.js.zip

    压缩包中的README.md文件可能包含了关于jQuery 1.12.4.min.js的使用说明、版权信息或者版本更新记录。而.git目录则表明这个压缩包来源于一个Git仓库,可能包含项目的版本控制历史。 总的来说,jQuery 1.12.4.min.js...

    jQuery购买记录滚动显示代码.zip

    在网页设计和开发中,jQuery是一个非常流行的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在这个"jQuery购买记录滚动显示代码"项目中,开发者使用jQuery来实现动态滚动显示购买...

    ajax 插入记录,修改记录,删除记录 asp.net版本 jQuery

    1. **添加记录**:在前端,jQuery可以监听表单提交事件,阻止默认的提交行为,然后使用`$.ajax()`方法发送一个POST请求到服务器。请求中包含表单数据,服务器端的ASP.NET代码接收到这些数据后,可以将它们插入数据库...

    jQuery jQuery-UI

    2. **DOM操作**:它封装了大量的DOM操作方法,如`$(selector).html()`, `$(selector).append()`, `$(selector).remove()`等,简化了元素的增删改查。 3. **事件处理**:jQuery统一了事件绑定的方式,如`$(selector)....

    jQuery本地缓存添加记录列表特效.zip

    在这个特效中,jQuery可能被用来选择列表元素,如`$('ul li')`,并监听用户的添加记录操作,如`$('button.add').on('click', function() {...})`。当点击添加按钮时,jQuery会触发一个函数来处理新的记录,并更新...

Global site tag (gtag.js) - Google Analytics