jQuery學習筆記

時間 2019-12-09

標籤 jquery 學習筆記欄目 JQuery 简体版

原文原文鏈接

一、簡介

jQuery 是一個JS函數庫，它對JS進行了封裝，使用戶可以方便的操做HTML元素、處理事件、實現動畫效果。css

功能

jQuery庫能夠實現如下功能：html

HTML 元素選取
HTML 元素操做
CSS 操做
HTML 事件函數
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX 異步數據請求

使用方式

使用jQuery時，能夠採用相似於經過外部方式在<head>區域引入JS的方法引入jQuery。jquery

<head>
<script src="../static/js/jquery.js"></script>
</head>

二、語法

jQuery的基本語法是：$(selector).action()
$(selector)是jQuery選擇器，表明選取的元素，action()表明元素事件，包括對元素進行的操做，以及元素髮生的事件。angular2

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

其中：$("button")爲選擇器，click()是$("button")元素的事件，function()爲事件處理函數，表示當click()事件發生時執行的程序，hide()是對$("p")元素進行的操做。通常而言，爲了防止文檔在加載就緒以前運行jQuery代碼，還須要將上面的jQuery代碼放置到一個文檔就緒事件的函數中。app

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

選擇器

名稱	示例	說明
元素選擇器	$("p")	選擇全部 <p>
#id 選擇器	$("#test")	經過元素的 id 屬性，選取指定值的元素
.class 選擇器	$(".test")	經過元素的 class 屬性，選取指定值的元素

操做

jQuery 擁有可操做 HTML 元素和屬性的強大方法。操做元素的方法主要有：異步

分類	方法	說明
增添元素	after()	在被選元素以後插入新元素
	before()	在被選元素以前插入新元素
刪除元素	remove()	刪除備選元素
效果	hide()	隱藏備選元素
	show()	顯示備選元素
	toggle()	在顯示與隱藏效果之間切換備選元素

操做元素屬性的方法主要有：ide

分類	方法	說明
對元素內容的操做	text()	設置或返回所選元素的文本內容
	html()	設置或返回所選元素的內容
	val()	設置或返回表單字段的值
	append()	在被選元素內部的結尾插入指定內容
	prepend()	在被選元素內部的開頭插入指定內容
對元素屬性的操做	attr()	設置/改變屬性值
對樣式進行操做	css()	對元素的CSS屬性進行操做，也能夠使用attr()方法
對尺寸進行操做	height()	對元素的高度進行操做，也能夠使用attr()方法
	width()	對元素的寬度進行操做，也能夠使用attr()方法