JQuery的基礎知識和選擇器

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");  //選取所有可見的元素.

&lt;代表< 
&gt;代表> 

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的元素




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章