元素選擇(找尋)方法
常用方法
$('#my_id') // 找 ID
$('.my_class') // 找 Class
$('div') // 找 標籤
$('form input') // 用空格找兩個條件
$('input[name=\'my_name\']') // 找屬性 name = my_name 的 input
$('input[name^=\'my_name\']') // 找屬性 name 開頭為 my_name 的 input
$('input[name$=\'my_name\']') // 找屬性 name 結尾為 my_name 的 input
$('input:not(:checked)') // 使用 not
$(':enabled') // 可操作的元素
$(':disabled') // 不可操作的元素
$(':checked') // 被 checked 的元素
$(':selected') // 被 selected 的元素
可用空格組合不同的條件
$('select option:selected') // 所有被 selected 的 select
詳細用法
$('*') // 抓全部的元素
$('#my_id') // 抓 ID 為 my_id 的元素
$('.my_class') // 抓 Class 為 my_class 的元素
$('.class1,.class2') // 抓 Class 有 Class1 or Class2 的元素
$('div') // 抓標籤為 div 的元素
$('div,span') // 抓標籤為 div or span 的元素
$('form input') // form 裡的所有 input
$('form ~ input') // form 出現之後的所有 input
$('form > input') // form 裡僅列下一層的所有 input
$('form + input') // form 下一個緊接著是 input 的 input 元素
$('div:first') // 第一個 div
$('div:last') // 最後一個 div
$('div:even') // 偶數的 div
$('div:odd') // 奇數的 div
$('div:first-child') // 子元素的第一個元素為 div
$('div:first-of-type') // 第一個元素為 div
$("div:nth-child(2)") // 子元素的第二個元素為 div
$("div:nth-of-type(2)") // 第二個元素為 div
$("div:nth-last-child(2)") // 子元素的最後第二個元素為 div
$("div:nth-last-of-type(2)") // 最後第二個元素為 div
$('div:last-child') // 子元素的最後一個元素為 div
$('div:last-of-type') // 最後一個元素為 div
$('div:only-child') // div 內只有一個元素
$("div:only-of-type") // div 內只有一個元素
$('tr:eq(3)') // index = 3 的 tr (從0開始)
$('tr:gt(3)') // index > 3 的 tr (從0開始)
$('tr:lt(3)') // index < 3 的 tr (從0開始)
$("input:not(:empty)") // 所有不為空的 input
$('input:not(:checked)') // input 未選取的物件
$(":header") // 所有標題元素 <h1>,<h2>...
$(':animated') // 有動畫的元素
$(":focus") // 目前獲得焦點的元素
$('div:contains(\'String\')') // 本文內容包含 String 的 div
$('div:has(p)') // 包含標籤 <p> 的 div
$('div:empty') // 內容為空的 div
$('div:parent') // 以div為父節點的元素
$('div:hidden') // 隱藏的 div
$('div:visible') // 可視的 div
$(":root") // 根元素
$("p:lang(de)") // 所有 lang 屬性值開頭為 de 的 p 元素
$("[name]") // 所有帶 name 屬性的元素
$('input[name]') // 包含 name 屬性的 input
$('input[name=\'my_name\']') // name = my_name 的 input
$('input[name!=\'my_name\']') // name != my_name 的 input
$('input[name^=\'my_name\']') // name 開頭為 my_name 的 input
$('input[name$=\'my_name\']') // name 結尾為 my_name 的 input
$('input[name|=\'my_name\']') // name 開頭為 my_name 或 my_name| 的 input
$('input[name~=\'my_name\']') // name 包含特定 my_name 的 input
$('input[name*=\'my_name\']') // name 包含 my_name 的 input
$('input[name][value]') // 可使用多個條件
$(':input') // 所有的 input
$(':hidden') // 所有的 hidden input
$(':text') // 所有的 text input
$(':password') // 所有的 password input
$(':radio') // 所有的 radio input
$(':checkbox') // 所有的 checkbox input
$(':button') // 所有的 button input
$(':reset') // 所有的 reset input
$(':image') // 所有的 image input
$(':file') // 所有的 file input
$(':submit') // 所有的 submit input
$(':enabled') // 所有可操作的元素
$(':disabled') // 所有不可操作的元素
$(':checked') // 所有被 checked 的元素
$(':selected') // 所有被 selected 的元素
回傳節點
$('#my_id').children('div'); // 僅找下一層的同層所有<div>
$('#my_id').find('div'); // 找所有層的<div>
$('#my_id').first(); // 回傳第一個元素
$('#my_id').eq(3); // 回傳 index 3 的元素
$('#my_id').slice(start,end); // 回傳指定 index 範圍的元素
$('#my_id').last(); // 回傳最後一個元素
$('#my_id').not('[name=my_name]'); // name 不為 my_name 的元素
$('#my_id').prev(); // 回傳同級元素的上一個元素
$('#my_id').next(); // 回傳同級元素的下一個元素
$('#my_id').parent(); // 父節點
$('#my_id').parents(); // 所有父節點
抓物件的值
$('select[name=myName] option:selected').text(); // 取得 select 本文內容
$('select[name=myName] option:selected').val(); // 取得 select value
$('select[name=myName] option:selected').index() // 取得 select index
$('select[name=myName]').prop('selectedIndex') // 取得 select index
$('#my_id').attr("ccc") // 抓 tag 內的屬性ccc的值
$('input[name=myCheckbox]').is(':checked'); // 抓是否選取
設定物件的值
$('#my_id').html('<b>string</b>');
$('#my_id').text('string');
$('#my_id').val(123);
$('#my_id').attr("ccc": "1") // 設定 tag 內屬性 ccc 的值
CSS 相關
$('#my_id').css({'visibility':'visible','displa':'none'});// 設定(有多個參數用","相隔，值可用變數)
$('#my_id').css("visibility"); // 抓值
Class 相關
$('#my_id').hasClass('my_class'); // 是否存在
$('#my_id').addClass('my_class'); // 新增
$('#my_id').removeClass('my_class'); // 刪除
$('#my_id').toggleClass('my_class'); // 切換 (新增或刪除)
table 節點相關
$('#my_TableID').before('...'); // 增加內容在元素的前面
$('#my_TableID').prepend('...'); // 增加內容在開頭
$('#my_TableID').append('...'); // 附加內容在最後
$('#my_TableID').after('...'); // 增加內容在元素的後面
$('#my_TableID').empty() // 清空所有子節點和內容
$('#my_TableID').find('tr:first').remove();// 刪除第一組 <tr>
$('#my_TableID').remove('.class'); // 刪除指定條件
清除所有 Table 的 <tr>
var obj = $('#my_tableID')[0];
while(obj.rows.length > 0)
obj.deleteRow(0);
常用事件
$('...').on() // 增加事件 callback
$('...').off() // 取消事件 callback
$('...').click() // click 事件 callback
$('...').mousedown() // 滑鼠 down 事件 callback
$('...').mousemove() // 滑鼠 move 事件 callback
$('...').keypress() // 鍵盤 press 事件 callback
$('...').focus() // 焦點事件 callback
$('...').resize() // 視窗 resize 事件 callback
$('...').scroll() // 視窗 scroll 事件 callback
$('...').scrollLeft() // 取得 scroll Left
$('...').scrollTop() // 取得 scroll Top
event.pageX // 取得 pageX
event.pageY // 取得 pageY
on 用法
$('...').on("click", function(){ });
$('...').on({
mouseenter: function(){ },
mouseleave: function(){ },
click: function(){ }
});
onload (網頁讀取完畢時呼叫)
$(document).ready(function() {
console.log('document ready');
});
$(window).load(function() {
console.log('window load');
});
<body onload="loadFunc();">
呼叫優先順序為 document ready > window load > body onload
onunload (網頁離開時呼叫)
$(window).unload(function() {
console.log("window unload");
});
<body onunload="unloadFunc();">
呼叫優先順序為 window unload > body onunload
onbeforeunload (離開前呼叫，可取消離開)
window.onbeforeunload = function() {
var e = window.event;
e.cancelBubble = true;
e.returnValue = 'You sure you want to leave?';
if (e.stopPropagation) {
"e.stopPropagation();
"e.preventDefault();
}
// return 'You sure you want to leave?';
};
常用動畫
$('...').animate() // 跑自訂動畫 ex: { left:'200px', opacity:'0.5', height:'200px', width:'+=200px' }
$('...').delay() // 設定延遲
$('...').finish() // 停止、刪除、完成所有動畫
$('...').stop() // 停止動畫 (可不加參數或 參數一：true(停止全部), 參數二:true(直接完成))
$('...').hide() // 隱藏 (可不加參數或 參數一：["slow","fast",毫秒], 參數二:callback)
$('...').show() // 顯示 (可不加參數或 參數一：["slow","fast",毫秒], 參數二:callback)
$('...').fadeIn() // 淡入動畫 (可不加參數或 參數一：["slow","fast",毫秒], 參數二:callback)
$('...').fadeOut() // 淡出動畫 (可不加參數或 參數一：["slow","fast",毫秒], 參數二:callback)
$('...').fadeToggle("slow"); // 淡出淡入動畫切換 (可不加參數或 參數一：["slow","fast",毫秒], 參數二:callback)
$('...').fadeTo("slow", 0.4); // 設定淡出淡入等級 (參數一：["slow","fast",毫秒], 參數二:opacity, 參數三:callback)
$('...').slideDown() // 向下滑動動畫 (可不加參數或 參數一：["slow","fast",毫秒], 參數二:callback)
$('...').slideUp() // 向上滑動動畫 (可不加參數或 參數一：["slow","fast",毫秒], 參數二:callback)
$('...').slideToggle("slow"); // 滑動動畫切換 (可不加參數或 參數一：["slow","fast",毫秒], 參數二:callback)
沒有留言:
張貼留言