`
jianggege
  • 浏览: 97242 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

学了这些你可以算jQuery入门了

阅读更多
 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的项目为当前选中项 
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option 
$("#sel").empty();//清空下拉框

 ----------------------------------------------------------------------------------------------------

//遍历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;

 获取值:
文本框,文本区域:


多选框checkbox:

$("#checkbox_id").attr("value");

 

单选组radio:

$("input[@type=radio][@checked]").val();

 

下拉框select:

$('#sel').val();

 
控制表单元素:
文本框,文本区域:

$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容

 
多选框checkbox:
单选组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的基础。疯狂的IT人祝你成功!

 

分享到:
评论

相关推荐

    jQuery入门jQuery入门

    ### jQuery入门知识点详解 #### 一、jQuery简介与特点 **1.1 jQuery定义与背景** - **定义**: jQuery是一款轻量级的JavaScript类库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等多种操作。 - **背景**: ...

    Jquery从入门到精通

    **jQuery入门** jQuery是一款高效、简洁的JavaScript库,它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。"jQuery从入门到精通"这个主题将带你全面了解和掌握这一强大的工具。 首先,...

    jQuery使用手册 jquery入门教程

    jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...

    jquery入门(一)

    本篇将作为jQuery入门的起点,带领初学者逐步理解并掌握这个强大的工具。 ### 1. jQuery 的安装与引入 在开始学习jQuery之前,首先需要在项目中引入jQuery库。最常见的方式是通过CDN(内容分发网络)链接,这样...

    jQuery经典入门教程

    jQuery经典入门教程,供学习交流,谢谢~

    jQuery 入门经典教程

    通过查阅这个文档,你可以深入学习jQuery的每一个功能,找到解决特定问题的方法。 总结来说,jQuery作为一个强大的JavaScript库,提供了丰富的API,简化了前端开发工作。从基础的选择器和DOM操作,到复杂的事件处理...

    jQuery入门手册1.3.2

    **jQuery入门手册1.3.2** ...通过阅读和实践,你可以快速上手jQuery,理解其基本操作,并逐步掌握动态网站开发的核心技巧。随着技术的发展,不断学习和适应新的版本和工具,将有助于保持在IT行业的竞争力。

    jquery入门jquery入门jquery入门

    本篇文章将深入浅出地介绍jQuery的基础知识,帮助初学者快速入门。 首先,理解jQuery的核心概念至关重要。jQuery通过一句简单的代码"$()"来创建一个jQuery对象,这个对象可以对HTML元素进行操作。例如,`$("#...

    jquery入门学习资料

    通过这份详尽的"jquery入门学习资料",你可以逐步掌握jQuery的基本概念和实践技巧,为成为jQuery高手奠定坚实的基础。记得理论结合实践,多动手编写代码,才能更好地理解和运用jQuery。祝你在编程之旅中不断进步!

    jQuery入门

    ### jQuery入门知识点详解 #### 一、jQuery简介 ##### 1-1 感性认识 **1-1-1 名称来历** - **名称解释**:“jQuery”是“JavaScript Query”的缩写,其中“Query”意为“查询”,表示jQuery提供了一种更便捷的...

    jquery 入门demo

    《jQuery入门Demo详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,...通过学习和实践jQuery,你可以轻松地创建动态网页,提升用户体验。希望这个jQuery入门Demo能帮助你快速上手,开启精彩的Web开发之旅。

    jquery 入门到精通 学习总结 资源

    《jQuery入门到精通学习资源概览》 jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本资源集合是针对jQuery从入门到精通的学习资料,旨在帮助初学者快速...

    jQuery入门学习资料

    **jQuery入门学习资料** jQuery,一个轻量级的JavaScript库,是前端开发中不可或缺的工具。它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互,使得开发者能够更高效地编写代码。本资料旨在帮助...

    jquery学习入门教程

    《jQuery学习入门教程》是一份专为初学者设计的教程,旨在帮助读者快速掌握jQuery的基础知识和实用技巧。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务,使得...

    Jquery从入门到精通及附件下载(一)

    **jQuery入门基础** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个教程将引导你从零开始掌握jQuery的基本概念和使用方法。 1. **jQuery的选择器** ...

    jQuery入门学习代码

    以下是一些关于jQuery入门学习的知识点: 1. **jQuery选择器**:jQuery的选择器类似于CSS选择器,用于选取页面中的HTML元素。例如,`$("#id")`选取ID为"id"的元素,`$(".class")`选取所有class为"class"的元素,`$...

    jquery入门文档ppt

    在jQuery入门文档中,首先会介绍jQuery的基本概念。jQuery是一个JavaScript库,它对CSS3兼容,同时兼容多种浏览器,使得开发者能够更加便捷地处理HTML文档、处理事件、实现动画效果,以及在无需刷新页面的情况下与...

    Jquery入门小示例

    通过以上这些基本操作,你可以构建简单的交互式网页。随着对jQuery理解的深入,你会发现它能处理更复杂的任务,如AJAX请求、DOM操作和动画效果。不断实践和学习,你将能够充分利用jQuery的强大功能,提高开发效率。...

    JQuery入门经典教材。

    **jQuery入门经典教材** jQuery是一款高效、简洁的JavaScript库,旨在简化HTML文档遍历、事件处理、动画设计和Ajax交互。本教材针对初学者,详细介绍了jQuery的核心概念和实用技巧,帮助开发者快速掌握这一强大的...

Global site tag (gtag.js) - Google Analytics