obj.length　　當obj是jquery對象時，得到的是數組的長度；當obj是js對象時，得到的是屬性

1.基本知識

　　$(function() {}) ? ? ? ? ? ? ? ? ? ? ? ??相當于window.onload = function () {};這樣比是不準確的，兩者還是有區別的。具體見以下的6.事件總結

　　　　　　　　　　　　　　　　　　　也相當于$(document).ready(function(){});這樣比是完全準確的，就是它的縮寫。

　　$("#btn1").click(function(){}) ? ? ?相當于document.getElementById("btn1").onclick = function () {}

　　

　　jQuery對象和DOM對象（注意！！！！！！！jQuery對象是一個數組對象）

　　　　通過jsDOM的api獲得的對象為DOM對象，一般聲明為var xxx；通過jQuery的方式獲得的對象為jQuery對象，一般聲明為var $xxx

　　　　jQuery對象轉為DOM對象：1)var xxx = $xxx[index] ; 2)var xxx = $xxx.get(index)。

　　　　DOM對象轉為jQuery對象：var $xxx = $(xxx)。

　　　　jQuery和DOM對象有各自不同的api方法，不能混淆使用。

　　　　例如：$("li")得到的jQuery對象(是個由DOM對象組成的數組)，click()是為這個數組中每一個DOM對象添加事件，所以方法中的this是個DOM對象

　　　　　　$("li").click(function () {
　　　　　　　　alert($(this).text());
　　　　　　});

?

2.選擇器（可以綜合使用）（選擇器搞不定可以借助方法）

　　01.基本選擇器（class可以有多個，id只能有一個）（注意！！！！可以連在一起寫 ? ?例如：$("div.mini") ?）

　　　　$("#one").css("background", "#ffaabb");//$("#one")選擇id為one的節點，返回jQuery元素。并設置背景顏色

　　　　$(".mini").css("background", "#ffccaa");//選擇class屬性為mini的節點
　　　　$("div").css("background", "#ffbbaa");//選擇TagName為div的節點
　　　　$("*").css("background", "#ffaabb");//選擇所有節點元素
　　　　$("span,#two").css("background", "#ffbbaa");//中間加, 代表選擇TagName為span或者id為two的節點

　　02.層級選擇器

?

$("body div").css("background", "#ffbbaa");//body中所有的div，（包括子節點，孫節點...） $("body>div").css("background", "#ffaabb");//body的所有div子節點 $("#one+div").css("background", "#ffbbaa");//id為one的下一個相鄰div兄弟節點 $("#two~div").css("background", "#ffaabb");//id為two的節點之后的所有的div節點 $("#two").siblings("div").css("background", "#ffaabb");//id為two的所有兄弟div節點 $("#two").nextAll("span:first").css("background", "#ffaabb");//id為two的的節點之后的TagName為span的第一個同輩節點 $("#two").prevAll("div").css("background", "#ffaabb");//選擇id為two的所有在其前面的div兄弟節點（只包括兄弟）

?

　　03.基本過濾選擇器

　　　　

//css("background", "#ffaabb");方法是jQuery對象才有的$("div:first") TagName為div的第一個節點
$("div:last") TagName為div的最后一個節點
$("div:not(.one)") TagName為div的且class不為one的節點數組
$("div:even") TagName為div的且下標為偶數的節點數組
$("div:odd") TagName為div的且下標為奇數的節點數組
$("div:gt(3)") TagName為div的且下標大于3的節點
$("div:eq(3)") TagName為div的且下標等于3的節點
$("div:lt(3)") TagName為div的且下標小于3的節點
$(":header") 所有標題節點<h1></h1>...
$(":animated") 所有在執行動畫的節點
$("#two").nextAll("span:first") id為two的節點之后第一個TagName為span的節點

?

　　04.內容過濾選擇器

//選擇 含有文本 'di' 的 div 元素$("div:contains('di')")//選擇的div元素沒有子元素$("div:empty")//選擇的div元素包含有class為mini的子元素$("div:has(.mini)")//選擇的div元素含有子元素$("div:parent")

?

　　05.可見性選擇器

　　　　　　001.使節點不可見

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

　　　　　　　　<input type="hidden" value="123456789000" size="8">

　　　　　　002.在js中使其可見

　　　　　　　　$("div:hidden").show(2000).css("background", "#ffbbaa");
　　　　　　　　//顯現過程為兩秒，執行過這個方法之后改div就變成visible的了

　　　　　　003.可見性選擇器

　　　　　　　　$("div:visible")//所有可見的div

　　　　　　　　$("div:hidden")//不可見的div

　　　　　　　　//把jQuery對象轉為DOM對象，再用DOM的方法得到value屬性值
　　　　　　　　//alert($("input:hidden")[0].value);
　　　　　　　　alert("~" + $("input:hidden").val());//jquery的方式得到value屬性值

?

　　06.屬性選擇器

選取含有 屬性title 的div元素. $("div[title]")選取 屬性title值等于'test'的div元素. $("div[title='test']")選取 屬性title值不等于'test'的div元素(沒有屬性title的也將被選中). $("div[title!='test']")選取 屬性title值 以'te'開始 的div元素. $("div[title^='te']")"選取 屬性title值 以'est'結束 的div元素. $("div[title$='est']") 選取 屬性title值 含有'es'的div元素. $("div[title*='es']")組合屬性選擇器,首先選取有屬性id的div元素，然后在結果中 選取屬性title值 含有'es'的 div 元素. $("div[id][title*='es']")選取 含有 title 屬性值, 且title 屬性值不等于 test 的 div 元素. $("div[title][title!='test']")

?

　　07.子元素過濾選擇器（注意！！！！！！！！要想選取出來的是子元素，：前面要加空格才行。!!!!!!加空格事實上是一個層級選擇器的體現）

選取每個class為one的div父元素下的第2個子元素. $("div.one :nth-child(2)") $("div.one :nth-child(index)");//選取class為one的div下第index個子元素，index從1開始 $("div.one :nth-child(even/odd)");//能選取每個父元素下的索引值為偶/奇數的元素。(:nth-child(even/odd)的索引值是從1開始)
　　　　　　　　　　　　　　　　　　　 //與$("div.one :even/odd");選擇的奇偶恰恰相反
　　　　　　　　　　　　　　　　　　　 //（注意！！！！！！！！！！！因為:even/odd的索引值是從0開始，這里0也是偶數） :nth-child(3n): 能選取每個父元素下的索引值是 3 的倍數 的元素
:nth-child(3n + 1): 能選取每個父元素下的索引值是 3n + 1的元素
選取每個class為one的div父元素下的第一個子元素. $("div.one :first-child")
選取每個class為one的div父元素下的最后一個子元素. $("div.one :last-child")
如果class為one的div父元素下的僅僅只有一個子元素，那么選中這個子元素. $("div.one :only-child")

?

　　08.表單元素過濾選擇器（注意！！！！！！！！jQuery對象的each方法）

對表單內 可用input 賦值操作. $(":input:enabled").val("姬云飛");//使所有可用的input的value屬性值為“姬云飛”對表單內 不可用input 賦值操作. $(":input:disabled").val("jiyunfei");獲取多選框選中的個數. alert($(":checkbox[name='newsletter']:checked").length);獲取多選框選中的內容. $(":checkbox[name='newsletter']:checked").each(function () {alert(this.nextSibling.nodeValue);});獲取下拉框選中的內容. $("select :checked").each(function () {//:號前面需要加空格因為被選擇的是子節點<option>alert(this.value);});

?

?

3.jQuery對象的方法（可以連綴多個方法，因為調用一個方法的返回值還是調用的對象）（詳見API）

　　01.val()　　獲得第一個匹配元素的當前值。

　　　　　　　　若獲取的是select節點的val()，那么得到的是被選中<option>節點的文本子節點；

　　　　　　　　若被選中的有多個，可以使用$("#multiple").val().join("~")得到Multiple~Multiple3 , 若不寫.join("~")，默認用,分割。

　　　　　　　　若獲取的是checkbox多選框的val()，那么只能得到第一個被選中的<input>的value屬性值，因為$(":checkbox:checked")是數組

　　　 ?val(val)　　設置每一個匹配元素的值。

　　　　　　　　　 若想使 select，checkbox或radio 選中某一項或多項，可以不用設置checked或selected屬性，而是

$("#single").val("Single2");$("#multiple").val(["Multiple2", "Multiple3"]);$("input").val(["check2", "radio1"]);

?

?

　　02.attr(name)　　取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應屬性，則返回 undefined 。

　　　 ?attr(key, value)　　為所有匹配的元素設置一個屬性值。

?

　　03.each()　　以每一個匹配的元素作為上下文來執行一個函數。

　　　　　　　　 ?意味著，每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不同的DOM元素（每次都是一個不同的匹配元素）。

　　　　　　　　 ?而且，在每次執行函數時，都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數（從零開始的整形）。

　　　　　　　　 ?返回 'false' 將停止循環 (就像在普通的循環中使用 'break')。返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。

　　　　　　　　 ?詳見api文檔

?

　　04.text()　　取得所有匹配元素的內容。結果是由所有匹配元素包含的文本內容組合起來的文本。這個方法對HTML和XML文檔都有效。

　　　 ?text(val)　　設置所有匹配元素的文本內容。與 html() 類似, 但將編碼 HTML (將 "<" 和 ">" 替換成相應的HTML實體).

?

　　05.click(Function fn)　　在每一個匹配元素的click事件中綁定一個處理函數（就是所謂的隱式迭代）。

　　　　　　　　　　　　　　點擊事件會在你的指針設備的按鈕在元素上單擊時觸發。

　　　　　　　　?　　　　　 ?單擊的定義是在屏幕的同一點觸發了mousedown和mouseup.幾個事件觸發的順序是：mousedownmouseupclick

$("p").click( function () { $(this).hide(); });

?

　　06.注意！！！！！val和attr的區別

　　　　當<input type="text" name="name" value="">時：

　　　　不管在輸入框中輸入什么，alert($(":text[name='name']").attr("value"));的值為“”

　　　　　　　　　　　　　　　　alert($(":text[name='name']").val());的值就是輸入的值

　　　　當<input type="text" name="name">時：

　　　　不管在輸入框中輸入什么，alert($(":text[name='name']").attr("value"));的值為undefined

　　　　　　　　　　　　　　　　alert($(":text[name='name']").val());的值就是輸入的值

　　　　綜上，若涉及到value的屬性時最好用val()方法。

?

　　07.刪除及清空節點

　　　　remove()：將把jQuery對象對應的DOM節點直接刪除（包含其子節點），返回值是被刪除的節點對象

　　　　empty()：將把jQuery對象對應的DOM節點的子節點全部刪除

?

　　08.克隆和替換節點

　　　　clone()：克隆節點，返回值是克隆后的副本對象，若原節點帶有id，注意克隆后要修改id的屬性值不然id值就不唯一了。副本對象不具有事件

　　　　clone(true)：副本對象具有原對象的事件函數

　　　　replaceWith()：a.replaceWith(b)　　意思是把a換成b，返回值為a，移動b且去掉a。a可以用選擇器匹配多個

　　　　replaceAll()：a.replaceAll(b)　　　　 意思是把b換成a，移動a且去掉b。b可以用選擇器匹配多個

　　　　自定義的互換節點的方法：

　　　　　　function replaceEach($aNode,$bNode) {//切記！！！！形參不用寫var
　　　　　　　　var $aNode2 = $aNode.clone(true);
　　　　　　　　$bNode.replaceWith($aNode2).replaceAll($aNode);
　　　　　　}

?

　　09.包裹節點（了解）

　　　　warp()

　　　　warpAll()

　　　　warpInner()

?

　　010.html()　　　　同DOM對象innerHTML一樣

　　　　 html("")　　　可以清空原來的語句，自己寫html語句

?

　　011.find(select)　　尋找子節點，返回子節點的jQuery對象。var $tdContent = $trNode.find("td:first").text();

?

　　012.class相關　　

//1. hasClass(): 某元素是否有指定的樣式alert($("div:first").hasClass("SubCategoryBox")); //true//2. 移除樣式$("div:first").removeClass("SubCategoryBox");alert($("div:first").hasClass("SubCategoryBox"));//3. 添加樣式$("div:first").addClass("SubCategoryBox");//4. 切換樣式: 存在, 則去除; 沒有, 則添加. $(".showmore").click(function(){$("div:first").toggleClass("SubCategoryBox");return false;}); //5. 獲取和設置元素透明度: opacity 屬性alert($("div:first").css("opacity"));$("div:first").css("opacity", 0.5);//6. width 和 heightalert($("div:first").width());alert($("div:first").height());$("div:first").width(400);$("div:first").height(80);//7. 獲取元素在當前視窗中的相對位移: offset(). //其返回對象包含了兩個屬性: top, left. 該方法只對可見元素有效alert($("div:first").offset().top);alert($("div:first").offset().left);

?

　　013.is()　　show()　　hide()

$(function () {$(".head").click(function () {//為class為head的節點設置點擊事件var flag = $(".content").is(":hidden");//is();看節點是否符合，這里的意思是是否隱藏if (flag) {//如果是隱藏的$(".content").show();//show()方法可以使節點顯示} else {$(".content").hide();//hide()方法使節點隱藏 }});})

?

?

4.操作節點

　　01.操作文本節點

　　　　通過元素選擇器獲取的元素節點的text方法來操作文本節點

　　02.操作屬性節點

　　　　通過元素選擇器獲取的元素節點的attr()方法來操作屬性節點（直接操作value屬性可以使用val()方法）

　　03.操作節點(創建和添加節點)( $("") 引號里寫html節點，可以帶屬性·文本節點·子節點，即為創建 )

<script type="text/javascript" src="jquery/jquery-3.2.1.js"></script> <script type="text/javascript">$(function() {//這是一對，主謂顛倒的用法。代表加在最后一個子節點的位置$("<p>你最喜歡的城市？</p>") . appendTo("body");//里面可以使用這樣復合的寫法。$("<ul id='city'><li id='bj'>北京</li></ul>"),或者去掉$()都行$("body") . append($("<ul id='city'><li id='bj'>北京</li></ul>"));//這一對和上面的相反，是加在第一個子節點的位置$("<li id='xm'>廈門</li>") . prependTo("#city");$("#city") . prepend("<li id='gz'>廣州</li>")//插入到某一個子節點的后面$("<li id='jz'>焦作</li>") . insertAfter("#bj");$("#jz") . after("<li id='zz'>鄭州</li>")//插入到某一個子節點的前面$("<li id='hd'>邯鄲</li>") . insertBefore("#gz");$("#gz") . before("<li id='bd'>保定</li>")}) </script>

?

5.jQuery方法

　　$.trim("")　　　　去掉字符串前后的空格，返回去掉空格后字符串

?

6.事件總結

　　01.click(fn)　　鼠標點擊時響應

　　02.blur(fn)　　失去焦點時響應

　　03.focus(fn)?　　得到焦點時響應　　$("#login").focus();設置焦點

　　04.window.onload(function () {}) 和 $(function () {})也就是$(document).ready(function () {});有什么區別

　　　　　　

　　05.綁定事件bind()

//bind: 為某 jQuery 對象綁定事件. /*$(".head").bind("click", function(){//使用 is() 方法, 來判斷某個給定的 jQuery 對象是否符合指定//的選擇器. var flag = $(".content").is(":hidden");if(flag){//show() 方法: 使隱藏的變為顯示$(".content").show();}else{$(".content").hide();}});*/

　　06.合成事件

//mouseover: 鼠標移上去//mouseout: 鼠標移出. /*$(".head").mouseover(function(){$(".content").show();}).mouseout(function(){$(".content").hide();});*///合成事件: hover: 鼠標移上去執行第一個函數, 移出執行第二個函數. 效果等同于上面/*$(".head").hover(function(){$(".content").show();}, function(){$(".content").hide();});*/ //合成事件: toggle: 第一次點擊執行第一個函數, 第二次點擊執行第二個//函數 ... 循環執行. $(".head").toggle(function(){$(".content").show();}, function(){$(".content").hide();});

　　07.事件冒泡

　　　　若為多個節點設置click事件，那么響應的順序是從子節點依次向上響應。阻止這種響應的方法是：

　　　　在事件處理函數中返回 false, 會對事件停止冒泡. 還可以停止元素的默認行為.

　　08.事件對象

　　　　在事件函數中添加一個參數（不用加var），那么這個參數會被傳入事件對象；

　　　　事件對象的幾個屬性event.pageX, event.pageY: 獲取到光標相對于頁面的 x, y 坐標。

$("html").mousemove(function (event) {$("#message").text("x:" + event.pageX + ",y:" + event.pageY);});

　　09.移除事件

　　　　

?

7.額外

　　01.若.js文件和html在同一目錄下，那么導入方式是?src="jquery-3.2.1.js" 其中開頭不帶/意思是當前目錄下；

　　　 ?若.js文件在html當前目錄的子目錄下，那么導入方式例如：src="jquery/jquery-3.2.1.js"；

　　　 ?若非以上兩種情況，那么導入方式例如：src="../jquery/jquery-3.2.1.js"。

?

8.動畫

//演示動畫效果: show() 和 hide() 方法中傳入毫秒數以達到動畫的效果/*$(function(){ $(".head").toggle(function(){$(".content").show(1000);}, function(){$(".content").hide(1000);});})*///只改變高度/*$(function(){ $(".head").toggle(function(){$(".content").slideDown(500);}, function(){$(".content").slideUp(500);});})*///只改變透明度/*$(function(){ $(".head").toggle(function(){$(".content").fadeIn(1000);}, function(){$(".content").fadeOut(1000);});})*///toggle() 可以切換元素的可見狀態. //slideToggle(): 通過高度變化來切換匹配元素的可見性//fadeToggle(): 通過透明度來切換元素的可見性.//fadeTo(): 把不透明度以漸近的方式調整到指定的值 (0 – 1 之間). $(function(){ $(".content").show();var i = 1; $(".head").click(function(){//$(".content").toggle();//$(".content").slideToggle();//$(".content").fadeToggle(); $(".content").fadeTo("slow", i);i = i - 0.1;});})

?

?

　　　　

?

轉載于:https://www.cnblogs.com/feifeiyun/p/6698514.html

總結

以上是生活随笔為你收集整理的jQuery-helloWorld的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。