//1.1 什么是 jQuery ?
/*
jQuery是一個JavaScript函式庫。
jQuery是一個輕量級的"寫的少,做的多"的JavaScript庫。
jQuery庫包含以下功能:
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函式
JavaScript 特效和影片
HTML DOM 遍歷和修改
AJAX
Utilities
提示: 除此之外,jQuery還提供了大量的插件
*/
//1.2 如何使用jQuery
/*
jQuery是一個JavaScript腳本庫,不需要特別的安裝,只需要我們在頁面標簽內中,通過<script>標簽引入jQuery庫即可
jQuery下載地址:https://jquery.com/download/
*/
//1.3 jQuery的語法
/*
jQuery語法是通過選取 HTML 元素,并對選取的元素執行某些操作
基礎語法:$(selector).action();
- $美元符號定義jQuery
- selector 選擇符需要查找的元素 支持css1~css3中的主流選擇器
- action() 執行對元素的操作
例如:
$("p").hide();//隱藏所有 <p> 元素
*/
//1.0 jQuery選擇器
/*
頁面的任何操作都需要節點的支撐,開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。
jQuery提供了一系列的選擇器幫助開發者達到這一目的,讓開發者可以更少的處理復雜選擇程序與性能優化,更多專注業務邏輯的撰寫。
jQuery幾乎支持主流的css1~css3選擇器的寫法,我們從最簡單的也是最常用的開始學起:
*/
//1.1 ID選擇器 $("#id");
/*
id選擇器也是基本的選擇器,jQuery內部使用JavaScript函式document.getElementById()來處理ID的獲取。
原生語法的支持總是非常高效的,所以在操作DOM的獲取上,如果能采用id的話盡然考慮用這個選擇器
注意:id是唯一的,每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id,
將只匹配該id選擇集合的第一個DOM元素。但這種行為不應該發生;有超過一個元素的頁面使用相同的id是無效的
*/
//通過ID選擇器獲取元素
//1.0 jQuery選擇器之基本篩選選擇器
/*
很多時候我們不能直接通過基本選擇器與層級選擇器找到我們想要的元素,
為此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。
篩選選擇器很多都不是CSS的規范,而是jQuery自己為了開發者的便利延展出來的選擇器
*/
//篩選選擇器的用法與CSS中的偽元素相似,選擇器用冒號":"開頭,基本篩選器的描述見jQuery API檔案:*/
/*
選擇器
$(":first") 獲取匹配第一個元素 例如:$('li:first');
$(":last") 獲取匹配的最后個元素 例如:$('li:last');
$(":not(selector)") 去除所有與給定選擇器匹配的元素 例如:$("input:not(:checked)")
$(":even") 匹配所有索引值為偶數的元素,從 0 開始計數 例如:$("li:even")
$(":odd") 匹配所有索引值為奇數的元素,從 0 開始計數 例如:$("li:odd")
$(":eq(index)") 匹配一個給定索引值的元素,從 0 開始計數 例如:$("li:eq(1)")
$(":gt(index)") 匹配所有大于給定索引值的元素,從 0 開始計數 例如:$("li:gt(0)")
$(":lt(index)") 匹配所有小于給定索引值的元素,從 0 開始計數 例如:$("li:gt(2)")
$(":header") 匹配如 h1, h2, h3之類的標題元素 例如:$(":header").css("background", "#EEE");
$(":animated") 匹配所有正在執行影片效果的元素(只有對不在執行影片效果的元素執行一個影片特效)
例如:$(":header").css("background", "#EEE");
$(":focus") 匹配當前獲取焦點的元素。
$(":root") 選擇該檔案的根元素。在HTML中,檔案的根元素,和$(":root")選擇的元素一樣, 永遠是<html>元素。
示例:設定<html>背景顏色為黃色
$(":root").css("background-color","yellow");
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/53073.html
標籤:HTML(CSS)
