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 相关文章推荐
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
js中eval详解
Mar 30 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
js闭包实例汇总
Nov 09 Javascript
angularjs基础教程
Dec 25 Javascript
Javascript缓存API
Jun 14 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
express + jwt + postMan验证实现持久化登录
Jun 05 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
FleaPHP的安全设置方法
2008/09/15 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
python的即时标记项目练习笔记
2014/09/18 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
python+os根据文件名自动生成文本
2019/03/21 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
python调用接口的4种方式代码实例
2019/11/19 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
报关简历自我评价怎么写
2013/09/19 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
优秀求职信
2014/05/29 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
践行三严三实心得体会
2014/10/13 职场文书
杭白菊导游词
2015/02/10 职场文书
高中班主任培训心得体会
2016/01/07 职场文书