以下代码的测试环境为:jQuery-2.1.4,IE 11,FireFox 40。
1. text
- 取值与赋值
/* 原生JS */ var txtInput = document.getElementById("txtInput"); var value = txtInput.value; txtInput.value = "new value"; /* jQuery */ var $txtInput = $("#txtInput"); var value = $txtInput.val(); $txtInput.val("new value");
2. checkbox
- 是否选中
/* 原生JS */ var chkInput = document.getElementById("chkInput"); var isChecked = chkInput.checked; //返回boolean /* jQuery */ var $chkInput = $("#chkInput"); //attr只能获取checkbox初始化时是否选中,选中为"checked",否则为undefined var isChecked = $chkInput.attr("checked"); //下面两种方法都能动态获取checkbox是否选中,返回boolean isChecked = $chkInput.is(":checked"); isChecked = $chkInput.prop("checked");
- 选中/取消选中
/* 原生JS */ var chkInput = document.getElementById("chkInput"); chkInput.checked = true; /* jQuery */ var $chkInput = $("#chkInput"); $chkInput.attr("checked", true); $chkInput.prop("checked", true);
3. radio
- 选中/取消选中
/* 原生JS */ document.getElementById("radio1").checked = true; /* jQuery */ $("#radio1").attr("checked", true);
- 获取选中项的值
/* 原生JS */ var radioInputs = document.getElementsByName("radio"); var value; for (var i = 0; i < radioInputs.length; i++) { if (radioInputs[i].checked) { value = radioInputs[i].value; } } /* jQuery */ var $checkedRadio = $("input:radio[name=radio]:checked"); var value = $checkedRadio.val();
4. select
- 获取选中的值与文本
/* 原生JS */ var selInput = document.getElementById("selInput"); var val = selInput.value; var text = selInput.options[selInput.selectedIndex].text; /* jQuery */ var $selInput = $("#selInput"); var val = $selInput.val(); var text = $("#selInput option:selected").text();
- 通过选项值或者选项文本设置选中/取消选中
/* 原生JS */ var selInput = document.getElementById("selInput"); //选中值为test的选项 selInput.value = "test"; //选中显示文本为test的选项 for (var i = 0; i < selInput.options.length; i++) { //text为选项的显示文本,value为选项的值 if (selInput.options[i].text === "test") { selInput.options[i].selected = true; break; } } /* jQuery */ //选中值为test的选项 $("#selInput").val("test"); //选中显示文本为test的选项 $("#selInput option").filter(function () { return $(this).text() === "test"; }).attr("selected", true);
- 新增/删除选项
/* 原生JS */ //新增 var selOptions = document.getElementById("selInput").options; var newOption = new Option("testText", "testValue"); selOptions.add(newOption); //删除 for(var i = 0; i < selOptions.length; i++) { if(selOptions[i].text === "test") { selOptions.remove(i); break; } } /* jQuery */ //新增 var $newOption = $("<option value='testValue'>testText</option>"); $("#selInput").append($newOption); //删除 $("#selInput option").filter(function() { return $(this).text() === "test"; }).remove();
- 清空选项
/* 原生JS */ document.getElementById("selInput").options.length = 0; /* jQuery */ $("#selInput").empty();
相关推荐
JavaScript和jquery实战手册
《众妙之门——JavaScript与jQuery技术精粹》出自世界知名Web设计网站Smashing Magazine,其中的文章是来自全球顶级设计师的精华总结。全书共分为两大部分,第一部分阐述JavaScript的实战经验,共7章,内容涉及...
通过将编程理论与用来演示JavaScript和jQuery如何被应用于流行站点之上的示例相结合,《JavaScript&jQuery;交互式Web前端开发》将教会您如何让网站更具交互性、吸引性、可用性。很快,您就能够像一名程序员那样去...
精通JavaScript与jQuery,适合于初学者使用。 精通JavaScript与jQuery,适合于初学者使用。
精通JavaScript+jQuery 曾顺 配套有书中的列子
18级在校生,学习javascript与jQuery,第十二章上机作业,广安职业技术学院。 记录学习的点点滴滴,加强巩固练习。
JavaScript和jQuery实战手册原书第2版.mobi,完美版本,亚马逊上自费下载的电子版。
众妙之门 JavaScript与jQuery技术精粹
《JavaScript和jQuery实战手册 原书第3版》
javascript+jquery的网络相册
JavaScript+jQuery网页特效设计实例源码
JavaScript与JQuery框架基础入门教程 目录 一,JS对象二,DOM–1,作用–2,测试三,Jquery–1,概述–2,使用步骤–3,入门案例–4,jQuery的文档就绪四,JQuery的语法–1,选择器–2,常用函数–3,常用事件–4,...
JavaScript+jQuery程序设计(慕课版)的详细源程序,能够给学习的同学提供案例。
通过将编程理论与用来演示JavaScript和jQuery如何被应用于流行站点之上的示例相结合,《JavaScript&jQuery;交互式Web前端开发》将教会您如何让网站更具交互性、吸引性、可用性。很快,您就能够像一名程序员那样去...
品名:JavaScript & jQuery...用途:前端开发人员及javascript 与 jQuery 铁粉珍爱学习资料,web前端开发或学习爱好者不可多得的学资料,本教程出自清华大学出版社,内容十分受用,喜欢技术研究和学习的您一定会懂得!
JavaScript与JQuery实现全选/反选/单个全选,全选自动勾选/单个未选,全选自动不勾选的区别
《精通JavaScript+jQuery》从JavaScript的基础知识开始,围绕标准Web的各项技术予以展开,通过大量实例对JavaScript、CSS、DOM、Ajax等Web关键技术进行深入浅出的分析。主要内容包括JavaScript的概念和基本语法、CSS...
javascript jquery 第一章
JavaScript、jQuery精通一次、一遍
更高效的学习JavaScript和jQuery,快速成为一名Web前端工程师,零基础快速掌握 作者:(美)达科特(Duckett, J.)出版社:清华大学出版社 第1章 编程基础知识 第2章 JavaScript基础指令 第3章 函数、方法与对象 第4章 ...