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自定义的函数
Aug 05 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
jquery JSON的解析方式
Jul 25 Javascript
document.getElementById介绍
Sep 13 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
js实现购物车功能
Jun 12 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
js实现旋转的星空效果
Nov 01 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
js单例模式详解实例
2013/11/21 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
Python中运行并行任务技巧
2015/02/26 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Python 处理数据的实例详解
2017/08/10 Python
Python模拟三级菜单效果
2017/09/11 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python画微信表情符的实例代码
2019/10/09 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
会计学专业学生的求职信范文
2014/01/27 职场文书
小学庆六一活动总结
2014/08/28 职场文书
迎七一演讲稿
2014/09/12 职场文书
大国崛起英国观后感
2015/06/02 职场文书
学校远程教育工作总结
2015/08/11 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python