Jquery 知識點總結

**DOM對象和jquery對象互相轉化。

var jq= (“#jq”);

var dom= jq[0];vardom=document.getElementById(“dom”);var jq= (dom);∗∗jquery選擇器。 (this) 目前元素

$(“p”) 所有

元素

(“input”)所有input元素 (“.intro”) 所有 class=“intro” 的元素

$(“p.intro”) 所有 class=”intro” 的

元素

(“#intro”)  id=”intro” 的第一個元素(“ul > li”) ul下的所有li節點

$(“ul li:first”) 每個

• 的第一個

• 元素

  ("[href =’.jpg’]”) 所有帶有以 “.jpg” 結尾的 href 屬性的屬性

  $(“div#intro .head”) id=”intro” 的 元素中的所有 class=”head” 的元素

  $(li[a:contains(‘Register’)]”) 内容包含Register的 元素

  (“input[@name=bar]”)name是bar的元素 (“input[@type=radio][@checked]”) type是radio的元素

  (“li”).not(“ul”)li下沒有包含ul節點的節點元素 (“span[@id]”) 包含id屬性的元素

  $(“[@id=span1]”) id為span1的節點元素

2、Jquery事件器的介紹  

$(selector).click()  被選元素的點選事件  
$(selector).dblclick()   被選元素的輕按兩下事件  
$(selector).focus()  被選元素的獲得焦點事件  
$(selector).mouseover()  被選元素的滑鼠懸停事件  
$(selector).css();   被選元素的CSS事件  
$(selector). hide();     被選元素的隐藏事件  
$(selector). show('slow');   被選元素的顯示事件  
           

<style type="text/css">
  div ,span {
  width:px;
  height:px;
  margin:px;
  background:#aaa;
  border:#000 px solid;
  float:left;
  font-size:px;
  font-family:Verdana;
  }
  div.mini{
  width:px;
  height:px;
  background-color:#aaa;
  font-size:px;
  }
  div.hide{
  display:none;
  }
  </style>



<script type="text/javascript">

//基本選擇器。
$(function(){
$(function(){
$('#one').css("background","#bbffaa");
$('.one').css("background","#bbffaa");

//層次選擇器
$('body div').css("background","#bbffaa");
$('body >div').css("background","#bbffaa");
$('.one+div').css("background","#bbffaa");//=$('#two').next('div').css("background","#bbffaa")
$('#two').nextAll('div').css("background","#bbffaa");//=$('#two~div').css("background","#bbffaa");
//選取class為one 所有的同輩元素div，無論前後位置.
$('.one').siblings('div').css("background","#bbffaa");
//基本過濾選擇器
//改變第一個<div>元素的背景色
$('div:first').css("background","#bbffaa");
//改變最後一個的<div>元素的背景色
$('div:last').css("background","#bbffaa");
//改變class不為one的<div>元素的背景色
$('div:not(.one)').css("background","#bbffaa");
//改變索引值為偶數的<div>元素的背景色
$("div:even").css("background","#bbffaa");
//改變索引值為奇數的<div>元素的背景色
$("div:odd").css("background","#bbffaa");
//改變索引值等于3的<div>元素的背景色
$("div:eq(3)").css("background","#bbffaa");
//改變索引值大于3的<div>元素的背景色
$("div:gt(3)").css("background","#bbffaa");
//改變索引值小于3的<div>元素的背景色
$("div:lt(3)").css("background","#bbffaa");
//改變所有标題元素<div>元素的背景色
$(":header").css("background","#bbffaa");
//改變正在執行動畫的元素的背景色
$(":animated").css("background","#bbffaa");
//改變目前擷取焦點的元素的背景色
$(":focus").css("background","#bbffaa");

//内容過濾選擇器-----------------------------------------------
//改變含有文本'di'的<div>元素的背景色
$("div:contains(di)").css("background","#bbffaa");
//改變不包含子元素的的<div>空元素的背景色
$("div:empty").css("background","#bbffaa");
//改變含有class為mini的<div>元素的背景色而不是class為mini 的div的背景色.
$("div:has('.mini')").css("background","#bbffaa");
//改變含有子元素的<div>元素的背景色
$("div:parent").css("background","#bbffaa");

//可見性過濾選擇器--------------------------------
//改變所有可見的<div>元素的背景色
$("div:visible").css("background","#bbffaa");
//顯示隐藏的<div>元素并改變他的背景色
$("div:hidden").css("background","#bbffaa").show();

//屬性過濾選擇器------------------------------------
//改變含有屬性title的<div>背景色.
$("div[title]").css("background","#bbffaa");
//改變屬性title值等于test的<div>元素背景色.
$("div[title=test]").css("background","#bbffaa");
//改變屬性title值不等于test的<div>元素背景色.
$("div[title!=test]").css("background","#bbffaa");
//改變屬性title值以“te”開始的<div>元素背景色.
$("div[title^=te]").css("background","#bbffaa");
//改變屬性title值含有“es”的<div>元素背景色.
$("div[title*=es]").css("background","#bbffaa");
//改變屬性title值等于“en”或以en為字首（該字元串後跟一個連字元'-'）的<div>元素背景色.
$("div[title|=en]").css("background","#bbffaa");
//改變屬性title用空格分隔的值中包含字元uk的<div>元素背景色.
$("div[title~=uk]").css("background","#bbffaa");

//子元素過濾選擇器-----------------------------------
//改變每個class為one的<div>父元素下的第二個子元素的背景色.
$("div.one:nth-child(2)").css("background","#bbffaa");
//改變每個class為one的<div>父元素下的第1個子元素的背景色.
$("div.one :first-child").css("background","#bbffaa");
//改變每個class為one的<div>父元素下的隻有1個子元素的背景色.
$("div.one :only-child").css("background","#bbffaa");
});

  </script>


<div id="one" class="one">
id為one，class為one的div。
    <div  class="mini">class 為mini</div>
</div>

<div id="two" class="one" title="testle為other的div   </div>
    <div  class="mini" title="test">class為mini，">
    id為two，class為one,title 為test的div。
    <div  class="mini" title="other">class為mini，tittitle為test的div   </div>
</div>
<div  class="one">
    <div  class="mini"> class為mini  </div>
    <div  class="mini"> class為mini  </div>
    <div  class="mini"> class為mini  </div>
    <div  class="mini"></div>
</div>


<div  class="one">
    <div  class="mini"> class為mini  </div>
    <div  class="mini"> class為mini  </div>
    <div  class="mini"> class為mini  </div>
    <div  class="mini" title="tesst">   class為mini,title為tesst的div  </div>
</div>

<div style="display:none;" class="none">
    style 的display為none的div。

</div>

<div  class="hide"> class為"hide"的div        
   <h1>标題元素</h1>
    <p>p标簽</p></div>
<div id="" class="">
    包含input 的type為"hidden"的div<input type="hidden" size="8">

</div>
<span id="mover">正在執行動畫的span。</span>
           

**

選擇器中含有空格的注意事項：對于過濾選擇器加上空格，他所擷取的是其子元素的過濾。而對于過濾選擇器沒有加上空格的來說

，他所擷取的是其自身元素的過濾。**