2013年8月17日 星期六

jQuery - 常用基本用法


網頁所有元素
$('*')

指定 ID 的元素
$('#id')

指定類別的元素
$('.class') 

指定 Name 的元素
$("[name='name']"); //第1個name不可變,第2個name要換成元素真正的 name

指定元素下面的子元素
$('#elementID').find('input, textarea, select');

指定標籤與類別
 $('input.myClassName')

取得元素的值
$('#Id').val();

設定元素屬性為唯讀
$('#ID').attr('readonly','readonly');

找出子元素,並且設定樣式。
$('#formName').css('background-color','#000');

 動作可以串連使用
 $('#tableName').find('th, td').css('text-align','center');
$('#formName').find('input, textarea').attr('readonly','readonly').css('background-color','#CCC');

移除屬性、移除類別
$('#idTest').removeAttr('readonly').removeClass('className');

使用 attr 是新增屬性,並不會把原有的相同屬性內容清掉。
例如 <textarea id="myID" class="css1 css2">abc</textarea>
改成 2 個設定:
html: <textarea id="myID" class="css2">abc</textarea>
jquery: $('#myID').attr('class', 'css1')
這樣還是能套用到 css1, css2 這兩個屬性。

表單禁止按下 enter 後送出
表單裡面同時有 input, textarea ,一般使用者不知道其差別,只會覺得,怎麼在某些欄位按下 enter 會送出表單,有些不會。所以要對 input 文字欄位禁止 enter 鍵觸發表單送出的動作。
    $("input[type=text]").keydown(function(e){
        if(e.keyCode==13){return false;}
    });


jQuery Selector 選取網頁中元素的各種方式
[jQuery] 筆記 (五) – 選擇器 (selector)
jQuery 入門教程(3): Selectors 



沒有留言:

張貼留言