JQUERY官方網站
http://jquery.com/
jquery-1.4.min.js和jquery-1.4.js的區別?
jquery-1.4.min.js--》如果服務器開啓GZip壓縮後,大小將變爲18KB,主要應用於產品和項目
jquery-1.4.js---》完整無壓縮版本,主要用於測試、學習和開發
$(document).ready(function(){});和window.onload的區別?
window.onload
必須等待網頁中的所有內容加載完畢後才能執行
在頁面代碼中不能同時編寫多個,如果有兩個,則只會輸出最後一個
沒有簡寫
$(document).ready
網頁中的所有的DOM結構繪製完畢後就執行,可能DOM元素關聯的東西並沒有加載完
可以寫多個,都會執行
可以簡寫爲: $(function(){}) $().ready
對於有些東西是需要都加載完才觸發,可以用$(widow).load(function(){})等價於window.οnlοad=function(){}
書寫規範:
對於鏈式操作,
對於同一個對象不超過3個操作的,可以直接寫成一行
對於同一個對象的較多操作,建議每行寫一個操作
對於多個對象的少量操作,可以每個對象寫一行,如果涉及子元素,可以考慮適當的縮進。
jquery對象
通過Jquery包裝DOM後產生的的對象。
如果一個對象是Jquery對象,那麼就可以使用jquery方法
如:$("#foo").html();
等同於: document.getElementById("foo").innerHTML;
如果獲取的是Jquery對象,
var $varible=Jquery對象
如果獲取的是DOM對象
var varible=Jquery對象
Jquery對象和DOM對象如何進行互相轉換呢?
1.jquery對象如何轉換爲DOM對象
(1)jquery對象是一個數組對象,可以通過INDEX的方法得到相應的DOM對象
var $cr=$("#cr");
var cr=$cr[0];
alert (cr.checked);
(2)通過jquery本身來取得
var cr=$cr.get(0);
2.DOM對象轉換成JQUERY對象
var cr=document.getElementById("cr");
var $cr=$(cr);
.is(":checked")方法確定函數是否被選中?
if ($cr.is(":checked"))
{
alert ("getMessage");
}
Jquery庫中的插件都被限制在它的命名空間中,因此和其他的javascript庫一起使用時,不會引起衝突
怎麼解決JQUERY和其他JavaScript庫中使用的衝突問題?
1.在代碼開始處調用
jQuery.noConflict();
底下用到Jqery的必須用Jquery代替原來寫的$了;
2.重定義其他字符來代替$
在代碼開始處
var $j=jQuery.noConflict();
$j("p").click();
怎麼讓Dreamweaver智能提示Jquery?
首先下載一個叫Jquery_API.mxp的插件-》
在Dewamweaver中依次選擇命令-》擴展管理-》安裝擴展-》選擇到下載的插件,就會自動安裝了
中間會有一個問題:可能你看到的擴展管理是灰色的怎麼辦?
因爲你的Dreamweaver沒有安裝擴展管理器,去下載一個Extension Manager安裝下,就OK了
如何讓VS2008智能提示Jquery?
1.首先http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
下載補丁KB958502 - JScript Editor support for “-vsdoc.js” IntelliSense doc. files
安裝後
安裝過程中可能會出現下一步無法點擊爲灰色,則需要下載VS2008SP1CHSX1512981.iso,此爲vs2008的sp1補丁,安裝這個之後再安裝上面的補丁
2
到http://docs.jquery.com/Downloading_jQuery#Download_jQuery
下載jquery-1.3.2-vsdoc2.js和jquery-1.3.2.js 如果是mini版本的,請將mini後綴取消,,並且,將jquery-1.3.2-vsdoc2.js改名爲jquery-1.3.2-vsdoc.js
否則會報更新 JScript IntelliSense 時出錯,並且將jquery-1.3.2.js和query-1.3.2-vsdoc.js的文件放在一個目錄,這下,只要你的頁面引入jquery-1.3.2.js,
界面就支持智能提示了
假如你起名爲jquery.min.js,則要將vsdoc文件名修改爲jquery.min-vsdoc.js纔可以,注意名稱的統一性
CTRL+SHIF+J 強制vs2008進行智能提示的更新
資源:
Visual Studio 2008 SP1 補丁:
http://download.microsoft.com/download/1/9/d/19d22169-a4b2-455f-8c28-ed137bd91487/VS2008SP1CHSX1512981.iso
,
jQuery相關文件(jQuery-1.3.2.js,jQuery-1.3.2-vsdoc.js):
http://docs.jQuery.com/Downloading_jQuery#Download_jQuer
y
CSS應用到網頁上有三種方式
行間樣式表、內部樣式表、外部樣式表
判斷某個元素是否存在
if ($("#demoId").length > 0) {
$("#demoId").css("color", "red");
}
怎麼同時選中不同標識的對象呢?
$("div,span,p.myClass") --->選取所有div,span和擁有class爲myClass的P標籤的一組對象
層次選擇器
$("div span")---> 選取div裏所有的span元素,選取的是後代元素
$("div>span")--->選取div元素下元素名是span的子元素,選取的是子元素
$('.one+div')--->選取class爲one的下一個div元素
$('#two~div')--->選取id爲two的元素後面的所有div兄弟元素
$("body span")和$("body>div")的區別是什麼?也就是後代元素和子元素的區別?
$("body div>選取的是body裏面所有的div標籤對象
$("body>div") 選取的是body裏面所有的第一層標籤對象裏面包含了div標籤的對象
使用$(".one").next("div")來代替$('.one+div')
使用$("#two").nextAll("div")來代替$('#two~div')---->選擇所有在two之後的DIV對象
$("#two").siblings("div") 選擇所有和two同一輩的div元素
過濾選擇器
1.基本過濾器
$("div:first") 選取所有div元素中的第一個div對象
$("div:last") 選取所有div元素中的最後一個div對象
$("input:not(.myClass)") 選取class不爲myClass的input對象
$("input:even") 選取索引是偶數的input對象
$("input:odd") 選取索引是奇數的input對象
$("input:eq(1)") 選取索引等於1的input對象
$("input:gt(1)") 選取索引大於1的input對象
$("input:lt(1)") 選取索引小於1的input對象
$(":header") 選取所有h1,h2,h3等對象
$("div:animated") 選取正在執行動畫的div元素
也可以寫爲 $(':animated').css("background","#bfa"); 選擇 當前正在執行動畫的所有元素.
2.內容過濾選擇器
$('div:contains(di)').css("background","#bbffaa"); //選取含有文本"di"的div元素.
$('div:empty').css("background","#bbffaa"); //選取不包含子元素(或者文本元素)的div空元素.
$('div:has(.mini)').css("background","#bbffaa"); //選取含有class爲mini元素 的div元素
$('div:parent').css("background","#bbffaa"); //選取含有子元素(或者文本元素)的div元素.
3.可見性過濾器
$('body :hidden') 不可見的元素有
$('div:hidden')不可見的div元素
$('input:hidden') 文本隱藏域
$('div:visible').css("background","#FF6500"); //選取所有可見的元素.
<代表<
>代表>
4.屬性過濾器
$('div[title]').css("background","#bbffaa");//選取含有 屬性title 的div元素.
$('div[title=test]').css("background","#bbffaa");//選取 屬性title值等於 test 的div元素.
$('div[title!=test]').css("background","#bbffaa"); //選取 屬性title值不等於 test 的div元素.
$('div[title^=te]').css("background","#bbffaa");//選取 屬性title值 以 te 開始 的div元素.
$("div[title$=est]").css("background","#bbffaa"); //選取 屬性title值 以 est 結束 的div元素.
$("div[title*=es]").css("background","#bbffaa"); //選取 屬性title值 含有 es 的div元素.
$("div[id][title*=es]").css("background","#bbffaa");//組合屬性選擇器,首先選取有屬性id的div元素,然後在結果中 選取屬性title值 含有 es 的元素.
5.子元素過濾選擇器
$('div.one :nth-child(2)').css("background","#bbffaa"); //選取每個class爲one的div父元素下的第2個子元素."
$('div.one :first-child').css("background","#bbffaa");//選取每個class爲one的div父元素下的第一個子元素
$('div.one :last-child').css("background","#bbffaa");//選取每個class爲one的div父元素下的最後一個子元素
$('div.one :only-child').css("background","#bbffaa"); //果class爲one的div父元素下的僅僅只有一個子元素,那麼選中這個子元素
nth-child(index)與eq(index)的區別?
eq只能代表一個對象,他的index從0開始
而nth-child可代表一個對象組,他的index是從1開始的
注意:
$('div.one :nth-child(even)')//能去每個父元素下的索引值是偶數的
$('div.one :nth-child(odd)')//能去每個父元素下的索引值是奇數的
$('div.one :nth-child(2)')
$('div.one :nth-child(3n)')//能去每個父元素下的索引值是3的倍數的 n從0開始
$('div.one :nth-child(3n+1)')//能去每個父元素下的索引值是3n+1的 n從0開始
6.表單對象屬性過濾選擇器
$("#form1 input:enabled").val("這裏變化了!"); //對錶單內 可用input 賦值操作.
$("#form1 input:disabled").val("這裏變化了!"); //對錶單內 不可用input 賦值操作.
$("select :selected").text()//使用:selected選擇器,獲取下拉框選中的內容
var n = $("input:checked")//使用:checked選擇器,來操作多選框
表單選擇器
var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");
var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");
$("div") .append(" 有" + $alltext.length + " 個( :text 元素)<br/>")
.append(" 有" + $allpassword.length + " 個( :password 元素)<br/>")
.append(" 有" + $allradio.length + " 個( :radio 元素)<br/>")
.append(" 有" + $allcheckbox.length + " 個( :checkbox 元素)<br/>")
.append(" 有" + $allsubmit.length + " 個( :submit 元素)<br/>")
.append(" 有" + $allimage.length + " 個( :image 元素)<br/>")
.append(" 有" + $allreset.length + " 個( :reset 元素)<br/>")
.append(" 有" + $allbutton.length + " 個( :button 元素)<br/>")
.append(" 有" + $allfile.length + " 個( :file 元素)<br/>")
.append(" 有" + $allhidden.length + " 個( :hidden 元素)<br/>")
.append(" 有" + $allselect.length + " 個( select 元素)<br/>")
.append(" 有" + $alltextarea.length + " 個( textarea 元素)<br/>")
.append(" 表單有 " + $inputs.length + " 個(input)元素。<br/>")
.append(" 總共有 " + $AllInputs.length + " 個(:input)元素。<br/>")
.css("color", "red")
$("form").submit(function () { return false; }); // return false;不能提交.
選擇器中的特殊符號問題:
假如:
<div id="id#b"></div>
<div id="id[1]"></div>
那麼jquery怎麼獲取呢?
$("#id//#b")
$("#id//[b//]")
空格問題?
var $t_a=$(".test :hidden")//選取class爲test的元素裏面的隱藏元素
var $t_a=$(".test:hidden")//選取隱藏的class爲test的元素