jQuery 單引號和雙引號區別

引號和雙引號的使用:

$("div td:nth-child("+iNum+"), th:nth-child("+iNum+")").addClass("on").show();
    function disp(divs){
    for(var i=0;i<divs.length;i++)
    $(document.body).append($("<div style='background:"+divs[i].style.background+";'>"+divs[i].innerHTML+"</div>"));
}

屬性選擇器

使用屬性選擇器加單引號和不加單引號,程序都能正確運行,為了程序的可讀性,最好是加上單引號(個人習慣);

$("div a[title]");

$("div a[title='isaac']")

$("div a[href^='pdf']") 以pdf開頭

$("div a[href$='pdf']") 以pdf結尾

$("div a[href*='pdf']") 包含字符串pdf

json格式: 屬性值必須加引號, 而屬性可加可不加

attr({json})

$("div img").attr({src: "02.jpg", title: "紫金公寓", alt: "紫金公寓"});

css({json})

$("div p").css({color: "#ff0011", background: "blue", "font-size":"16px" });

注意：帶橫線的屬性必須加引號; font-size也可寫成fontSize;

屬性值帶單位(如px)的必須加引號;

animate({json})

$("#block").animate({left: "-=90px"},300); //相對左移
$("#block").animate({
  opacity: "0.5",
  width: "80%",
  height: "100px",
  borderWidth: "5px",
  fontSize: "16px",
  marginTop: "45px",
  marginLeft: "24px"
},2000);

注意：border-width不被支持(即使加引號也不支持, 屬于極其特殊情況, 而font-size加引號是被支持的), parem參數必須采用馱峰式寫法, 且不帶橫線, 與CSS樣式使用DOM名稱一致。

CSS樣式使用DOM名稱(比如"fontSize")來設置, 而非CSS名稱(比如"font-size")。

CSS中選擇器的作用是選擇頁面中某一類(類別選擇器)元素或者某一個元素(id選擇器),而jQuery中的"$"作為選擇器,同樣是某一類或某一元素,只不過

jQuery提供了更多更全面的選擇方式,并且為用戶處理了瀏覽器的兼容問題。

例如:在CSS樣式中 h2 a{ /* */}

而在jQuery則可以使用$("h2 a")

實例:

<html>
<head>
<title>$選擇器</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
window.onload=function(){
    var oElements=$("h2 a"); //選擇匹配元素
    for(var i=0;i<oElements.length;i++)
    oElements[i].innerHTML=i.toString();
}
</script>
</head>
<body>
<h2><a href="#">正文</a>內容</h2>
<h2>正文<a href="#">內容</a></h2>
</body>
</html>

我們可以看到jQuery很輕松地輕松地實現了元素的選擇;

ID選擇器：查找 ID 為"myDiv"的元素。

$("#myDiv");

注意：如果文檔中包含多個相同 ID 值的元素，那么 ID 選擇器只返回第一個元素

標簽選擇器：查找所有 DIV 元素。

$("div");

類別選擇器：查找類為"myclass"元素

$(".myClass");
<div className="myClass">jQuery</div>

類別選擇器奇偶性選擇(從0開始計數)

$("p:odd");
$("p:even");

選擇第一個元素（從第1開始計數）

$("td:nth-child(1)");

$("li a")

后代選擇器, 返回<li>標記的所有子元素<a>, 包括孫標記(不考慮層次);

$("li > a")

子選擇器, 返回<li>標記的所有子元素<a>, 不包括孫標記;

$("p + ul") 緊鄰

所有ul標記, 并且該標記前面緊跟著ul標記;

匹配p元素之后緊鄰的ul元素(p元素與ul是同輩)

$("p ~ ul") ~ 鍵盤左上角的非緊鄰

所有ul標記,并且該標記前面有一個ul標記;

匹配p元素之后的所有ul元素(p元素與ul是同輩)

$("p.myClass");

所有名稱為p的標記,屬性類別為myClass的標記;

$("p#myDiv");

所有名稱為p的標記,ID選擇符為myDiv的標記;

$(document.body)

$(document.body)和$("body")兩種寫法代表的是同一個對象

$("body")是一個選擇器, jQuery 會從 DOM 頂端開始搜索, 直到找到標簽為 body 的元素。

而 $(document.body) 中的 document.body 已經是一個 DOM 對象, jQuery 可以直接使用此元素。

所以它們的區別在于效率, $(document.body) 高于 $("body");

找到匹配任意一個類的元素。

$("div,span,p.myClass");

符號"," 選擇多個元素

使用屬性選擇器

$("a[title]");

$("a[title='isaac']")

$("a[href^='pdf']") 以pdf開頭

$("a[href$='pdf']") 以pdf結尾

$("a[href*='pdf']") 包含字符串pdf

$("a[title=isaac]")

$("a[href^=pdf]") 以pdf開頭,單引號可以不要

$("a[href$=pdf]") 以pdf結尾,單引號可以不要

$("a[href*=pdf]") 包含字符串pdf,單引號可以不要

$("a[title][href$=pdf]") 并且選擇器, 需要滿足多個條件時使用

屬性選擇器可以是自定義屬性, 如: <li dataIndex='1'></li>

$("a[href$='pdf']")

選擇所有超鏈接,并且這些超鏈接的href屬性是以pdf結尾的；

$("input[name^='news']")

查找所有 name 以 'news' 開始的 input 元素

實例:

jQuery代碼:

$(function(){
$("a[title^='制作中']").addClass("myClass");
/* $("a[title^=制作中]").addClass("myClass"); 這里的單引號(包括漢字)可以不要,程序仍可正常運行; */
});

HTML代碼:

<ul>
<li><a href="http://picasaweb.google.com/isaacshun">isaac photo</a>
<ul>
<li>10-6.html</li>
<li><a href="10-7.html">10-7.html</a></li>
<li><a href="10-8.html" title="圓角矩形">10-8.html</a></li>
<li><a href="10-9.html">10-9.html</a></li>
<li><a href="Pageisaac.html" title="制作中...">isaac</a></li>
</ul>
</li>
</ul>

使用位置選擇符

:first $("tr:first")

:last

必須要有父元素(HTML代碼中)

:first-child $("ul li:first-child") $("li:first-child") 都可以

:last-child

:only-child 唯一的子元素

如：li:only-child匹配[ <li>獨生子女</li> ]

<ol>
<li>獨生子女</li>
</ol>

:first與:first-child區別:

':first' 只匹配一個元素(整個頁面), 而:first-child選擇符將為每個父元素匹配一個子元素

jQuery代碼：

$(function(){
$("#btn").click(function(){
$("li:first-child").html("比阿奴方"); //匹配到[ <li>劉備</li>, <li>PHP</li> ]
$("li:first").html("程序員"); //匹配到[ <li>劉備</li>]
})
})

HTML代碼：

<ul>
<li>劉備</li>
<li>關羽</li>
<li>張飛</li>
</ul>
<ul>
<li>PHP</li>
<li>javascript</li>
<li>CSS</li>
</ul>
<button id="btn">確定</button>

從1開始計數(對于其父標記內)

:nth-child(n) $("ul li:nth-child(2)") $("li:nth-child(2)") 都可以

:nth-child(odd|even)

:nth-child(nX+y)

如:nth-child(5n+1) (1,6,11,16.......)

從0開始計數(對于整個頁面)

:odd $("tr:odd")

:even

:eq(n) equal

:gt(n) 頁面中第n個元素之后的所有元素(不包括第n個本身) less than(lt)

:lt(n) 頁面中第n個元素之前的所有元素(不包括第n個本身) greate than(gt)

使用包含選擇器

:has(selector) 括號內可以不用雙引號 $("div:has(a)");

給所有包含 p 元素的 div 元素添加一個 text 類

jQuery 代碼:

$("div:has(p)").addClass("test");

結果:

HTML 代碼:

<div><p>Hello</p></div>
<div>Hello again!</div>

[ <div class="test"><p>Hello</p></div> ]

使用過濾選擇器可以單獨使用

:animated 所有處于動畫中的元素指的是執行了animate函數的元素

:button 所有按鈕，包括input[type=button]、input[type=submit]、input[type=reset]和<button>標記

:checkbox 所有的復選框, 等同于input[type=checkbox]

:contains(text) 選擇所有包含了文本"text"的元素括號內(text)必須加單引號

:disabled 頁面中被禁用了的元素

:enabled 頁面中沒有被禁用的元素

:file 上傳文件的元素，等同于input[type=file]

:header 選中所有的標題元素，例如<h1><h2>...<h6>

:hidden 匹配所有不可見元素，或者type為hidden的元素,如<tr style="display:none"><td>Value 1</td></tr>也算是不可見元素

如果需要匹配<input type="hidden" value="1000" /> 則需要使用$("input:hidden")才能匹配

:image 圖片提交按鈕，等同于input[type=image]

:input 表單元素，包括<input>、<select>、<textarea>、<button>

:not(filter) 反向選擇,參數filter必須是過濾選擇器錯誤的寫法:div:not(p:hidden) 正確寫法格式：div p:not(:hidden)

:parent 選擇所有擁有子元素(包括文本)的元素，空元素被排除

:password 密碼文本框，等同于input[type=password]

:radio 單選按鈕，等同于input[type=radio]

:reset 重置按鈕，包括input[type=reset]和button[type=reset]

:checked 匹配所有選中的被選中元素(復選框、單選框等, 不包括select中的option)

:selected 下拉菜單中被選中的項

:submit 提交按鈕, 包括input[type=submit]和button[type=submit]

:text 文本輸入框, 等同于input[type=text]

:visible 頁面中的所有可見元素

:animated 匹配所有正在執行動畫效果的元素

HTML 代碼:

<button id="run">Run</button><div></div>

jQuery 代碼:

$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

:contains(text) 匹配包含給定文本的元素

查找所有包含 "John" 的 div 元素

HTML 代碼:

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

jQuery 代碼:

$("div:contains('John')")

注意括號內必須加單引號

:hidden 頁面中被隱藏了的元素

實例1:查找隱藏的 tr

HTML 代碼:

<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>

jQuery 代碼:

$("tr:hidden")

如何判斷一個元素是否隱藏

$("#delayTrain").is(":hidden")

實例2:匹配type為hidden的元素

HTML 代碼:

<form>
<input type="text" name="email" />
<input type="hidden" name="id" />
</form>

jQuery 代碼:

$("input:hidden")

:visible 匹配所有的可見元素

查找所有可見的 tr 元素

HTML 代碼:

<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>

jQuery 代碼:

$("tr:visible")

結果:

[ <tr><td>Value 2</td></tr> ]

:disabled 匹配所有不可用元素

查找所有不可用的input元素

HTML 代碼:

<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>

jQuery 代碼:

$("input:disabled")

:enabled 頁面中沒有被禁用的元素

查找所有可用的input元素

HTML 代碼:

<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>

jQuery 代碼:

$("input:enabled")

結果:

[ <input name="id" /> ]

:empty 用法: $("td:empty")

返回值集合元素

說明: 匹配所有不包含子元素或者文本的空元素

注意:這里是":empty",可不是".empty"哦!

查找所有不包含子元素或者文本的空元素

HTML 代碼:

<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代碼:

$("td:empty")

結果:

[ <td></td>, <td></td> ]

:parent 匹配含有子元素或者文本的元素

查找所有含有子元素或者文本的 td 元素

HTML 代碼:

<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代碼:

$("td:parent")

結果:

[ <td>Value 1</td>, <td>Value 2</td> ]

迭代使用

$(":checkbox:checked:enabled")

表示<input type="checkbox">中所有被用戶選中而且沒有被禁用的

實現反向過濾

$(":input:not(:radio)")

如

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//迭代使用選擇器
$(":input:not(:checkbox):not(:radio)").addClass("myClass");
});
</script>

$(":input:not(:checkbox):not(:radio)").addClass("myClass");

表示所有<input>、<select>、<textarea>、<button>中非checkbox和非radio的元素,

注意input 和 :input的區別?

$("input")只選擇input標簽。如：<input id="" type="" name="" />

而$(":input")是偽類選擇, 不單單是input, 還包括textarea和select;

如: <input />, <textarea></textarea>, <select></select>

取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。

children([expr]) parents()將查找所有祖輩元素, 而children()只考慮子元素而不考慮所有后代元素。

查找DIV中的每個子元素。

HTML 代碼:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代碼:

$("div").children()

結果:

[ <span>Hello Again</span> ]

如何獲取單選框的值

$("input[type='radio']:checked").val();

、JS和jQuery的對比

JavaScript（簡稱“JS”）是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。它是 Web 的編程語言。

所有現代的 HTML 頁面都使用 JavaScript。

jQuery是一個快速、簡潔的JavaScript框架，設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情，極大地簡化了 JavaScript 編程，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

二、對比

1、關于引號

在js中單引號和雙引號都是一樣的，平時使用的時候盡量用單引號，只有碰到嵌套的時候才會同時用兩種引號。即外面是單引號的時候里面就要用雙引號，外面是雙引號的時候里面就要用單引號，總之不能同時用雙引號或者是單引號；

2、選擇器

JavaScript:

document.getElementById("intro");

jQuery:

$("#intro")

3、文檔就緒事件：

(1)JavaScript

window.onload() 方法用于在網頁加載完畢后立刻執行的操作，即當 HTML 文檔加載完畢后，立刻執行某個方法。

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

實例代碼（頁面加載完成后，立即顯示文本內容）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>選擇器對比</title>
</head>
?
<body>
<div id="con"></div>
<script type="text/javascript">
window.onload=function(){
    document.getElementById('con').innerHTML='顯示文本測試';
}
</script>
</body>
</html>

(2)jQuery

為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成后才可以對 DOM 進行操作。

$(document).ready(function(){
   // 開始寫 jQuery 代碼...
 });

簡潔寫法：

$(function(){
   // 開始寫 jQuery 代碼...
});

實例代碼（頁面DOM完全就緒后，立即顯示文本內容）：

在線咨詢

上一篇：個人收藏的必備網頁設計控件，也許正是你在尋找的（二）
下一篇：CSS border-style 屬性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jQuery 單引號和雙引號區別

二、對比

您的項目需求