jQuery 選擇器用法基礎入門示例
阿新 • • 發佈：2020-01-09
本文例項講述了jQuery 選擇器用法。分享給大家供大家參考，具體如下：
今兒個開始學習jQuery，在學習jQuery之前我們應該掌握js，我之前也寫過幾篇筆記，但是隻是小部分的知識，js也不是很難 可以自己簡單的看看。以後寫js會經常用到jQuery這個庫。
1 安裝jQuery
1.1 從官網下載
可以從 jQuery.com 下載。有兩個版本可以選擇：
- production：被精簡壓縮過，常用於實際網站。
- development：原始碼，可讀性高，常用於開發階段。
1.2 CDN引入
百度CDN：
<head> <title>learn javascript</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head>
新浪CDN：
<head> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> </head>
2 文件就緒
文件就緒是為了防止在HTML文件還未完成載入時就執行了js 這樣可能會出現一些錯誤，比如說在文件還沒有載入完成 js程式碼就執行了隱藏某一個還沒載入的元素時 就會出錯。
<script>
$(document).ready(function() {
// 在這裡 HTML文件已經被載入完成 在這裡操作是安全的。
})
</script>3 選擇器
現在要說說jQuery的語法了 jQuery對DOM操作是很方便的 jQuery使用選擇器：
- $("*")：選擇所有元素。
- $(this)：選擇當前元素。
- $(.className)：選擇class為"className"的元素。
- $("p.className")：選擇class為"className"的<p>元素。
- $("#demo")：選擇id為demo的元素。
- $("h1#demo")：選擇id為demo的<h1>元素。
- $("h1:first")：選擇第一個<h1>元素。
- $("ul li:first")：選擇第一個<ul>元素下第一個<h1>元素。
- $("ul li:first-child")：選擇每個<ul>元素下的第一個<h1>元素。
- $("[href]")：選擇帶有href屬性的元素。
- $("a[target='_blank']")：選擇target屬性等於blank的<a>元素。
- $("a[target!='_blank']")：選擇target屬性不等於blank的<a>元素
3.1 示例
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p id="p1">文字</p>
</body>
{{--js--}}
<script>
$(document).ready(function() {
$("#p1").hide()
})
</script>
</html>
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於jQuery相關內容感興趣的讀者可檢視本站專題：《jQuery頁面元素操作技巧彙總》、《jQuery常見事件用法與技巧總結》、《jQuery常用外掛及用法總結》、《jQuery擴充套件技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程式設計有所幫助。