jQuery入門基礎
- jQuery是什么
- jQuery的安裝
- 語法
- jQuery 語法
- jQuery物件轉換成原生的Dom物件
- 通過get方法
- 通過下標的形式
- 原生Dom物件轉jQuery物件
- 檔案就緒事件
jQuery是什么
jQuery是一個JavaScript函式庫，
jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫，
jQuery庫包含以下功能：
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函式
JavaScript 特效和影片
HTML DOM 遍歷和修改
AJAX
Utilities
除此之外，Jquery還提供了大量的插件，
jQuery的安裝
所謂安裝就是使用script標記引入jquery類別庫，
? 1 使用CDN
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
? 2.使用本地化的檔案
把檔案放入到本地檔案夾中，然后匯入，
<script src="js/jquery.min.js"> </script>
語法
通過 jQuery，您可以選取（查詢，query） HTML 元素，并對它們執行"操作"（actions），
jQuery 語法
jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作，
基礎語法： $(selector).action()
美元符號定義 jQuery
選擇符（selector）“查詢"和"查找” HTML 元素
jQuery 的 action() 執行對元素的操作
jQuery物件轉換成原生的Dom物件
通過get方法
console.log($('#d1 span').get(0).innerText)
通過下標的形式
console.log($('#d1 span')[0].innerText)
原生Dom物件轉jQuery物件
使用$()包裹，即可轉換成jQuery物件
console.log($(d1).text())
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../../js/jquery.min.js"></script>
<!-- <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> -->
<style>
#d1 span{
color: red;
}
</style>
</head>
<body>
<div id="d1">div1
<span>這是一句話</span>
</div>
<script>
function getEl(){
console.log($('#d1 span').get(0).innerText)
console.log($('#d1 span')[0].innerText)
console.log($(d1).text())
console.log($('#d1 span').text())
}
</script>
<button onclick="getEl()">根據id獲取元素的文本</button>
</body>
</html>
效果截圖：
檔案就緒事件
為了防止檔案在完全加載（或就緒）之前運行 jQuery 代碼（即在 DOM 加載完成后才可以對 DOM 進行操作）我們可以把所有 jQuery 函式位于一個 document ready 函式中，
因為如果在檔案沒有完全加載之前就運行函式，操作可能失敗，
寫法一：
$(document).ready(function(){ // 開始寫 jQuery 代碼... });
寫法二（簡潔寫法）:
$(function(){ // 開始寫 jQuery 代碼... });
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../js/jquery.min.js" ></script>
<script >
$(function(){
alert('檔案加載成功了，')
$('h1').css({
'color':'red'
})
})
</script>
<title></title>
</head>
<body>
<div>
<h1>Keafmd</h1>
<p>牛哄哄的柯南</p>
</div>
</body>
</html>
效果截圖：
alert屬于阻塞函式，所以會先彈出提示框，此時也證明檔案已經準備就緒了，此時由于被阻塞所以修飾并沒有生效，
當我們點擊確認后，修飾生效，
看完如果對你有幫助，感謝點贊支持！
如果你是電腦端，看到右下角的 “一鍵三連” 了嗎，沒錯點它[哈哈]
加油！
共同努力！
Keafmd
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/225870.html
標籤：其他
上一篇：Typora配色和標題自帶序號