学习笔记（七）——jQuery（一）
生活随笔
收集整理的這篇文章主要介紹了
学习笔记（七）——jQuery（一）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Jquey就是一款跨主流瀏覽器的JavaScript庫，簡化JavaScript對HTML操作就是封裝了JavaScript，能夠簡化我們寫代碼的一個JavaScript庫
文章目錄
- 一、JQ的引入
- 1.1、本地文件引入
- 1.2、CDN引入
- 1.3、為什么要引入 jQ
- 二、基本使用
- 2.1、作為函數使用
- 2.1.1、作為一般函數使用
- 2.1.2、參數為選擇器字符串
- 2.1.3、參數為 dom 對象
- 2.1.4、參數 html 標簽字符串
- 2.2、作為對象使用
- 2.2.1、遍歷數組元素
- 2.2.2、獲取所有元素
- 2.3、補充知識點
- 三、選擇器
- 四、層次選擇器
一、JQ的引入
JQ的引入有兩種方式：本地文件引入、CDN引入。
1.1、本地文件引入
<script src="jquery-1.11.3.min.js"></script> <script type="text/javascript">$(function () {alert('hello');}); </script>注意：jquery-1.11.3.min.js是從官網上下載好的，放在本地。
1.2、CDN引入
打開https://www.bootcdn.cn/jquery/，選擇jQ版本，然后選擇</>復制<script>標簽
(要用CDN引入最重要的一點是：)
代碼：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script type="text/javascript">$(function () {alert('hello');}); </script>1.3、為什么要引入 jQ
回顧 javascript，我們知道 JavaScript 定位到HTML的控件有三種基本的方式：
通過ID屬性：document.getElementById()
通過NAME屬性：document.getElementsByName()
通過標簽名：document.getElementsByTagName()
我們發現，JavaScript 的方法名太長了，不易于書寫代碼……
引入jQ后，我們就可以用$()根據傳入的參數判斷它是獲取ID屬性的控件還是標簽名的控件了。
示例：
(這里我就寫主要代碼部分) <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script> <body>文本框：<input type="text" id="inp"><button id="btn1">js版本</button><button id="btn2">jQ版本</button><script type="text/javascript">// 使用JavaScriptvar btn1 = document.getElementById('btn1');btn1.onclick = function(){var text1 = document.getElementById("inp").value;console.log(text1);}// 使用jQuery$(function () { $("#btn2").click(function(){var text2 = $("#inp").val();console.log(text2);});});</script> </body>結果：
二、基本使用
2.1、作為函數使用
2.1.1、作為一般函數使用
格式：$(回調函數)
作用：當文件加載完畢之后，執行此回調函數
示例：
(這里我就寫主要代碼部分) <script type="text/javascript">$(function () { //內部代碼等到文檔加載完畢之后才會執行console.log("你好");});console.log("我不好"); </script>結果：
2.1.2、參數為選擇器字符串
作用：查找所有匹配的標簽，并且封裝為 jQuery 對象
示例：
(這里我就寫主要代碼部分) <body><button id="btn1">點我</button><script type="text/javascript">$(function () {$("#btn1").click(function(){console.log(this);console.log($(this).html());});});</script> </body>結果：
補充：注意到示例中獲取jQ對象后，用了this ，這里this指代獲取的dom對象。
2.1.3、參數為 dom 對象
作用：會將一個 dom 對象轉為 jQuery 對象
示例：
(這里我不詳細寫了，具體看上個示例) console.log($(this).html())2.1.4、參數 html 標簽字符串
作用：創建標簽對象并封裝為 jQuery對象
示例：
(這里我就寫主要代碼部分) <body><div><button id="btn1">點我，快點我</button></div><script type="text/javascript">$(function () {$("#btn1").click(function(){$('<input type="text" id="inp">').appendTo("div");//把按鈕的值顯示到文本框中，即向input賦值$("#inp").val($("#btn1").html());});});</script> </body>結果：
注意：
①若字符串用' '，如果 html 標簽字符串中也要有字符串則全用" "；
②若字符串用" "，如果 html 標簽字符串中也要有字符串則全用' '；
如：
2.2、作為對象使用
2.2.1、遍歷數組元素
示例：
<script type="text/javascript">var arr = [1,2,3]$.each(arr,function(index,element){ //index元素下標 element元素console.log("index:"+index+"，element:"+element);});// var arr = [1,'str',3]// $.each(arr,function(){ //index元素下標 element元素// console.log(this);// }); </script>結果：
index:0，element:1 index:1，element:2 index:2，element:32.2.2、獲取所有元素
示例：
<body><button type="button">點我，快點我1</button><button type="button">點我，快點我2</button><button type="button" id="btn">點我，快點我3</button><button type="button">點我，快點我4</button><script type="text/javascript">//獲取所有的按鈕var btns = $("button");//console.log(btns.length); 結果：4// 取出第二個按鈕的文本內容// 注意：btns[1]或btns.get(1) 獲取的元素是一個dom對象console.log(btns[1].innerHTML);console.log(btns.get(1).innerHTML);// 輸出所有按鈕的文本btns.each(function(){console.log(this.innerHTML);});// 輸出“點我，快點我3”按鈕是所有按鈕里面的第幾個console.log($("#btn").index());</script> </body>結果：
2.3、補充知識點
① $符號可以用 jQuery 代替，二者是等價的
如：
② 注意 JavaScript 對象與 jQuery對象的區別：
用JavaScript語法創建的對象叫做JavaScript對象 用JQurey語法創建的對象叫做JQuery對象 $()返回的對象，是jQ對象 Jquery對象只能調用Jquery對象的API JavaScript對象只能調用JavaScript對象的API如：
// 使用JavaScript var btn1 = document.getElementById('btn1'); //這里btn1返回的是js對象，onclick是js的API btn1.onclick = function(){var text1 = document.getElementById("inp").value;console.log(text1); }// 使用jQuery $(function () { //$()返回的是jQ對象，它不能調用onclick，click是jQ的API$("#btn2").click(function(){var text2 = $("#inp").val();console.log(text2);}); });三、選擇器
選擇器的基本語法和 css 使用選擇器一致，只不過進行了擴展，只有在進行調用$() 并且將選擇器作為參數傳入才可以有作用，如：$("選擇器"):根據選擇器規則在整個頁面中查找所有匹配的標簽數組，并且封裝成 jQuery對象返回。
示例 1：
<body> <div id="box">div</div><div>div2</div><div class="divclass">div5</div><div class="divclass">div6</div><span>span1</span><span class="divclass">span2</span><span>span3</span><ul><li>編程語言</li><li class="s1">python</li><li class="s2">java</li><li class="s2"><span>C/C++</span></li><span>IT互聯網</span></ul><script type="text/javascript">// 標題選擇器 設置所有的div顏色$("div").css({"background":"red"});// id選擇器 選擇id為box的元素，并且設置顏色$("#box").css({"background":"green"});// 類選擇器 選擇所有類名為divclass的元素，并選擇顏色$(".divclass").css({"background":"red"});// 并集選擇器 設置所有的span和div$("div,span").css({"background":"red"});// 所有class=divclass的div$("div.divclass").css({"background":"red"});// 通配符選擇器 選擇所有元素，設置顏色$("*").css({"background":"red"});</script> </body>示例 2
<script type="text/javascript">// 1.選中ul下的所有span$("ul span").css("background","red");// 2.選中ul下的所有子元素span$("ul>span").css("background","red");// 3.選中class=sku的下一個li$(".sku+li").css("background","red");// 4.選中ul下class=sku的后面所有兄弟元素$("ul .sku~*").css("background","red");// 過濾選擇器// 選中第一個div$("div:first").css("background","red");// 選中最后一個div$("div:last").css("background","red");// 選中class屬性不為box$("div:not(.box)").css("background","red");// 選中第二個和第三個li$("li:lt(3):gt(0)").css("background","red");// 選中第二個li$("li:eq(1)").css("background","red");// 選中內容為python學院的li$("li:contains(python學院)").css("background","red");// 選擇有class屬性為sku的li$("li[class=sku]").css("background","red");// $("li").eq(0);</script>四、層次選擇器
| parent( ) | 父元素 |
| children( ) | 子元素 |
| siblings( ) | 兄弟 |
| find( ) | 后代 |
| parents( ) | 祖先 |
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><script src="jquery-3.1.1.js"></script><style>* {margin: 0;padding: 0;}ul {list-style: none;}.wrap {width: 330px;height: 30px;margin: 100px auto 0;padding-left: 10px;background-image: url(images/bg.jpg);}.wrap li{background-image: url(images/libg.jpg);}.wrap > ul > li {float: left;margin-right: 10px;position: relative;}.wrap a {display: block;height: 30px;width: 100px;text-decoration: none;color: #000;line-height: 30px;text-align: center;}.wrap li ul {position: absolute;top: 30px;/* 隱藏 */display: none;}</style><body><!-- 給一級菜單設置鼠標移入事件，二級菜單顯示給一級菜單設置鼠標移出事件，二級菜單隱藏--><div class="wrap"><ul><li><a href="javascript:void(0);">一級菜單1</a><ul><li><a href="javascript:void(0);">二級菜單1</a></li><li><a href="javascript:void(0);">二級菜單2</a></li><li><a href="javascript:void(0);">二級菜單3</a></li></ul></li><li><a href="javascript:void(0);">一級菜單1</a><ul><li><a href="javascript:void(0);">二級菜單1</a></li><li><a href="javascript:void(0);">二級菜單2</a></li><li><a href="javascript:void(0);">二級菜單3</a></li></ul></li><li><a href="javascript:void(0);">一級菜單1</a><ul><li><a href="javascript:void(0);">二級菜單1</a></li><li><a href="javascript:void(0);">二級菜單2</a></li><li><a href="javascript:void(0);">二級菜單3</a></li></ul></li></ul></div><script type="text/javascript">var o = 0;$(".wrap>ul>li").mouseover(function(){//顯示就是更改display屬性為block// $(this).children("ul").css("display","block");// 顯示函數，本質上還是更改display屬性值為block$(this).children("ul").show();});$(".wrap>ul>li").mouseout(function(){// $(this).children("ul").css("display","none");// 隱藏函數，本質上還是更改display屬性值為none$(this).children("ul").hide();});</script></body> </html>結果：
想學習 jQuery 基本使用的話可以看我這兩篇博客：
學習筆記（八）——jQuery（二）
想了解更多關于 jQuery 的 API 使用話推薦查看：
jQuery API 中文文檔
總結
以上是生活随笔為你收集整理的学习笔记（七）——jQuery（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习笔记（六）——JavaScript（
- 下一篇： 学习笔记（八）——jQuery（二）