【辰兮要努力】：hello你好我是辰兮，很高興你能來閱讀，昵稱是希望自己能不斷精進，向著優秀程式員前行！
博客來源于專案以及編程中遇到的問題總結，偶爾會有讀書分享，我會陸續更新Java前端、后臺、資料庫、專案案例等相關知識點總結，感謝你的閱讀和關注，希望我的博客能幫助到更多的人，分享獲取新知，大家一起進步!
吾等采石之人，應懷大教堂之心，愿你們奔赴在各自的熱愛中…
文章目錄
- 一、文章序言
- 二、基礎入門
- 三、代碼案例
一、文章序言
最近一段時間我打算系統的整理一下關于前端jQuery的相關使用，分享給初學者，也方便自己學習，如下代碼和截圖均為實踐案例，可親自測驗，歡迎你的閱讀！
什么是 jQuery ？
jQuery是一個JavaScript函式庫，
jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫，
二、基礎入門
先一起簡單的了解一下js原生的部分函式
getElementsByTagName()
定義和用法：getElementsByTagName() 方法可回傳帶有指定標簽名的物件的集合，
語法
document.getElementsByTagName(tagname)
getElementsByClassName
定義和使用：getElementsByClassName() 方法回傳檔案中所有指定類名的元素集合，作為 NodeList 物件，
語法
var x = document.getElementsByClassName("demo");
NodeList 物件代表一個有順序的節點串列，NodeList 物件 我們可通過節點串列中的節點索引號來訪問串列中的節點(索引號由0開始)，
提示： 你可以使用 NodeList 物件的 length 屬性來確定指定類名的元素個數，并回圈各個元素來獲取你需要的那個元素，
getElementById()
語法
document.getElementById("demo");
定義和用法：getElementById() 方法可回傳對擁有指定 ID 的第一個物件的參考，
HTML DOM 定義了多種查找元素的方法，除了 getElementById() 之外，還有 getElementsByName() 和 getElementsByTagName()，
如果沒有指定 ID 的元素回傳 null
如果存在多個指定 ID 的元素則回傳第一個，
三、代碼案例
以下案例均可有詳細截圖，提供給初學者，均可實踐測驗使用
案例一：簡單用上述方法獲取對應的div塊元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初識jQuery</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
window.onload = function (ev) {
// 1.利用原生的JS查找DOM元素
var div1 = document.getElementsByTagName("div")[0];
//如果這里后綴不帶角標默認的是回傳全部div塊
var divAll = document.getElementsByTagName("div");
var div2 = document.getElementsByClassName("box1")[0];
var div3 = document.getElementById("box2");
console.log(div1);
console.log(divAll);
console.log(div2);
console.log(div3);
}
</script>
</head>
<body>
<div></div>
<div class="box1"></div>
<div id="box2"></div>
</body>
</html>
語法代碼實踐案例輸出如下
案例二：利用原生的JS修改背景顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初識jQuery</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
window.onload = function (ev) {
// 1.利用原生的JS查找DOM元素
var div1 = document.getElementsByTagName("div")[0];
//如果這里后綴不帶角標默認的是回傳全部div塊
var divAll = document.getElementsByTagName("div");
var div2 = document.getElementsByClassName("box1")[0];
var div3 = document.getElementById("box2");
console.log(div1);
console.log(divAll);
console.log(div2);
console.log(div3);
// 2.利用原生的JS修改背景顏色
div1.style.backgroundColor = "red";
div2.style.backgroundColor = "blue";
div3.style.backgroundColor = "yellow";
}
</script>
</head>
<body>
<div></div>
<div class="box1"></div>
<div id="box2"></div>
</body>
</html>
案例三：使用jQuery的方法給對應的div塊設定對應的屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初識jQuery</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
window.onload = function (ev) {
// 1.利用原生的JS查找DOM元素
var div1 = document.getElementsByTagName("div")[0];
//如果這里后綴不帶角標默認的是回傳全部div塊
var divAll = document.getElementsByTagName("div");
var div2 = document.getElementsByClassName("box1")[0];
var div3 = document.getElementById("box2");
}
//使用jQuery的方法給對應的div塊設定對應的屬性
$(function () {
var $div1 = $("div");
var $div2 = $(".box1");
var $div3 = $("#box2");
//第一個如果不指定默認獲取全部div塊
console.log($div1);
console.log($div2);
console.log($div3);
$div1.css({
background: "red",
width: "100px",
height: "100px"
});
$div2.css({
background: "blue"
});
$div3.css({
background: "yellow"
});
});
</script>
</head>
<body>
<div></div>
<div class="box1"></div>
<div id="box2"></div>
</body>
</html>
補充： var $div1 = $(“div”);如果不指定默認獲取全部div塊；如下指定是第一個;
非常感謝你閱讀到這里，如果這篇文章對你有幫助，希望能留下你的點贊👍 關注?? 分享👥 留言💬thanks！！！
2021年3月6日22:09:12 愿你們奔赴在自己的熱愛里！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/267396.html
標籤：其他
上一篇：使用微軟Monaco Editor 撰寫在線除錯工具
下一篇：markdown的基本用法