jquery中當text文本框爲空時,button按鈕是disabled狀態,否則爲enable狀態

<html>

<input type="text" id='t1' onkeyup="myText()"></input>
<input type="button" id='btn' disabled="disabled" value="提交"></input>

</html>


<script>

 $(document).ready(function(){
  $('#t1').keyup(function(){
    var v=$('#t1').val();
    if(!v){
      $('#btn').attr('disabled', true) 
    }
    else{
     $('#btn').attr('disabled', false)
    }
  });
});

</script>


用on事件替換:

 $(document).ready(function(){
  $('#t1').on('keyup', function(){
    var v=$('#t1').val();
    if(!v){
      $('#btn').attr('disabled', true) 
    }
    else{
     $('#btn').attr('disabled', false)
    }
  });
});


注:attr()

用法一: $(選擇器).attr(屬性名) 它的作用就是獲取指定元素( $(選擇器)部分 )的指定屬性的值. 看例子:

有這樣一段html:

 

<img src=“http://t.douban.com/lpic/s3791510.jpg” alt=“變形金剛海報” width=“500″ height=“300″ />

 

那麼你要獲取到圖片的地址該怎麼辦呢? 這樣: $(”img”).attr(”src”) 就這麼簡單, 你用alert或者其它形式輸出一下就看到圖片的地址了. 那麼我要取得圖片的描述呢? 這樣: $(”img”).attr(”alt”) .夠簡單吧. 它不但可以取到html本身有的屬性, 而且也能取到你自己定義的屬性, 比如上例中的 funny屬性, 自己試試能不能獲取到它的值. 注意: 如果你要獲取的屬性是不存在的, 那麼jquery就會返回一個 undefined .

用法二: $(選擇器).attr(屬性名, 屬性值) 它的作用是爲所有匹配的元素設置一個屬性值。

假如頁面中有一堆這樣的html:

 

<img /><img />

 

我們寫一句這樣的jquery代碼: $(”img”).attr(”src”,”http://t.douban.com/lpic/s3791510.jpg”) 這樣上面一堆無意義的img標籤就變成了:

 

<img src=“http://t.douban.com/lpic/s3791510.jpg” /><img src=“http://t.douban.com/lpic/s3791510.jpg” />

 

很容易理解吧. 假如我們想給圖片設置高度,那麼只要 $(”img”).attr(”height”,”300″) . 再要設置寬度就這樣: $(”img”).attr(”width”,”500″) . 如此看來是沒有什麼問題, 但是當要設置多個屬性時, 一個一個的這樣寫真是太麻煩了, 那麼我們來看第三個用法.

用法三: $(選擇器).attr(Map) 它的意思就是給指定元素設置多個屬性值, 我們重點看一下 Map 是什麼意思. 它其實是這樣一種序列:

{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }

那麼我要實現用法二中的例子只要這樣寫:

$(“img”).attr({src:“http://t.douban.com/lpic/s3791510.jpg” , height: “300″ , width : “500″})

以上我們學會了獲取屬性值, 設置屬性值, 那麼怎麼刪除屬性呢?

jquery中刪除屬性的關鍵詞是: removeAttr 注意A是大寫的. 看看怎麼用的:

同樣是用法一中的html代碼, 我想刪掉圖片的高度屬性, 那麼就這樣:

$(“img”). removeAttr(“height”);

嗯,就這麼簡單.  attr 其實就是原生js中 getAttribute 的簡化實現, 而removeAttr 就是 removeAttribute 的簡寫了
 一、獲取<ul>裏第2個<li>設置id。
<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>
變成:<ul><li id="lili" alt="123" title="111"></li></ul>
 
二、獲取<ul>裏第2個<li>設置style。
<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>
變成:<ul><li style="color:red;" alt="123" title="111"></li></ul>

三、獲取<ul>裏第2個<li>設置class。
<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>
變成:<ul><li class="lili" alt="123" title="111"></li></ul>

那麼是否有跟attr()相似的屬性呢?
jquery中val()與之類似,
$(this).val();獲取某個元素節點的value值,相當於$(this).attr("value");
$(this).val(value);設置某個元素節點的value值,相當於$(this).attr("value",value);

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章