【第六章】使用jQuery操作表单和表格2

使用jQuery操作表单元素

操作文本框

1.获取文本框的值

var textCon =$("#id").val();
或者：
var  textCon=$("#id").attr("value");

2.设置文本框的值，可以使用attr()方法

$("#id").attr("value","要设定的值");

3.设置文本框不可编辑的方法：

$("#id").attr("disabled","disabled");

3.设置文本框可编辑的方法：

$("#id").removeAttr("disabled");

例子：

<html><head><meta charset="utf-8"><title>使用jQuery操作表单和表格</title><script src="js/jquery-3.4.1.js" language="JavaScript"></script></head><body>用户名：<input type="text" name="testinput" id="testinput" value="hello" /><br /><br /><input type="submit" name="sbtn" id="sbtn" value="提交" />&nbsp;&nbsp;<input type="button" name="btn" id="btn" value="修改" /><script>$(document).ready(function(){$("#sbtn").click(function(){if($("#testinput").val()!=""){alert($("#testinput").val());$("#testinput").attr("disabled","disabled");}else{alert("请输入文本内容");$("#testinput").focus();return false;}});$("#btn").click(function(){if($("#testinput").attr("disabled")=="disabled"){$("#testinput").removeAttr("disabled");}});})</script></body>
</html>

操作文本域

文本域的属性、值的获取以及编辑状态的修改与文本框都相同。

文本域的高度变化

例子：

<body><div class="message"><div class="msg_top"><input type="button" value="放大" id="bigBtn" />&nbsp;&nbsp;<input type="button" value="缩小" id="smallBtn" /></div><div class="tt"><textarea id="content" rows="4" clos="35">寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急！雁过也，正伤心，却是旧时相识。满地黄花堆积，憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑！梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得</textarea></div></div><script>$(document).ready(function(){var $content =$("#content");        //获取文本对象$("#bigBtn").click(function(){        //放大按钮单击事件if(!$content .is(":animated")){  //是否处于动画中if($content.height()<350){//将文本域高度在原来的基础上增加70$content.animate({height:"+=70"},500);}}})$("#smallBtn").click(function(){  //缩小按钮单击事件if(!$content.is(":animated")){//是否处于动画中if($content.height()>70){//将文本域高度在原来的基础上减少70$content.animate({height:"-=70"},500);}}})})</script></body>

文本域的滚动条高度变化

例子：

<body><div class="messsge"><div class="msg_top"><input type="button"value="向上"id="upBtn"/>&nbsp;&nbsp;<input type="button"value="向下"id="downBtn"/></div><div class="tt"><textarea id="content"rows="4"cols="35">寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急！雁过也，正伤心，却是旧时相识。满地黄花堆积，憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑！梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得</textarea></div></div><script>$(document).ready(function(){var $content=$("#content");                       //获取文本域对象$("#upBtn").click(function(){                     //向上按钮的单击事件if(!$content.is(":animated")){                //是否处于动画中if($content.height()<350){$content.animate({scrollTop:"-=40"},500);}}})$("#downBtn").click(function(){                       //向下按钮的单击事件if(!$content.is(":animated")){                    //是否处于动画中if($content.height()>40){$content.animate({scrollTop:"+=40"},500);}}})})</script></body>

操作单选按钮和复选框

1.选中单选按钮和复选按钮

$("#id").attr("checked",true);

2.取消选中单选按钮和复选按钮

$("#id").removeAttr("checked",true);

3.判断选择状态：

if($("#id")..attr("checked")=='checked'){//省略部分代码
}

1.例子：

<body><form><h2>选择你喜欢吃的水果</h2><input type="radio" name="fruit" value="香蕉" />香蕉<input type="radio" name="fruit" value="橙子" />橙子<input type="radio" name="fruit" value="荔枝" />荔枝<input type="radio" name="fruit" value="葡萄" />葡萄<input type="radio" name="fruit" value="苹果" />苹果<br /><br /><input type="button" id="bbtn1" value="香蕉" />&nbsp;&nbsp;&nbsp;<input type="button" id="bbtn2" value="橙子" />&nbsp;&nbsp;&nbsp;<input type="button" id="bbtn3" value="荔枝" />&nbsp;&nbsp;&nbsp;<input type="button" id="bbtn4" value="葡萄" />&nbsp;&nbsp;&nbsp;<input type="button" id="bbtn5" value="苹果" /></form><script>$(function(){$("#bbtn1").click(function(){$("input[type=radio]").eq(0).attr("checked",true);})$("#bbtn2").click(function(){$("input[type=radio]").eq(1).attr("checked",true);})$("#bbtn3").click(function(){$("input[type=radio]").eq(2).attr("checked",true);})$("#bbtn4").click(function(){$("input[type=radio]").eq(3).attr("checked",true);})$("#bbtn5").click(function(){$("input[type=radio]").eq(4).attr("checked",true);})})</script></body>

实现全选，全不选，反选，提交

2.例子：

<body><form><h2>选择你喜欢吃的水果</h2><input type="checkbox" name="fruit" value="香蕉" />香蕉<input type="checkbox" name="fruit" value="橙子" />橙子<input type="checkbox" name="fruit" value="荔枝" />荔枝<input type="checkbox" name="fruit" value="葡萄" />葡萄<input type="checkbox" name="fruit" value="苹果" />苹果<br /><br /><input type="button" id="checkAll" value="全选" />&nbsp;&nbsp;<input type="button" id="unCheckAll" value="全不选" />&nbsp; &nbsp;<input type="button" id="revBtn" value="反选" />&nbsp; &nbsp;<input type="submit" id="subBtn" value="提交" />&nbsp;&nbsp;</form><script>$(function(){$("#checkAll").click(function(){$("input[type=checkbox]").attr("checked",true);})$("#unCheckAll").click(function(){$("input[type=checkbox]").removeAttr("checked");})$("#revBtn").click(function(){$("input[type=checkbox]").each(function(){this.checked=!this.checked;});})$("#subBtn").click(function(){var msg="你喜欢的水果是：\r\n";$("input[type=checkbox]:checked").each(function(){msg+=$(this).val()+"\r\n";});alert(msg);})})</script>

操作下拉框

1.读取下拉框的值

var selVal =$("#id").val();

2.设置下拉框的选中框
使用attr()方法

$("#id").attr("value",选中项的值);

3.清空下拉菜单：
使用empty()方法

if($("#id").empty())；

4.向下拉菜单中添加菜单项：
使用append()方法

if($("#id").append("<option value='值'>文本</option>"))；

1.例子：

<html><head><meta charset="utf-8"><title>操作下拉框</title><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script><style>.first{float: left;}.second{float: left;}.sd{     float: left;    }.sel{width: 150px;height: 150px;float: left;}</style></head><body><div class "first"><select multiple name="hobby" id="hobby" class="sel"><option value="游泳">游泳</option><option value="足球">足球</option><option value="篮球">篮球</option><option value="跑步">跑步</option><option value="溜冰">溜冰</option><option value="滑雪">滑雪</option><option value="摄影">摄影</option></select><div class="sd"><button id="add" >添加>> <tton> <br/><br/><button id="add_all"> 全部添加>> <tton></div></div><div class="second"><select multiple name="other" id="other" class="sel"></select><div class="sd"><button id="to_left"> <<删除  </button> <br/><br/><button id="all_to_left"> <<全部删除  </button></div></div><script>$(function(){$("#add").click(function(){var $options = $("#hobby option:selected");           //获取左边选中项$options.appendTo("#other");                          //追加到右边})$("#add_all").click(function(){var $options = $("#hobby option");                    //获取全部选项$options.appendTo("#other");                          //追加到右边})$("#hobby").dblclick(function(){                      //鼠标双击事件var $options = $("option:selected" ,this);            //获取选中项$options. appendTo("#other");                         //追加到右边})$("#to_left").click(function(){var $options=$("#other option:selected");              //获取右边选中项$options. appendTo("#hobby");                         //追加到左边})$("#all_to_left").click(function(){var $options = $("#other option");                    //获取全部选项$options. appendTo("#hobby");                         //追加到左边})$("#other").dblclick(function(){                      //鼠标双击事件var $options=$("option:selected",this);               //获取选中项$options.appendTo("#hobby");                          //追加到左边})})</script></body>
<html>

【第六章】使用jQuery操作表单和表格2相关推荐

php jq表格,如何用jQuery操作表单和表格
这次给大家带来如何用jQuery操作表单和表格以及一些其它应用,下面跟随小编,一起来看一下. 一.表单应用一个表单有三个基本组成部分: (1)表单标签:包含处理表单数据所用的服务器端程序URL以及数 ...
Jquery操作表单Select元素常用方法
Jquery操作表单Select元素的用法: jQuery获取Select元素,并选择的Text和Value: 实例分析: 1. $("#select_id").change(fu ...
五、jQuery 对表单、表格的操作（走过路过瞅瞅吧）
文章目录前言一. 表单应用 1.1 单行文本框应用 1.2 多行文本框应用 1.3 复选框应用 1.3 下拉框应用 1.5 表单验证二. 表格应用 2.1 表格变色 2.1.1 普通的隔行变色 ...
jQuery对表单、表格的操作以及更多应用
表单和表格都是HTML的重要组成部分,分别用于采集.提交用户输入的信息和显示列表数据. 表单应用:一个表单有3个基本组成部分: ①表单标签:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器 ...
Head First设计模式读书笔记五第六章命令模式（单例略过）
本文示例代码材料源自Head First设计模式以前整理自己整理的链接: https://blog.csdn.net/u011109881/article/details/59675658 极简命令 ...
jQuery系列第六章 jQuery框架事件处理
第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...
用MATLAB玩转机器人--第六章用MATLAB玩转单关节机器人
文章目录 1. 概述 2. 仿真搭建 2.1 运动轨迹函数 2.2 机器人的机械仿真模型 2.3 机器人的电气仿真模型 2.3.1 直流电机部分 2.3.2 减速器与传动装置 2.4 PID 控制的仿 ...
第六章 jQuery中的Ajax应用
第六章 jQuery中的Ajax应用 1.Ajax:客户端javascript所发起的http请求的代号,无刷新的数据更新. 2.编程模型: (1).同步代码:按钮按下执行耗时操作等待执行返回 ...
matlab仿真单关节机器人,用MATLAB玩转机器人--第六章用MATLAB玩转单关节机器人
文章目录 1. 概述2. 仿真搭建2.1 运动轨迹函数2.2 机器人的机械仿真模型2.3 机器人的电气仿真模型2.3.1 直流电机部分2.3.2 减速器与传动装置 2.4 PID 控制的仿真模型2.4 ...

【第六章】使用jQuery操作表单和表格2

使用jQuery操作表单元素

操作文本框

例子：

操作文本域

文本域的高度变化

例子：

文本域的滚动条高度变化

例子：

操作单选按钮和复选框

1.例子：

2.例子：

操作下拉框

1.例子：

【第六章】使用jQuery操作表单和表格2相关推荐

最新文章

热门文章