1:下面這個函數只要在DOM載入就緒(獲取文檔對象就緒的時候)就能被執行，
而window.onload需要在頁面圖片文件加載完之後才能執行.
$(document).ready(function(){//可用jQuery(document).ready(function()代替 或者 $(function()
// 你的代碼
});
2:鼠標點擊時的觸發
$("p").click(function(){
alert("hello world");
});
補充：
a:$("p")獲取網頁中所有標籤爲p的 <p>我也是一個段落文本,單擊我也彈出hello world .---單擊我</p>
b:$("#cssrain")獲取網頁中所有ID爲cssrain的<div id="cssrain"></div> <input type="text" id="cssrain" value="測試"/>
c:$(".cssrain")獲取網頁中所有class爲cssrain的<div class="cssrain"></div>
3:增加或移除元素的css class
$("a").addClass("test");
$("a").removeClass("test");
4:show()和html()用法
$("a").addClass("test").show().html("cssrain");
5:$(this)和hide()
$("a").click(function(){
$(this).hide("slow");//$(this)就是給A註冊事件後當前正在操作的哪個對象
return false;//爲什麼有return false，加了使鏈接失效. <a href="http://www.163.com">單擊</a>
});
6:頁面上一個div緩緩隱藏,再點擊緩緩展開
slideToggle(speed, callback)//speed參數取值 ("slow", "normal","fast")
$(document).ready(function(){
$("#head").click(function(){
$("#content").slideToggle("slow",function(){ alert("Hello,cssrain.."); } );
});
});
7:append和appendTo
$(document).ready(function(){
$("#head2").click(function(){
$("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>").appendTo("#ccc");
});
$("#head1").click(function(){
$("#rain").append("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>");
});
});
8:table滑過變色,隔行變色 hover(over, out)
$(document).ready(function() {
$("#orderedlist tbody tr").hover(function() {
// $("#orderedlist li:last")最後一行 ** $("#orderedlist li:even")偶數行 ** $("#orderedlist li:odd")奇數行
或者$("#orderedlist").find("li").each(function(i){$(this).hover(function() {});});
$(this).addClass("blue");
}, function() {
$(this).removeClass("blue");
});
});
或者:
$(document).ready(function(){
$("#orderedlist tbody tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
});
9:toggle用法
a:如果元素是可見的，切換爲隱藏的；如果元素是隱藏的，切換爲可見的。
$(document).ready(function(){
$("input").click(function(){
$("p").toggle();
})
});
<input type="button" value="切換"><p>這裏本來是 顯示的。</p><p style="display: none">這裏本來是隱藏的</p>
b:每次點擊時切換要調用的函數
$(document).ready(function(){
$("input").toggle(function(){
$("p").hide('slow');
},function(){
$("p").show('fast');
});
});
10:parent()和next()用法
next說明:取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。這個函數只返回後面那個緊鄰的同輩元素，而不是後面所有的同輩元素。
可以用一個可選的表達式進行篩選。
//$("p").next(".selected").html() );
//this.parent()是input前面的td * this.parent().parent()獲取的是tr * this.parent().parent().parent()獲取的是table * this.parent().next()獲取的是td相臨的td
$(document).ready(function() {
$("#btn1").click(function(){
alert($(this).parent().next().html());
});
});
<table>
<tr>
<td><input id="btn1" class="btn" type="button" value="test"/></td>
<td>some text</td>
</tr>
</table>
11:load()用法
$(function() {
// $("#feeds").load("FAQ1.html")
$("#feeds").load("c.txt",function() { alert("load is done");}
);
});
12:animate函數,回顧一下slideToggle
用於創建自定義動畫的函數。這個函數的關鍵在於指定動畫形式及結果樣式屬性對象
這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。
$(document).ready(function(){
$("a").toggle(function(){
$(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
},function(){
$(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
});
});
13:tableSorter()函數*/jQ學習第一季/jQ學習第一季/demo16-表格排序
14:跟jquery沒關係
狀態欄顯示的跟實際跳轉的地址不一樣(還有人會這麼無聊)
<a onMouseOver='window.status="http://www.cssrain.cn";return true;' onMouseOut='window.status="Done"; return true;'href="http://www.cssrain.cn/article.asp?id=187"target="_blank">Link Text
Here</a>
15:siblings() 得到所有匹配元素集合中各個元素的所有兄弟元素集合。返回匹配元素集合
//下面的例子中會取得所有跟$('tr.parent')爲兄弟元素並且class='.child-'+this.id
$(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","點擊這裏展開/關閉")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
16:jquery的八種選擇器
a:基本選擇器(3種): $("標籤名"),$("#id名"),$(".class名")
b:組選擇器: $("div,#test1,p,.test2,#test3")
c:後代選擇器:$("div .test")
d:子選擇器:$("div>.test") 子選擇器只能選擇第一代子代.不處理深層嵌套
$("div>.test")
<div><p class="test"></p></div>對這裏的p段落標籤有效.但對
<div><p><p class="test"></p></p></div>對這裏的p段落標籤無效,這裏要用$("div .test)
e:臨近選擇器: 選取下一個兄弟節點.如:$("div +#test"),id爲test的的節點必須是div的下一個兄弟節點.
<div></div><p id="test"></p>在$("div + #test")中能取到p段落節點 <div></div><p></p><p id="test"></p>則不能取到
f:屬性選擇器:
$("mix[@attr]"):選取所有該mix且具有attr屬性的節點
$("mix[@attr=a_value"]):選取所有該mix且具有attr屬性並滿足屬性值爲a_value的節點
$("mix[@attr^=a_value_head"]):attr屬性的屬性值是以a_value_head開頭的
$("mix[@attr$=a_value_end"]):attr屬性的屬性值是以a_value_end結尾的
$("mix[@attr*=a_value"]):attr屬性的屬性值中包含a_value
g:進一步選擇器:
這個名稱是我自己起的,其實選擇器組合都有進一步的意思,你明白後面所介紹的知識即可.
具有限定子節點選擇器:$("mix1[mix2]"):返回包含mix2的mix1節點.如:$("div[a]"):包含a標籤的div.
這個和$("div a")不相同.後者表示div中的a標籤,返回的是a標籤對象,前者返回的是div標籤對象
冒號限定結點選擇器:$("mix:condition"):mix標籤,並且滿足限定條件.
E:root:類型爲E,並且是文檔的根元素
E:nth-child(n):是其父元素的第n個類型爲E的子元素 ,基數從1開始
E:first-child:是其父元素的第1個類型爲E的子元素
E:last-child:是其父元素的最後一個類型爲E的子元素
E:only-child:且是其父元素的唯一一個類型爲E的子元素
E:empty:沒有子元素（包括text節點）的類型爲E的元素
E:enabled
E:disabled:類型爲E,允許或被禁止的用戶界面元素
E:checked:類型爲E,處於選中狀態的用戶界面元素（例如單選按鈕或複選框）
E:visible:選擇所有可見元素(display值爲block或visible,visibility值爲visible元素,不包括hide域)
E:hidden:選擇所有隱藏元素(非Hide域,且display值爲block或visible,visibility值爲visible的元素)
E:not(s):類型爲E,不匹配選擇器s
E:eq(n),E:gt(n),E:lt(n):元素限定
E:first:相當於E:eq(0)
E:last:最後一個匹配的元素
E:even:從匹配的元素集中取序數爲偶數的元素
E:odd:從匹配的元素集中取序數爲奇數的元素
E:parent:選擇包含子元素（包含text節點）的所有元素
E:contains('test'):選擇所有含有指定文本的元素
表單選擇器:
E:input:選擇表單元素(input,select,textarea,button)
E:text:選擇所有文本域(type="text")
E:password:選擇所有密碼域(type="password")
E:radio:選擇所有單選按鈕(type="radio")
E:checkbox:選擇所有複選框(type="checkbox")
E:submit:選擇所有提交按鈕(type="submit")
E:image:選擇所有圖像域 (type="image")
E:reset:選擇所有清除域(type="reset")
E:button:選擇所有按鈕(type="button")
當然包括E:hidden
H:$(".bmo",".dmo")
<div class="dmo"><span class="ado"><div class="bmo">aaa</div></span></div>
8.xPath路徑查詢:
先介紹下xPath的語法:
/:選取根節點
//:選取文檔中所有符合條件的節點,不管該節點位於何處
.:選取當前節點
..:選取單前節點的父節點
@:選取屬性,這個在之前說過了(屬性選擇器)
nodename:選取節點下的所有節點
jQuery中的應用:
根節點是很少用到的,常用的如下面的例子:
$("div/p")相當於$("div>p")
$("div//p")相當於$("div p")
$("//div/../p"):所有div節點的父節點下的p標籤
還有相對路徑的寫法以及支持的Axis選擇器,還不是會應用,不介紹了...已經一大堆了
$的其他用法:
$(html節點):根據提供的原始HTML標記字符串,動態創建由jQuery對象包裝的DOM元素.如:
$("<div><p>Hello</p></div>").appendTo("#body");//把<div><p>Hello</p></div>添加到body元素中
$(document):網頁文檔對象
$(document.body):網頁body對象,和$("body")是一樣的
$(函數):DOM載入後就執行該函數.所以$(document).ready()可以寫做$()
$(選擇器部分,選擇器來源):這個舉例說明
$("input:radio",document.forms[0]):在文檔的第一個表單中,搜索所有單選按鈕
$("div",xml.responseXML):查詢指定XML文檔中的所有div元素
選擇器來源可以是:作爲上下文的DOM元素,文檔或jQuery對象
還有兩個:$.extend(prop)和$.noConflict()是和插件以及和其他庫兼容的使用,以後再寫
17:jQuery學習筆記24--單選框/複選框.
$(function(){
$("#form1").submit(function(){
if($("#form1 input:checked")){
alert($("#form1 input:checked").val());
}
return false; //不提交
});
});
$(document).ready(function(){
$(".btn").click(function(){
$("#divPosType input:checked").each(function(){
// alert(this.value);
alert($(this).val());
}
)
});
});
$(document).ready(function(){
$("#test").click(function(){
$("input[@type=checkbox]").each(function(i){
// 此時，this 是 dom裏的對象，而不是jQuery裏的 $(this)
if(this.checked) alert(this.value);
});
});
});
$(document).ready(function(){
$("#test").click(function(){
$("input[@type=checkbox]").not("[@checked]").each(function(i){
alert(this.value);
});
});
});
18:end()，eq,gt,lt()
$(document).ready(function(){
$("input").click(function(){ /
alert($("#css").find("#rain").end().html());
});
});
可以end()結束的方法有，add()，children()，eq()，filter()，find()，gt()，next(),not(),parent(),parents(),siblings()
$(document).ready(function(){
//第2個 p : alert("eq="+ $("p").eq(1).text()); alert( $("p:eq(1)").text());
//第3個p之後的p注:會把所有滿足條件的p都合併起來 alert("gt="+ $("p:gt(2)").text());//alert( $("p").gt(2).text());
//第2個p以及之前的p 即第1個p和第2個p alert("lt="+ $("p:lt(2)").text()); });
19:filter(),not()
一個新的挑戰是從一組類似或相同的元素中只選擇某一個特定的元素。
jQuery提供了filter()和not()來做這個。filter()能夠將元素精簡到只剩下滿足過濾條件的那些，not()恰恰相反，他移除了所有滿足條件的。
$(document).ready(function() {
alert($("p").filter(".selected").html());
alert($("p").not(".selected").html());
});
19:split()
<span class="sale">Out Sale: ￥160<br />Deal Price: ￥120</span>
$(document).ready(function(){
$("input[@value=btn1]").click(function(){
//以￥分割
alert($("span.sale").text().split("￥")[2]+"||"+$("span.sale").text().split("￥")[1]+"||"+$("span.sale").text().split("￥")[0]);
});
});
注:但用AJAX取回動態數據進行篩選的時候，必須同時指定標籤類型和ID，才能正常進行篩選，要不然在Firefox下會出錯。
錯誤的：var stext = $(data).filter('#content').html();
正確的：var stext = $(data).filter('div#content').html();
20:is(':visible') $("input").is(':first') $("input").is(':last')
$("input").is(':visible')是指可見的input元素.
如果可見就調用$("input").slideUp();使之隱藏.
else則是不可見的元素 調用$("input").slideDown();使之顯示.
21:attr()
attr(name) //獲取屬性的值
attr(name,value) //設置屬性的值
attr(namefn) //設置屬性的函數值
$(document).ready(function() {
$("#formstylecontrols select").change(function(){
$("p").css($(this).attr("id"),$(this).val());
//這裏用了一個技巧：把select的ID和要設置的CSS屬性值一致 , 就可以一個語句實現三個select的功能
});
});
22:iframe
1.在父窗口中操作 選中IFRAME中的所有單選鈕
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
2.在IFRAME中操作 選中父窗口中的所有單選鈕
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
23:表格元素編輯.
$(function(){
$(".fillform tr").click(function(){
$(this).find("td").each(function(i){
$("form>input").eq(i).val($(this).text());
} );})
//鼠標形狀： 手型。
$(".fillform tr").mouseover(function(){$(this).css("cursor","hand")});
});
24:$.get異步獲取
$(function(){
$.get("bbb.html",function(rt){
$("#main").html(rt);
$("#bbb").click(function(){
alert('cssrain!!!');
})
})
})
25:Li循環滾動
function scroll_news(){
$(function(){
$('#dvmq li').eq(0).fadeOut('slow',function(){
// alert($(this).clone().html());
//克隆:不用克隆的話，remove()就沒了。
$(this).clone().appendTo($(this).parent()).fadeIn('slow');
$(this).remove();
});
});
}
setInterval('scroll_news()',1000);
26:簡單的申縮效果--見簡單菜單伸縮.htm
*******************
$(document).ready(function(){
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
*********************
$(document).ready(function(){
$("dd:not(:first)").hide(); //隱藏 dd不是第一個的. E:first:相當於E:eq(0)
$("dt a").click(function(){
if( $(this).parent().next().is(':visible') ){
}else{
$("dd:visible").slideUp("fast");
$(this).parent().next().slideDown("fast");
}
return false;
});
});
27：editplace實時編輯 見editplace實時編輯.html
28: jQuery(function(){ }); ==jQuery(document).ready(function(){ });
(function(){ })(jQuery)；用於存放開發插件的代碼，執行其中代碼時DOM不一定存在
(function(){do someting})();//這個你就理解爲定義一個匿名函數並立即執行帶參數的話就這樣：(function(形參){do someting})(實參); jQuery.extend(object); 爲擴展jQuery類本身.爲類添加新的方法。
閉包的好處：
不增加額外的全局變量，
執行過程中所有變量都是在匿名函數內部。
jQuery.fn.extend(object);給jQuery對象添加方法。
見實例滾屏效果.htm
29:複選框全選，反選，取消選擇
$(function() {
//全選
$("#selectall").click(function() {
$("input[@name='shareuser']").each(function() {
$(this).attr("checked", true);
});
});
//反選
$("#fanall").click(function() {
/*$("input[@name='shareuser']").each(function() {
if($(this).attr("checked")) {
$(this).attr("checked", false);
} else {
$(this).attr("checked", true);
}
});*/
$('input[name="checkbox"]').each(function(){
$(this).attr("checked",!$(this).attr("checked"));
});
});
//取消全部
$("#deselectall").click(function() {
$("input[@name='shareuser']").each(function() {
$(this).attr("checked", false);
});
});
//alert
$("#alertall").click(function() {
$("input[@name='shareuser']").each(function() {
if($(this).attr("checked")){
alert($(this).val());
}
});
});
});
30: 表單focus和blur樣式
$(document).ready(function(){
if ($.browser.msie){//判斷是不是IE
$("input[@type='text'], input[@type='password'], textarea").focus(function(){
$(this).addClass("ie_focus")}).blur(function(){
$(this).removeClass("ie_focus");
});
}
})
31:集合處理功能
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//實現表格的隔行換色效果
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//爲三個不同的p元素單擊事件分別設定不同的處理
32:判斷瀏覽器
$(function() {
if($.browser.msie) {
$( function() { alert("this is msie"); });
}else if($.browser.safari){
$( function() { alert("this is safari!"); });
}else if($.browser.mozilla){
$( function() { alert("this is mozilla!"); });
}else if($.browser.opera){
$( function() { alert("this is opera"); });
}else{
$( function() { alert("i don't konw!"); });
}
});
33:jQuery的衝突問題
很多時候我們自己定義了$(id)方法來獲取一個元素，或者其他的一些js類庫如prototype也都定義了$方法，
如果同時把這些內容放在一起就會引起變量方法定義衝突，Jquery對此專門提供了方法用於解決此問題。
使用jquery中的jQuery.noConflict();方法即可把變量$的控制權讓渡給第一個實現它的那個庫或之前自定義的$方法。
之後應用Jquery的時候只要將所有的$換成jQuery即可，如原來引用對象方法$("#msg")改爲jQuery("#msg")。
如：
jQuery.noConflict();
// 開始使用jQuery
jQuery("div p").hide();
// 使用其他庫的 $()
$("content").style.display = 'none';
下面更牛:
$(function() {
var cssrain=jQuery.noConflict(true); //將變量$的控制權讓渡給其他庫。這樣可以確保jQuery不會與其他庫的$對象發生衝突。
alert(cssrain("div").html());//正常 //alert($("div").html());//報錯
});
34:index
35:迭代函數
$(function() {
$.each( ["#455","#aaa","#ddd"], function(i, n){
$("#c"+i).css("background",n);
});
});
36:在JQuery中，AJAX有三種實現方式：$.ajax() , $.post , $.get()。
首先我們看$.get():
$.get("test.jsp",
{ name: "cssrain", time: "2008/01/21" }, //要傳遞的數據
function(data){
alert("返回的數據: " + data);
}
)
然後看$.post():
跟$.get()格式一樣.
$.post("test.jsp",
{ name: "cssrain", time: "2008/01/21" }, //要傳遞的數據
function(data){
alert("返回的數據: " + data);
}
)
上面2種方式的區別應該就是 請求方式不同(一個get 一個post).
最後我們看$.ajax():
$.ajax({
url:'Accept.jsp',
type:'post', //數據發送方式
dataType:'html', //接受數據格式 (這裏有很多,常用的有html,xml,js,json)
data:'text='+$("#name").val()+'&date='+new Date(), //要傳遞的數據
error: function(){ //失敗
alert('Error loading document');
},
success: function(msg){ //成功
alert( "Data Saved: " + msg );
}
});
*********************************************************************************************************
$.ajax({
url:'Accept.jsp',
type:'post', //數據發送方式
dataType: 'xml', // 注意這裏是xml哦 ，不是html ...( html比較簡單,所以我拿xml做下例子,解釋下 )
data:'text='+$("#name").val()+'&date='+new Date(), //要傳遞的數據
timeout: 2000, //設置本地超時 .( 毫秒)
error: function(){
alert('Error loading XML document');
},
success: function(xml){
$(xml).find("student").each(function(){
var item_text = $(this).text();
// alert($("name" , xml).text()); //選擇器注意下 寫法
$('<li></li>').html(item_text).appendTo('ol');
});
}
/*
success: function(xml){
$(xml).find("student").each(function(i){
var id=$(this).children("id"); //取對象
var id_value=$(this).children("id").text(); //取文本 或者 $("id" , xml).text();
alert(id_value);//這裏就是ID的值了。
alert($(this).attr("email")); //這裏能顯示student下的email屬性。
$('<li></li>').html(id_value).appendTo('ol');
});
}
*/
});
String text=request.getParameter("text"); //獲取傳來的參數
response.setContentType("text/xml"); //注意，由於你是以xml形式傳遞過來的，所以這裏必須寫。
out.print("<?xml version=/"1.0/" encoding=/"UTF-8/"?>");
out.print("<student>");
out.print("<name>"+text+"</name>");
out.print("</student>");
注:serialize()函數的使用，prototype中也有.--作用是將參數連接起來
37:下拉框,單選框,多選框整理
1,下拉框:
var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜單的選中項的文本(注意中間有空格)
var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜單的選中項的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜單的選中項的ID屬性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option
稍微解釋一下:
1.select[@name='country'] option[@selected] 表示具有name 屬性，
並且該屬性值爲'country' 的select元素 裏面的具有selected 屬性的option 元素；
可以看出有@開頭的就表示後面跟的是屬性。
2,單選框:
$("input[@type=radio][@checked]").val(); //得到單選框的選中項的值(注意中間沒有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //設置單選框value=2的爲選中狀態.(注意中間沒有空格)
3,複選框:
$("input[@type=checkbox][@checked]").val(); //得到複選框的選中的第一項的值
$("input[@type=checkbox][@checked]").each(function(){ //由於複選框一般選中的是多個,所以可以循環輸出
alert($(this).val());
});
$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判斷是否已經打勾
38:下拉選擇框
$(document).ready(function (){
$('#select1').change(function (){
$.ajax({
url:'cssrain.jsp',
type:'post', //數據發送方式
dataType:'xml', //接受數據格式
data:'id=1&text='+$("select[@id='select1'] option[@selected]").text()+'&date='+new Date(), //要傳遞的數據
error:function(json){
alert( "not lived!");
},
success: function(xml){
$("#select2").html('');//清空2號下拉框
$(xml).find("name").each(function(){
var id=$(this).attr("id"); //獲取返回的ID
var name=$(this).text(); //獲取返回的NAME
$('<option value='+id+'>'+name+'</option>').appendTo('#select2'); //添加下拉框
$("#select2").attr('disabled','') //2號下拉框可用
});
}
});
});
});
39:event.preventDefault(); // 阻止默認的行爲 ,這個例子把超鏈接 阻止了,當然此時也可以用 return false;
轉自：sutku的專欄