亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery對表單的操作代碼集合

 更新時間：2011年04月06日 23:24:03   作者：  
jQuery對表單的操作代碼集合，學習jquery的朋友可以參考下。
改變文本框的獲得焦點的樣式
復制代碼 代碼如下:

<form action="#" method="POST" id="regForm">
<fieldset>
<legend>個人基本信息</legend>
<div>
<label for="username">名稱：</label>
<input id="username" type="text">
</div>
</fieldset>
</form>

首先在css中添加一個類名為focus的樣式。
css代碼如下：
復制代碼 代碼如下:

.focus {
border: 1px solid #f00;
background: #fcc;
}

然后為文本框添加獲取和失去焦點事件
復制代碼 代碼如下:

$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
});

多行文本框的作用
設置評論框的最小高度和最大高度：
復制代碼 代碼如下:

<form>
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">縮小</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">多行文本框高度變化</textarea>
</div>
</div>
</form>

1,當單擊“放大”按鈕后，如果評論框的高度小于500px,則在原有高度的基礎上增加50px;
2.當單擊“縮小”按鈕后，如果評論框的高度大于50px,則在原有高度的基礎上減少50px;
復制代碼 代碼如下:

$(function(){
var $comment = $('#comment'); //獲取評論框
$('.bigger').click(function(){
if(!$comment.is(":animated")){ //判斷是否處于動畫
if($comment.height() < 500){
$comment.animate({height : "+=50"}, 400);
}
}
})
$('.smaller').click(function(){
if(!$comment.is(":animated")){ //判斷是否處于動畫
if($comment.height() > 50){
$comment.animate({height : "-=50"}, 400);
}
}
})
})

滾動條高度的變化
控制多行文本框滾動條的變化：
復制代碼 代碼如下:

$(function(){
var $comment = $('#comment');
$('.up').click(function(){
if($comment.is(":animated")){
$comment.animate({scrollTop : "-=50"}, 400);
}
})
$('.down').click(function(){
if($comment.is(":animated")){
$comment.animate({scrollTop : "+=50"}, 400);
})
})

復選框的應用
基本應用：對復選框進行全選，反選，全不選操作。
復制代碼 代碼如下:

<form>
你愛好的運動？<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="籃球"/>籃球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乓球球
<input type="button" id="CheckedAll" value="全選"/>
<input type="button" id="CheckedNo" value="全不選"/>
<input type="button" id="CheckedRev" value="反選"/>
<input type="button" id="send" value="提 交"/>
//全選
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked',true);
});
//全不選
$("#CheckedNo").click(function(){
$('[name=items]:checkbox').attr('checked',false);
});
//反選
$("#CheckedNo").click(function(){
$('[name=items]:checkbox').each(function(){
this.checked = !this.checked;
}));
//提交按鈕
$("#send").click(function(){
var str = "你選中的是：\r\n";
$('[name=items]:checkbox:checked').each(function(){
str += $(this).val()+'\r\n'})
alert(str);
);

相關文章

  • 初窺JQuery-Jquery簡介 入門了解篇

    初窺JQuery-Jquery簡介 入門了解篇

    JQuery是一種非常靈活的腳本庫，JQuery庫為Web腳本編程提供了通用的抽象層，已經(jīng)是比較流行的js框架了。
    2010-11-11
  • jQuery插件bgStretcher.js實現(xiàn)全屏背景特效

    jQuery插件bgStretcher.js實現(xiàn)全屏背景特效

    可以自動動態(tài)更換網(wǎng)頁背景圖片的jQuery插件bgstretcher.js，sharejs.com推薦的這個插件，可以自定義多種方式讓網(wǎng)頁背景自動切換，效果流暢，非常難得，調用代碼也非常簡單。
    2015-06-06
  • jquery進行數(shù)組遍歷如何跳出當前的each循環(huán)

    jquery進行數(shù)組遍歷如何跳出當前的each循環(huán)

    通過 jquery 的循環(huán)方法進行數(shù)組遍歷，但是當不符合條件時，怎么跳出當前循環(huán)，解決方法如下,需要的朋友可以參考下
    2014-06-06
  • 基于jQuery實現(xiàn)的向下滑動二級菜單效果代碼

    基于jQuery實現(xiàn)的向下滑動二級菜單效果代碼

    這篇文章主要介紹了基于jQuery實現(xiàn)的向下滑動二級菜單效果代碼,通過jquery鼠標事件控制針對頁面元素的鏈式操作實現(xiàn)菜單切換的功能,非常簡單實用,需要的朋友可以參考下
    2015-08-08
  • jQuery 操作 HTML 元素和屬性的方法

    jQuery 操作 HTML 元素和屬性的方法

    這篇文章主要介紹了jQuery 操作 HTML 元素和屬性的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-11-11
  • jQuery操作value值方法介紹

    jQuery操作value值方法介紹

    這篇文章介紹了jQuery操作value值的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-03-03
  • JQuery實現(xiàn)倒計時按鈕的實現(xiàn)代碼

    JQuery實現(xiàn)倒計時按鈕的實現(xiàn)代碼

    頁面中需要實現(xiàn)某個按鈕點擊完后，禁用它，并顯示倒計時。這個默認是3秒，代碼很簡單
    2012-03-03
  • jQuery實現(xiàn)給input綁定回車事件的方法

    jQuery實現(xiàn)給input綁定回車事件的方法

    這篇文章主要介紹了jQuery實現(xiàn)給input綁定回車事件的方法,結合實例形式分析了2種常用的事件綁定操作技巧,需要的朋友可以參考下
    2017-02-02
  • jQuery 限制輸入字符串長度

    jQuery 限制輸入字符串長度

    這篇文章主要介紹了jQuery限制輸入字符串長度的方法，實例講解，非常實用,需要的朋友可以參考下。
    2016-06-06
  • JQuery Tips(4) 一些關于提高JQuery性能的Tips

    JQuery Tips(4) 一些關于提高JQuery性能的Tips

    如今咱祖國已經(jīng)崛起了..電腦的配置也是直線上升.可是js的性能問題依然不可小覷..尤其在萬惡的IE中..js引擎速度本來就慢..如果JS如果再寫不好，客戶端多開幾個窗口假死肯定是家常便飯了.廢話不說了，下面說說js性能提升的一些小Tips.
    2009-12-12

最新評論