JQuery 常用操作代码


Posted in Javascript onMarch 14, 2010

//遍历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 常用操作整理基础入门篇

jquery select(列表)的操作(取值/赋值)

Javascript 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
javascript的BOM汇总
Jul 16 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
详解webpack 入门与解析
Apr 09 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 #Javascript
Jquery cookie操作代码
Mar 14 #Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 #Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 #Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 #Javascript
jQuery入门第一课 jQuery选择符
Mar 14 #Javascript
使用JavaScript switch case 另类写法
Mar 14 #Javascript
You might like
PHP编码规范-php coding standard
2007/03/16 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
Python龙贝格法求积分实例
2020/02/29 Python
学习Python需要哪些工具
2020/09/04 Python
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
文科毕业生自荐书范文
2014/04/17 职场文书
导师推荐信范文
2014/05/09 职场文书
留学推荐信范文
2014/05/10 职场文书
大学计划书范文800字
2014/08/14 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
英文导游词
2015/02/13 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
Fluentd搭建日志收集服务
2022/09/23 Servers