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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
vue2.0实现列表数据增加和删除
Jun 17 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读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
python 测试实现方法
2008/12/24 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
django实现前后台交互实例
2017/08/07 Python
浅谈flask源码之请求过程
2018/07/26 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
应用心理学个人求职信范文
2013/12/11 职场文书
毕业生自荐书模版
2014/01/04 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
实习生岗位职责
2014/04/12 职场文书
团日活动总结模板
2014/06/25 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript