jquery 包含的功能1.HTML元素選取、操作2.CSS操作3.HTML事件函數4.Javascript特效和動畫5.HTML DOM遍歷和修改6.AJAX7. Untilities ?工具類
基礎text()函數改變this中的文檔內容

$("li").click(function (){

$(this).text("hello!boy!");

});

before方法

$("p").before('<h1>這是before的測試方法</h1>');

bind , unbind方法bind 和unbind及onclikc和officlick方法都是調用on和off方法來實現的

$("#test").bind(

'click',function (){

alert("這是事件觸發的文字")

}

);

$("#test").unbind('click');

下面的這個不會用event.stopPropagation(); ? ?阻止父級事件event.stopImmendiatePropagation(); ?阻止所有的事件

for(var i = 0; i<5;i++){

$("<div style='color:red'>this is new word!</div>").appendTo(document.body); // 這個appendTO(document.body)很有用

}

fadeToggle ?隱藏函數slideUp ? ? ? 也是隱藏函數是兩種不同的函數,其實Toggle的時間設置的適當的話，和fadeToggle差不多
animate動畫方法

$("button").click(function(){

$("div").animate({

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

});

jQuery 方法鏈接chaining

$("#p1").css("color","red").slideUp(2000).slideDown(2000); // 讓事件一次綁定多個方法

$("div").Remove() ?不寫就是刪除所有元素$("div").empty() ? ? 刪除所有元素$("div").addClass("style=color:red"); ? 給DIV標簽增加樣式
outerHeight , outerWidth

<p>Hello</p><p></p>

<script>

var p = $( "p:first" );

$( "p:last" ).text(

"outerHeight:" + p.outerHeight() +

" , outerHeight( true ):" + p.outerHeight( true ) );

</script>

輸出 outerHeight:33 , outerHeight( true ):53

Jquery 的遍歷和過濾同級遍歷向下遍歷?find ?在標簽中找，find中必須寫元素

<p><span>Hello</span>, how are you?</p>

<p>Me? I'm <span>good</span>.</p>

$( "p" ).find( "span" ).css( "color", "red" );

向上遍歷?parent 在標簽的外層查找一個包含的母元素作為選擇器
parents 在外層查找匹配的標簽，沒有的話就選擇所有的外層標簽

$( "li.item-a" ).parent().css( "background-color", "green" );

$( "li.item-a" ).parents("li").css( "background-color", "green" );

向下遍歷next ? ?同級遍歷 siblings

$("h2").siblings().css({borer:"3px solid #ff0022}); //選擇除了自己以外的其他同級元素

$("h2").next().css({border:"3px solid #ff0022});

$("h2").nextAll().css({border:"3px solid #ff0022});

$("h2").nextUntil("h4").css({border:"3px solid #ff0022}); // 這個只能往下找

? 向下遍歷 ?first ?last ?eq ?filter

$("li").first().css("background-color","red");

$("li").last().css("background-color","red");

$("li").eq(1).css("background-color","red"); // 選擇第二個li元素

$("li").filter(".item-1").css("background-color","red"); // 第二次過濾，選擇class = item-1的元素

jquery擴展

$.noConflict(); // 這個聲明了之后就不能再使用$符號了，必須自定義關鍵字來寫語句，不一定非要使用jQuery關鍵字

jQuery("li").click(function (){

jQuery(this).text("hello!boy!");

});

jQuery UI1.交互，一些與鼠標相關的內容Draggable,Droppable,Resizable,Selectable,Sortable2.小部件，一些界面的擴展AutoComplete,ColorPicker,Dialog,Slider,Tabs,ProgressBar,Spinner3.效果，提供豐富的動畫效果Add Class , Color Animation , Toggle
unload 和 beforeunload?

unload 和 beforeunload 都沒法區分刷新和關閉，只要當前頁面unload了就會觸發（關閉，刷新，點擊鏈接，輸入地址等等）

unload 可以做些清理工作，但是不能用preventDefault來阻止頁面關閉。（jquery unload?)

alert實際執行了，只是大部分瀏覽器會阻止正在關閉的窗口彈對話框。如果你用chrome，可以打開Developer Tool并點擊右下角的齒輪設置，選擇 Preserve log upon navigation，可以查看到unload里的console.log。因為unload一返回，頁面就關閉，如果有ajax請求什么的，都一定要同步調用（async:true），不然頁面unload完資源就全部注銷了。

beforeunload 如果返回值不是null或者undefined，瀏覽器會負責跳出個confirm對話框，返回值可以會做為提示的一部份也可能壓根就不用。

唯一能阻止頁面關閉的就是beforeunload返回truthy value，并且用戶點擊了Cancel/No

Chrome不支持本地Ajax請求，當我在.html文件中訪問.json文件時就會出現這個問題，就是說這html文件。所以調試的時候需要有web服務器。

所以下面代碼中的url是無法訪問的

$(document).ready(function(){

$("#b01").click(function(){

htmlobj=$.ajax({url:"e:/test1.txt",async:false});

$("#myDiv").html(htmlobj.responseText);

});

});

DOM	用途說明	Jquery
document.createElement(TagName)	創建元素	$("TagName")
parentElement.appendChild(Element)?	附加子節點	$parentElement.Append()? $Element.AppendTo(parentElement)?
parentElement.insertBefore(Element,?siblingElement)??parentElement.insertBefore(siblingElement,?Element)	插入兄弟節點	$(siblingElement).before(Element) $(siblingElement).after(Element)
document.GetElementById(ElementId)	通過ID屬性獲取元素	$("#ElementId")
document.GetElementsByTagName(ElementsTagName)	通過標簽名稱獲取元素	$("TagName")
document.GetElementsByName(ElementsName)	通過Name屬性獲取元素	$("Elements[name=ElementsName]")
Element.parentNode.removeChild(Element)	移除元素	$Element.remove()?
Element.innerText	獲取或設置元素的innerText	$Element.Text()
Element.innerHTML	獲取或設置元素的innerHTML	$Element.HTML()
Element.className Element.style	獲取或設置元素的樣式表	$Element.addClass(className) $Element.toggleClass(className)?$Element.removeClass(className)
Element.cssText	獲取或設置元素的style	$Element.css()
Element.getAttribute(attributeName)	獲取元素的value	$Element.attr(attributeName)
Element.setAttribute(attributeName,?attributeValue)	設置元素的value	$Element.attr(attributeName,?attributeValue)
Element.parentNode	獲取元素的父節點	$Element.parent()
Element.childNodes	獲取元素的子節點	$Element.children()
Element.previousSibling	獲取元素的前一個兄弟元素	$Element.prev()
Element.nextSibling	獲取元素的后一個兄弟元素	$Element.next()
window.onload()?=?function()?{};	綁定窗體加載事件	$(document).ready(function()?{}); $(function()?{});
Element.onclick?=?function()?{};	綁定元素的單擊事件	$Element.click(function()?{});

簡單選擇器
$("#ElementId")	ID選擇器
$("TagName")	標簽選擇器
$(".ClassName")	類名選擇器
$("*")	通配符選擇器
$("Selector1,?Selector2,…,?SelectorN")	組合選擇器
層次選擇器
$("Selector1?Selector2")	后代選擇器
$("Selector1?>?Selector2")	子代選擇器
$("Selector1?+?Selector2")	相鄰兄弟選擇器
$("Selector1?~?Selector2")	兄弟選擇器
子元素選擇器
$(":nth-child(index/even/odd/equation)")
$(":first-child")
$(":last-child")
$(":only-child")
濾鏡選擇器
$(":first") $(":last")
$(":even") $(":odd")	奇偶數選擇器
$(":eq(index)") $(":gt(index)") $(":lt(index)")	不等式選擇器
$(":visible") $(":hidden")	可見性選擇器
$(":header")	標題選擇器
$(":animated")	動畫選擇器
$(":not(filter)")	反選選擇器
表單選擇器
$(":button")	按鈕
$(":checkbox")	復選框
$(":file")	文件域
$(":hidden")	隱藏元素
$(":image")	圖像域
$(":input")	輸入控件
$(":password")	密碼框
$(":radio")	單選按鈕
$(":reset")	重置按鈕
$(":submit")	提交按鈕
$(":text")	單行文本框
$(":enabled")	可用元素
$(":disabled")	不可用元素
$(":checked")?適用于checkbox、radio	選中元素
$(":selected")?適用于option

來自為知筆記(Wiz)

轉載于:https://www.cnblogs.com/weloveshare/p/5325683.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

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