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 相关文章推荐
比较搞笑的js陷阱题
Feb 07 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
javascript实现放大镜功能
Dec 09 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 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 正则表达式常用函数
2014/08/17 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
Python中的包和模块实例
2014/11/22 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
Python如何实现机器人聊天
2020/09/10 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
什么是类的返射机制
2016/02/06 面试题
酒店服务实习自我鉴定
2013/09/22 职场文书
直接有效的自我评价
2014/01/11 职场文书
就业意向书范文
2014/04/01 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
作文评语怎么写
2014/12/25 职场文书
社区党支部承诺书
2015/04/29 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android
Go语言入门exec的基本使用
2022/05/20 Golang