1.從$開始  
對于熟悉prototype的朋友，$符號應(yīng)該很熟悉,   

prototype: var element = $('eleId')
jquery: var element = $('#eleId')
DOM: var element = document.getElementById('eleId')
以上三種選擇方式是等價的,相比prototype來說jquery多了個#號
例:

$('#j1′).html()

<div id=“j1“>Hello, jQuery!</content>

2.通過xpath+css來獲取你想要的…
   1).
在這段例子中我們需要用到的HTML代碼 


<div class=”contentToChange”>
    <p class=”alert”>警告!警告!警告!警告!</p>
    <p class=”firstParagraph”>我是第一段</p>
    <p class=”secondParagraph”>第二段,哎,火箭輸球了 0比33!火箭替補釘上恥辱柱 <em>姚麥</em>身邊再無可用之人頻繁失誤成姚明致命毒藥 板凳消失是火箭落后主因</p>
</div>
jquery代碼: 


//獲取div.contentToChange下p標(biāo)記數(shù)組長度
  alert($('div.contentToChange p').size()) 

//通過調(diào)整高度來顯示/隱藏所有匹配的元素,這里的匹配元素是p.firstParagraph
  $('div.contentToChange p.firstParagraph').slideToggle('slow');

//找到匹配所有div.contentToChange下所有css不為alert的p元素,并在其后面添加文字  
  $('div.contentToChange p:not(.alert)').append('<strong class=“addText“>這是新加的文字</strong>‘);

//找到所有為strong元素且css為addText的元素,然后刪除
  $('strong.addText').remove();

//找到P標(biāo)記下css為secondParagraph的元素,然后漸隱
  $('div.contentToChange p.secondParagraph').hide('slow');

//找到div.contentToChange下所有em元素,然后通過jquery中的css方法改變它們的顏色和字體
  $('div.contentToChange em').css({color:“#993300“,fontWeight:“bold“});

//添加css樣式
  $('div.contentToChange p.secondParagraph').addClass('new‘)

//刪除css樣式
  $('div.contentToChange p.secondParagraph').removeClass('new‘);

   2).

在這段例子中我們需要用到的HTML代碼:
<div id=”jqdt” style=”width: 400px; padding: 1em; border: 1px solid #000″>
 <p class=”goofy”> 這個 <em>段落</em> 包括了一些css屬性為”groof”的 <strong>文本</strong>, 它還具有一個 <a href=”http://www.englishrules.com” class=”external text” title=”http://www.englishrules.com”>外部連接</a>, 一些 <code>$(代碼)</code>, 和一個超連接屬性是以 <a href=”#dt-link3_same-page_link” title=”">#打頭的超連接</a>. </p>
 <ol>
  <li>list item 1 with dummy link to <a href=”/action/edit/Silly.pdf” class=”new” title=”Silly.pdf”>silly.pdf</a></li>
  <li class=”groof”><em>list <strong>item</strong> 2</em> with class=”<strong>groof</strong>“</li>
  <li>list item 3<span style=”display: none;”> SURPRISE!</span></li>
  <li><strong>list item 4</strong> with silly link to <a href=”/action/edit/Silly.pdf_silly.pdf” class=”new” title=”Silly.pdf silly.pdf”>silly.pdf silly.pdf</a></li>
  <li><a href=”contains.php”>支持火箭</a>,支持MM!</li>
 </ol>
</div>
jquery代碼

//獲取第一個list item
$('#jqdt ol li:eq(0)')
//等價于
$('#jqdt').find('li:eq(0)') //以下同

//獲取所有偶數(shù)行的list item
$('#jqdt ol li:even')

//獲取索引小于3的list item
$('#jqdt ol li:lt(3)')

//獲取所有l(wèi)i中css不為groof的list item
$('#jqdt ol li:not(.groof)')

//獲取P標(biāo)記下所有超連接屬性值以'#'打頭的元素
$('p a[@href*=#]')

//獲取所有code元素和css為groof的li元素的集合
$('#jqdt code, li.groof')

//先獲取ol下css屬性為groof的A, 然后找到節(jié)點A下的一級子節(jié)點strong元素
$('#jqdt ol .groof > strong')

//首先找到所有以list item作為自己的前一節(jié)點的list item元素(所以不會選擇到第一個list item,因為它的前面沒有l(wèi)ist item節(jié)點了).然后在這些元素中找到超連接屬性值以為'pdf'結(jié)尾的一級子節(jié)點
$('#jqdt ol li + li > a[@href$=pdf]')

//找到所有已隱藏的span元素
$('span:visible')

//找到超連接中包含火箭字樣的元素
$('li a:contains(“火箭“)')

 
注：
$('#jqdt ol.groof > strong') 其中的>代表只訪問下一級子節(jié)點中包含strong的元素，
如果改為 $('#jqdt ol.groof strong') 則訪問所有下級子節(jié)點中的strong元素，包括子節(jié)點的子節(jié)點等。 


 3).
常用的自定義選擇器
  :eq(0) 選擇索引等于0也就是第一個元素

  :gt(4) 選擇所有索引大于4的元素
  :lt(4) 選擇所有索引小于4的元素
  :first 等價于 :eq(0) 
  :last 選擇最后一個元素
  :parent 選擇所有含有子節(jié)點的元素 (including text). 
  :contains('test') 選擇含有指定文本的元素 
  :visible 選擇所有可見元素(包含:display:block|inline,或者visibility為visible的元素,但是不包括表單元素(type hidden)
  :hidden 選擇所有隱藏元素(包含:display:none,或者visibility為hidden的元素,包括表單元素(type hidden) 


例：

$('p:first').css('fontWeight','bold')
   $('div:hidden').show();
   $(“div:contains('test')“).hide();

   $('input[@name=bar]').val() //獲取名字為bar的input表單的值
   $('select[@name=slt]').val() //獲取名為slt的下拉菜單的選擇中值
   $('input[@type=radio][@checked]') //獲取所有被選中的radio表單

 
表單選擇器 


  :input Selects all form elements (input, select, textarea, button). 
  :text Selects all text fields (type=”text”). 
  :password Selects all password fields (type=”password”). 
  :radio Selects all radio fields (type=”radio”). 
  :checkbox Selects all checkbox fields (type=”checkbox”). 
  :submit Selects all submit buttons (type=”submit”). 
  :image Selects all form images (type=”image”). 
  :reset Selects all reset buttons (type=”reset”). 
  :button Selects all other buttons (type=”button”). 


例：

  $('myForm:input')
  $('input:radio',myForm)
  //:radio等價于[@type=radio]

最新評論