jquery有哪些常用方法

『壹』 jquery的引用方式有幾種分別是什麼

總共有三種引用方式。

1、最常用的，引入樣式表，在樣式表中編寫樣式，引入方式如下：

<link href="css/style.css" rel="stylesheet" type="text/css">

2、在Html頭部用<style></style>包起來，在這裡面編寫樣式：

<style type="text/css">

*{

padding: 0;margin: 0

}

</style>

3、在標簽裡面直接編寫行內樣式。

<div style="color: #333"><div>

當然還有一種方式是用JS直接更改或者賦值給某個標簽，但是其實是屬於第三種的范圍的。

『貳』 jQuery常用屬性和方法有哪些

屬性：

獲得標簽：$("#id")
獲得標簽內的代碼：.html()
獲得標簽內的文本：.text()
修改標簽內的代碼：.html("內容");
修改標簽內的文本：.html("內容");

獲得標簽屬性：.attr("屬性");
修改標簽屬性：attr("屬性","屬性值");

添加樣式：addClass("樣式名");
動態切換樣式：toggleClass("樣式名");
獲取樣式：css

添加元素：append("元素");
移去元素：.remove();
清空節點： .empty();

獲取第二個li節點： var $li=$("ul li:eq(1)");
獲取第二個li節點的文本內容： var li_txt=$
方法：
一：插入節點：
append() 向每個匹配的元素文本內部的後面追加內容
eg：<p>我想說：</p>

代碼：

$("p").append("<b>你好</b>");

結果為：<p>我想說：<b>你好</b></p>

appendto() 將所有的匹配的元素追加到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是B追加到A中，而是將A追加到B文本的後面中。
eg：<p>我想說：</p>

代碼：

$("<b>你好</b>").appendTo("p");

結果為：<p>我想說：<b>你好</b></p>

prepend() 向每個匹配的元素文本的內部前置內容。
eg：<p>我想說：</p>

代碼：

$("p").prepend("<b>你好</b>");

結果為：<p><b>你好</b>我想說：</p>

prependto() 將所有的匹配的元素前置到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是B前置到A中，而是將A前置到B中
eg：<p>我想說：</p>

代碼：

$("<b>你好</b>").prependto("p");

結果為：<p><b>你好</b>我想說：</p>

after() 向每個匹配的元素之後插入內容 。
eg：<p>我想說：</p>

代碼：

$("p").after("<b>你好</b>");

結果為：<p>我想說：<b>你好</b></p>

insertAfter 將所有的匹配的元素插入到指定的元素後面。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是B插入到A後面，而是將A插入到B後面。
eg：<p>我想說：</p>

代碼：

$("<b>你好</b>").after("p");

結果為：<p>我想說：<b>你好</b></p>
before() 在每個匹配的元素之前插入內容
eg：<p>我想說：</p>

代碼：

$("<b>你好</b>").after("p");

結果為：<p>我想說：<b>你好</b></p>
insertBefore():將A標簽插入到B標簽的前面

二：刪除：
①remove 該節點所包含的所有的後代節點將同時被刪除 也可以通過參數來選擇
②empty 清空節點，它能清空元素中的所有後代節點

三：替換節點：
①replaceWith() 作用是將所有匹配的元素都替換成指定的HTML或DOM元素
②replaceAll()

四：包裹節點:
①warp() 作用是是將所有元素進行單獨包裹
②warpAll() 作用元素的是所有匹配的元素用一個元素來包裹
③warpinner() 作用是將每一個的子內容（包括文本節點）用其他結構化的標記包裹起來

五：設置和獲取HTML、文本值
1、html()：
2、text
3、val

六：遍歷節點
1、children（）： 取得匹配元素的子元素
2、next（）：取得匹配元素後面緊鄰的同輩元素
3、prev（）：取得匹配元素前面緊鄰的同輩元素
4、siblings（）：取得匹配元素前後所有的同輩元素
5、closest（）：取得最近的匹配元素

七：css-dom
css 獲取樣式的屬性

offset（）
position
scroll
scrollLeft

樣式操作：
1：獲取樣式和設置樣式 attr
eg：<p class="myClass" title="選擇你最喜歡的水果">你最喜歡的水果是？</p>
獲取樣式： var p_class=$("p").attr("class");
設置樣式：$("p").attr("class","high");
2：追加樣式 addClass
<style>
.high{
font-weight:bold 粗體字
color:red 字體顏色
}
.another{
font-weight:italic 斜體字
color:blue 字體顏色
}
</style>

追加樣式：

$("input:eq(2)").click(function(){$("p".addClass("another"))})

☆在css中有以下規定：
①如果給一個元素添加了多個class值，那麼就相當於合並了他們的樣式
②如果不同的class設置了同一樣式，則後者覆蓋前者
addClass attr
對同一個網頁元素進行操作 <p>test</p> <p>test</p>
第一次使用 $<"p">.addClass("high"); $<"p">.attr("class","high");
第一次結果 <p class="high">test</p> <p class="high">test</p>
再次使用 $<"p">.addClass("another"); $<"p">.attr("class","another");
最終結果 <p class="high another">test</p> <p class="another">test</p>

3：移除樣式 removeClass
<p class="high another">test</p>
移除一個：$<"p">.removeClass("high");
移除二個：$<"p">.removeClass("high").removeClass("another");==$<"p">.removeClass("high another")
移除全部：$<"p">.removeClass();

4：切換樣式 toggle

5：判斷是否含有摸個樣式 hasClass
可以用來判斷元素中是否含有某個class，如果有返回true否則返回false

『叄』 jquery 常用使用方法

新窗口打開鏈接 XHTML Strict 版本不支持 target="_blank" 屬性 而使用 JQuery 能很好地解決這個問題 實現新窗口打開網頁

復制代碼 代碼如下:

$( a[@rel$= external ] ) click(function(){ this target = "_blank"; }); /* Usage: <a href=" target=_blank >css教程("padding" " em em" ); //B Target anything above IE if ($ browser msie && $ browser version > ) $("#menu li a") css("padding" " em em" ); //C Target IE and below if ($ browser msie && $ browser version <= ) $("#menu li a") css("padding" " em em" ); //D Target Firefox and above if ($ browser mozilla && $ browser version >= " " ) $("#menu li a") css("padding" " em em" );

字元串替換 用 JQuery 能對文本內容中的特定字元串進行替換操作

復制代碼 代碼如下:

var el = $( #id ); el (el () replace(/word/ig ""));

列高度相等 用 CSS 實現兩列高度相等並不容易 JQuery 能幫你解決

復制代碼 代碼如下:

function equalHeight(group) { tallest = ; group each(function() { thisHeight = $(this) height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group height(tallest); } /* Usage: $(document) ready(function() { equalHeight($(" recent article")); equalHeight($(" footer col")); }); */

字體大小重設 字體大小重設是一個非常常用的功能

$(" resetFont") click(function(){ $( ) css( font size originalFontSize); }); // Increase Font Size $(" increaseFont") click(function(){ var currentFontSize = $( ) css( font size ); var currentFontSizeNum = parseFloat(currentFontSize ); var newFontSize = currentFontSizeNum* ; $( ) css( font size newFontSize); return false; }); // Decrease Font Size $(" decreaseFont") click(function(){ var currentFontSize = $( ) css( font size ); var currentFontSizeNum = parseFloat(currentFontSize ); var newFontSize = currentFontSizeNum* ; $( ) css( font size newFontSize); return false; }); });

禁用右鍵菜單 有許多 JavaScript 代碼段可禁用右鍵菜單 但 JQuery 使操作變得更容易

復制代碼 代碼如下:

『肆』 jQuery中常用的方法有哪些這些方法都是用來做什麼的jQuery的這些方法是放到什麼地方的

按以下幾類分解
一、選擇器(定位元素方法)方法
$("各種類型選擇器")

二、篩選方法
$("xxx").find()等

三、對DOM元素的增、刪、改方法
如append/remove/html/clone等

四、對DOM元素屬性的增、刪、改方法
如attr/css/val等方法

五、對集合的處理方法
如json/each等方法

六、對事件的綁定方法
如click/bind/live/toggle等方法

七、其它常用方法
如ajax等

『伍』 jQuery的使用方法

使用步驟如下：
1.jQuery給放到一個文件夾裡面,方便我們待會引用這個jQuery,這里我就放到我項目的js文件夾裡面。
2.然後我們來開始編輯HTML界面代碼。
3.使用script標簽把jQuery引入到我們的HTML界面。src引號裡面的就是我們的jQuery路徑名稱。
4.接著再書寫一個script標簽對,裡面寫上jQuery入口函數,這樣,當我們的HTML載入完成之後就會執行我們的jQuery代碼

『陸』 jquery腳本的幾個常用方法

1.多選框回顯:

『柒』 淺析jQuery中常用的元素查找方法總結

$("#myELement") 選擇id值等於myElement的元素 id值不能重復在文檔中只能有一個id值是myElement所以得到的是唯一的元素 $("div") 選擇所有的div標簽元素 返回div元素數組 $(" myClass") 選擇使用myClass類的css的所有元素 $("*") 選擇文檔中的所有的元素 可以運用多種的選擇方式進行聯合選擇 例如$("#myELement div myclass")

層疊選擇器 $("form input") 選擇所有的form元素中的input元素 $("#main > *") 選擇id值為main的所有的子元素 $("label + input") 選擇所有的label元素的下一個input元素節點 經測試選擇器返回的是label標簽後面直接跟一個input標簽的所有input標簽元素 $("#prev ~ div") 同胞選擇器 該選擇器返回的為id為prev的標簽元素的所有的屬於同一個父元素的div標簽

基本過濾選擇器 $("tr:first") 選擇所有tr元素的第一個 $("tr:last") 選擇所有tr元素的最後一個 $("input:not(:checked) + span")

過濾掉 checked的選擇器的所有的input元素 $("tr:even") 選擇所有的tr元素的第 個元素（注意 因為所選擇的多個元素時為數組 所以序號是從 開始） $("tr:odd") 選擇所有的tr元素的第 個元素 $("td:eq( )") 選擇所有的td元素中序號為 的那個td元素 $("td:gt( )") 選擇td元素中序號大於 的所有td元素 $("td:ll( )") 選擇td元素中序號小於 的所有的td元素 $(":header") $("div:animated")

內容過濾選擇器 $("div:contains( John )") 選擇所有div中含有John文本的元素 $("td:empty") 選擇所有的為空（也不包括文本節點）的td元素的數組 $("div:has(p)") 選擇所有含有p標簽的div元素 $("td:parent") 選擇所有的以td為父節點的元素數組

可視化過濾選擇器 $("div:hidden") 選擇所有的被hidden的div元素 $("div:visible") 選擇所有的可視化的div元素

屬性過濾選擇器 $("div[id]") 選擇所有含有id屬性的div元素 $("input[name= newsletter ]") 選擇所有的name屬性等於 newsletter 的input元素 $("input[name!= newsletter ]") 選擇所有的name屬性不等於 newsletter 的input元素 $("input[name^= news ]") 選擇所有的name屬性以 news 開頭的input元素 $("input[name$= news ]") 選擇所有的name屬性以 news 結尾的input元素 $("input[name*= man ]") 選擇所有的name屬性包含 news 的input元素 $("input[id][name$= man ]") 可以使用多個屬性進行聯合選擇 該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素

子元素過濾選擇器 $("ul li:nth child( )") $("ul li:nth child(odd)") $("ul li:nth child( n + )") $("div span:first child") 返回所有的div元素的第一個子節點的數組 $("div span:last child") 返回所有的div元素的最後一個節點的數組 $("div button:only child") 返回所有的div中只有唯一一個子節點的所有子節點的數組

表單元素選擇器 $(":input") 選擇所有的表單輸入元素 包括input textarea select 和 button $(":text") 選擇所有的text input元素 $(":password") 選擇所有的password input元素 $(":radio") 選擇所有的radio input元素 $(":checkbox") 選擇所有的checkbox input元素 $(":submit") 選擇所有的submit input元素 $(":image") 選擇所有的image input元素 $(":reset") 選擇所有的reset input元素 $(":button") 選擇所有的button input元素 $(":file") 選擇所有的file input元素 $(":hidden") 選擇所有類型為hidden的input元素或表單的隱藏域

表單元素過濾選擇器 $(":enabled") 選擇所有的可操作的表單元素 $(":disabled") 選擇所有的不可操作的表單元素 $(":checked") 選擇所有的被checked的表單元素 $("select option:selected") 選擇所有的select 的子元素中被selected的元素 選取一個name 為」S_ _ ″的input text框的上一個td的text值 $(」input[@name =S_ _ ]「) parent() prev() text() 名字以」S_」開始 並且不是以」_R」結尾的 $(」input[@name ^= S_ ]「) not(」[@name $= _R ]「) 一個名為radio_ 的radio所選的值 $(」input[@name =radio_ ][@checked]「) val(); $("A B") 查找A元素下面的所有子節點 包括非直接子節點 $("A>B") 查找A元素下面的直接子節點 $("A+B") 查找A元素後面的兄弟節點 包括非直接子節點 $("A~B") 查找A元素後面的兄弟節點 不包括非直接子節點

$("A B") 查找A元素下面的所有子節點 包括非直接子節點 例子 找到表單中所有的 input 元素 HTML 代碼: <form> <label>Name:</label> <input name=name /> <fieldset> <label>Newsletter:</label> <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代碼: $("form input") 結果: [ <input name=name /> <input name=newsletter /> ]

$("A>B") 查找A元素下面的直接子節點 例子 匹配表單中所有的子級input元素 HTML 代碼: <form> <label>Name:</label> <input name=name /> <fieldset> <label>Newsletter:</label> <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代碼: $("form > input") 結果: [ <input name=name /> ]

$("A+B") 查找A元素後面的兄弟節點 包括非直接子節點 例子 匹配所有跟在 label 後面的 input 元素 HTML 代碼: <form> <label>Name:</label> <input name=name /> <fieldset> <label>Newsletter:</label> <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代碼: $("label + input") 結果: [ <input name=name /> <input name=newsletter /> ]

『捌』 jQuery的操作方式有哪些

一、選取DOM元素
jQuery的核心是通過各種選擇器，選中DOM元素，可以用querySelectorAll方法模擬這個功能。
var $ = document.querySelectorAll.bind(document);
這里需要注意的是，querySelectorAll方法返回的是NodeList對象，它很像數組（有數字索引和length屬性），但不是數組，不能使用pop、push等數組特有方法。
二、DOM操作
DOM本身就具有很豐富的操作方法，可以取代jQuery提供的操作方法。
尾部追加DOM元素。
// jQuery寫法
$(parent).append($(child));
// DOM寫法
parent.appendChild(child)
頭部插入DOM元素。
// jQuery寫法
$(parent).prepend($(child));
// DOM寫法
parent.insertBefore(child, parent.childNodes[0])
刪除DOM元素。
// jQuery寫法
$(child).remove()
// DOM寫法
child.parentNode.removeChild(child)

『玖』 jquery中有哪些基礎事件方法

jquery基礎事件，包括綁定事件、簡寫事件、復合事件；

(9)jquery有哪些常用方法擴展閱讀

1、綁定事件fn函數

1)使用點擊事件

$('input').bind('click', function () {//點擊按鈕後執行匿名函數

alert('點擊！');

});

2)普通處理函數

$('input').bind('click', fn); //執行普通函數式無須圓括弧

function fn() {

alert('點擊！');

}

2、簡寫事件函數

1）.mouseover()和.mouseout()表示滑鼠移入和移出的時候觸發。而.mouseenter()和.mouseleave()表示滑鼠穿過和穿出的時候觸發。

2）.keydown()、.keyup()返回的是鍵碼，而.keypress()返回的是字元編碼。

3）.focus()和.blur()分別表示游標激活和丟失，事件觸發時機是當前元素。而.focusin()和.focusout()也表示游標激活和丟失，但事件觸發時機可以是子元素。

3、復合事件示例，背景移入移出切換效果

$('div').hover(function () {

$(this).css('background', 'black'); //mouseenter 效果

}, function () {

$(this).css('background', 'red'); //mouseleave 效果，可省略

});

參考資料

jQuery官方網站-事件

『拾』 Jquery中常用的AJax的方法有哪幾個

jQuery中ajax的4種常用請求方式：
1.$.ajax()返回其創建的 XMLHttpRequest 對象。
$.ajax() 只有一個參數：參數 key/value 對象，包含各配置及回調函數信息。如果指定了 dataType 選項，請確保伺服器返回正確的 MIME 信息，(如 xml 返回 "text/xml")。
實例：
保存數據到伺服器，成功時顯示信息。
$.ajax({ type: "post", dataType: "html", url: '/Resources/GetList.ashx', data: dataurl, success: function (data) {
if (data != "") {
$("#pager").pager({
pagenumber: pagenumber, pagecount: data.split("$$")[1],
buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);
}
}
});
2.通過遠程 HTTP GET 請求載入信息。
這是一個簡單的 GET 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數
。如果需要在出錯時執行函數，請使用 $.ajax。 實例：
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
3. 通過遠程 HTTP POST 請求載入信息。 這是一個簡單的 POST 請求功能以取代復雜 $.ajax 。
請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。
實例：
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames },
function (data) {
if (data == "ok") {
alert("添加成功！");
}
}
)
4.通過 HTTP GET 請求載入 JSON 數據。
實例：
$.getJSON("api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&
jsoncallback=?，前面加上http://", function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});