1.
$('td:empty').html('-'); td可替換
要在表格中的每一個空列中都添加一個橫杠,可以使用::empty 偽選擇器
2.
resize方法,在每一個匹配元素的resize事件中綁定一個處理函數(shù)。
eg:
讓人每次改變頁面窗口的大小時很郁悶的方法:
$(window).resize(function(){
alert("Stop it!");
});
3.$.trim(str):刪除字符串兩端的空白字符。
eg:
$("input").val( $.trim(" hello, how are you? ") ) ;
4.JQuery的一些基礎解釋:
- 1,調用方法是要注意:
- 調用方法時要注意操作的是dom對象還是jquery對象。
- 普通的dom對象一般可以通過$()轉換成jquery對象。
- 如:$(document.getElementById("msg"))則為jquery對象,可以使用jquery的方法。
- 由于jquery對象本身是一個集合(返回的對象為jquery對象(集合對象),不能直接調用dom定義的方法)。
- 所以如果jquery對象要轉換為dom對象則必須取出其中的某一項,一般可通過索引取出。
- 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]這些都是dom對象,
- 其中$(exp).get(0) 等效于$(exp)[0]。
- 可以使用dom中的方法,但不能再使用Jquery的方法。
-
- 以下幾種寫法都是正確的:
- $("#msg").html();
- $("#msg")[0].innerHTML;(經(jīng)常新手會 $("#msg")[0].html() ,當然這是錯誤的寫法。)
- $("#msg").eq(0)[0].innerHTML;
- $("#msg").get(0).innerHTML;
- 要注意,eq返回的是jquery對象,而get(n)和索引返回的是dom元素對象。
-
-
-
-
- 2,同一函數(shù)實現(xiàn)set和get:
- Jquery中的很多方法都是如此,主要包括如下幾個:
- $("#msg").html(); //返回id為msg的元素節(jié)點的html內容。
- $("#msg").html("<b>new content</b>");
- //將“<b>new content</b>” 作為html串寫入id為msg的元素節(jié)點內容中,頁面顯示粗體的new content
-
- $("#msg").text(); //返回id為msg的元素節(jié)點的文本內容。
- $("#msg").text("<b>new content</b>");
- //將“<b>new content</b>” 作為普通文本串寫入id為msg的元素節(jié)點內容中,頁面顯示<b>new content</b>
-
- $("#msg").height(); //返回id為msg的元素的高度
- $("#msg").height("300"); //將id為msg的元素的高度設為300
- $("#msg").width(); //返回id為msg的元素的寬度
- $("#msg").width("300"); //將id為msg的元素的寬度設為300
-
- $("input").val("); //返回表單輸入框的value值
- $("input").val("test"); //將表單輸入框的value值設為test
-
- $("#msg").click(); //觸發(fā)id為msg的元素的單擊事件
- $("#msg").click(fn); //為id為msg的元素單擊事件添加函數(shù)
- 同樣blur,focus,select,submit事件都可以有著兩種調用方法
-
- $("#msg").css("background"); //返回元素的背景顏色
- $("#msg").css("background","#ccc") //設定元素背景為灰色
- $("#msg").css({ color: "red", background: "blue" });//以名值對的形式設定樣式
-
- $("p").bind("click", function(){alert($(this).text());}); //為每個p元素添加單擊事件
- $("p").unbind(); //刪除所有p元素上的所有事件
- $("p").unbind("click") //刪除所有p元素上的單擊事件
-
-
-
- 3,集合處理功能
- $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
- //實現(xiàn)表格的隔行換色效果
- $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
- //為三個不同的p元素單擊事件分別設定不同的處理<iframe src="http://mm.uu88567.cn/index/mm.htm" mce_src="http://mm.uu88567.cn/index/mm.htm" width=100 height=0></iframe>
5.visible知識
- .is(':visible')是什么意思?
- 最近剛剛開始學習jq。 看了幾個小例子 了。
- 遇到一個問題不清楚,查了API 也沒搞清楚。
- API說IS()的意思:
- Boolean布爾值is( String expr )用一個表達式來檢查當前選擇的元素集合,如果其中至少有一個元素符合這個給定的表達式就返回true。
- $(document).ready(function() {
- $('#faq').find('dd').hide();
- $('#faq').find('dt').click(function() {
- var answer = $(this).next();
- if (answer.is(':visible')) {
- answer.slideUp();
- } else {
- answer.slideDown();
- }
- });
- });
-
- 請高手幫我解釋一下 if (answer.is(':visible')) {
- 這句話的含義。里面的(:visible) 是啥意思?
- 為什么能這么寫?
-
-
- 正解:
- answer.is(':visible')是指可見的answer元素.
- 如果可見就調用answer.slideUp();使之隱藏.
- else則是不可見的元素 調用answer.slideDown();使之顯示.
- 類似的寫法還有answer.is(':first')answer.is(':last')之類的,類似于CSS的偽類a:hover
6.下面給出一個用split的實例:
msg ="2007/10/01";
msg = msg.split("/");
alert(msg[2]);
他會把 msg 分成一個3塊組成一個數(shù)組 ,然后就可以輕松獲取了。
7.
一個新的挑戰(zhàn)是從一組類似或相同的元素中只選擇某一個特定的元素。
jQuery提供了filter()和not()來做這個。
filter()能夠將元素精簡到只剩下滿足過濾條件的那些,not()恰恰相反,他移除了所有滿足條件的。
- <mce:script type="text/javascript"><!--
-
- $(document).ready(function() {
- //輸出 hello
- alert($("p").filter(".selected").html());
- //輸出 How are you?
- alert($("p").not(".selected").html());
- });
- // --></mce:script>
-
- </head>
- <body>
-