学习笔记（七）——jQuery（一）
生活随笔
收集整理的這篇文章主要介紹了
学习笔记（七）——jQuery（一）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Jquey就是一款跨主流瀏覽器的JavaScript庫，簡化JavaScript對HTML操作就是封裝了JavaScript，能夠簡化我們寫代碼的一個JavaScript庫
文章目錄
- 一、JQ的引入
- 1.1、本地文件引入
- 1.2、CDN引入
- 1.3、為什么要引入 jQ
- 二、基本使用
- 2.1、作為函數(shù)使用
- 2.1.1、作為一般函數(shù)使用
- 2.1.2、參數(shù)為選擇器字符串
- 2.1.3、參數(shù)為 dom 對象
- 2.1.4、參數(shù) html 標(biāo)簽字符串
- 2.2、作為對象使用
- 2.2.1、遍歷數(shù)組元素
- 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是從官網(wǎng)上下載好的，放在本地。
1.2、CDN引入
打開https://www.bootcdn.cn/jquery/，選擇jQ版本，然后選擇</>復(fù)制<script>標(biāo)簽
(要用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()
通過標(biāo)簽名：document.getElementsByTagName()
我們發(fā)現(xiàn)，JavaScript 的方法名太長了，不易于書寫代碼……
引入jQ后，我們就可以用$()根據(jù)傳入的參數(shù)判斷它是獲取ID屬性的控件還是標(biāo)簽名的控件了。
示例：
(這里我就寫主要代碼部分) <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>結(jié)果：
二、基本使用
2.1、作為函數(shù)使用
2.1.1、作為一般函數(shù)使用
格式：$(回調(diào)函數(shù))
作用：當(dāng)文件加載完畢之后，執(zhí)行此回調(diào)函數(shù)
示例：
(這里我就寫主要代碼部分) <script type="text/javascript">$(function () { //內(nèi)部代碼等到文檔加載完畢之后才會執(zhí)行console.log("你好");});console.log("我不好"); </script>結(jié)果：
2.1.2、參數(shù)為選擇器字符串
作用：查找所有匹配的標(biāo)簽，并且封裝為 jQuery 對象
示例：
(這里我就寫主要代碼部分) <body><button id="btn1">點我</button><script type="text/javascript">$(function () {$("#btn1").click(function(){console.log(this);console.log($(this).html());});});</script> </body>結(jié)果：
補充：注意到示例中獲取jQ對象后，用了this ，這里this指代獲取的dom對象。
2.1.3、參數(shù)為 dom 對象
作用：會將一個 dom 對象轉(zhuǎn)為 jQuery 對象
示例：
(這里我不詳細寫了，具體看上個示例) console.log($(this).html())2.1.4、參數(shù) html 標(biāo)簽字符串
作用：創(chuàng)建標(biāo)簽對象并封裝為 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>結(jié)果：
注意：
①若字符串用' '，如果 html 標(biāo)簽字符串中也要有字符串則全用" "；
②若字符串用" "，如果 html 標(biāo)簽字符串中也要有字符串則全用' '；
如：
2.2、作為對象使用
2.2.1、遍歷數(shù)組元素
示例：
<script type="text/javascript">var arr = [1,2,3]$.each(arr,function(index,element){ //index元素下標(biāo) element元素console.log("index:"+index+"，element:"+element);});// var arr = [1,'str',3]// $.each(arr,function(){ //index元素下標(biāo) element元素// console.log(this);// }); </script>結(jié)果：
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); 結(jié)果：4// 取出第二個按鈕的文本內(nèi)容// 注意：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>結(jié)果：
2.3、補充知識點
① $符號可以用 jQuery 代替，二者是等價的
如：
② 注意 JavaScript 對象與 jQuery對象的區(qū)別：
用JavaScript語法創(chuàng)建的對象叫做JavaScript對象 用JQurey語法創(chuàng)建的對象叫做JQuery對象 $()返回的對象，是jQ對象 Jquery對象只能調(diào)用Jquery對象的API JavaScript對象只能調(diào)用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對象，它不能調(diào)用onclick，click是jQ的API$("#btn2").click(function(){var text2 = $("#inp").val();console.log(text2);}); });三、選擇器
選擇器的基本語法和 css 使用選擇器一致，只不過進行了擴展，只有在進行調(diào)用$() 并且將選擇器作為參數(shù)傳入才可以有作用，如：$("選擇器"):根據(jù)選擇器規(guī)則在整個頁面中查找所有匹配的標(biāo)簽數(shù)組，并且封裝成 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互聯(lián)網(wǎng)</span></ul><script type="text/javascript">// 標(biāo)題選擇器 設(shè)置所有的div顏色$("div").css({"background":"red"});// id選擇器 選擇id為box的元素，并且設(shè)置顏色$("#box").css({"background":"green"});// 類選擇器 選擇所有類名為divclass的元素，并選擇顏色$(".divclass").css({"background":"red"});// 并集選擇器 設(shè)置所有的span和div$("div,span").css({"background":"red"});// 所有class=divclass的div$("div.divclass").css({"background":"red"});// 通配符選擇器 選擇所有元素，設(shè)置顏色$("*").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");// 選中內(nèi)容為python學(xué)院的li$("li:contains(python學(xué)院)").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><!-- 給一級菜單設(shè)置鼠標(biāo)移入事件，二級菜單顯示給一級菜單設(shè)置鼠標(biāo)移出事件，二級菜單隱藏--><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");// 顯示函數(shù)，本質(zhì)上還是更改display屬性值為block$(this).children("ul").show();});$(".wrap>ul>li").mouseout(function(){// $(this).children("ul").css("display","none");// 隱藏函數(shù)，本質(zhì)上還是更改display屬性值為none$(this).children("ul").hide();});</script></body> </html>結(jié)果：
想學(xué)習(xí) jQuery 基本使用的話可以看我這兩篇博客：
學(xué)習(xí)筆記（八）——jQuery（二）
想了解更多關(guān)于 jQuery 的 API 使用話推薦查看：
jQuery API 中文文檔
總結(jié)
以上是生活随笔為你收集整理的学习笔记（七）——jQuery（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习笔记（六）——JavaScript（
- 下一篇： 学习笔记（八）——jQuery（二）