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中yield实用简洁实现方式
Jun 12 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
Javascript玩转继承(二)
May 08 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
js实现计时器秒表功能
Dec 16 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
PHP4中session登录页面的应用
2008/07/25 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
php获取随机数组列表的方法
2014/11/13 PHP
php批量修改表结构实例
2017/05/24 PHP
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
深入解析Python中的集合类型操作符
2015/08/19 Python
Python实现的双色球生成功能示例
2017/12/18 Python
python中logging包的使用总结
2018/02/28 Python
详解python中的装饰器
2018/07/10 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
利用python汇总统计多张Excel
2020/09/22 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
校园创业策划书
2014/01/14 职场文书
师范学院教师自荐书
2014/01/31 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
海飞丝广告词
2014/03/20 职场文书
爱心捐款倡议书
2014/04/14 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
博物馆观后感
2015/06/05 职场文书
GO中sync包自由控制并发示例详解
2022/08/05 Golang