【第六章】使用jQuery操作表单和表格2
生活随笔
收集整理的這篇文章主要介紹了
【第六章】使用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="提交" /> <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" /> <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"/> <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="香蕉" /> <input type="button" id="bbtn2" value="橙子" /> <input type="button" id="bbtn3" value="荔枝" /> <input type="button" id="bbtn4" value="葡萄" /> <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="全選" /> <input type="button" id="unCheckAll" value="全不選" /> <input type="button" id="revBtn" value="反選" /> <input type="submit" id="subBtn" value="提交" /> </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()方法
3.清空下拉菜單：
使用empty()方法
4.向下拉菜單中添加菜單項：
使用append()方法
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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Moodle插件开发基础
- 下一篇： 微信公众号直播有哪些不一样的玩法？