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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
js窗口震动小程序分享
Nov 28 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
ES6数组与对象的解构赋值详解
Jun 14 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
原生js+ajax分页组件
Jan 30 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&amp;MYSQL留言板源码
2020/07/19 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
《值日生》教学反思
2014/02/17 职场文书
股权投资意向书
2014/04/01 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
促销活动总结模板
2014/07/01 职场文书
公民授权委托书
2014/10/15 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
2015年共青团工作总结
2015/05/15 职场文书
公司的力量观后感
2015/06/05 职场文书
检举信的写法
2019/04/10 职场文书