JavaScript與JQuery框架基礎(chǔ)入門教程
更新時間：2021年07月12日 15:05:18 作者：cgblpx
這篇文章主要介紹了jQuery和JavaScript入門基礎(chǔ)知識學(xué)習(xí)指南,jQuery是當(dāng)下最主流人氣最高的JavaScript庫,需要的朋友可以參考下
一，JS對象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試 js的創(chuàng)建對象</title>
<script>
//2. 創(chuàng)建對象方式2：
var p2 = {
//綁定了屬性
name:"張三",
age:19,
//綁定了函數(shù)
eat:function(a){
console.log(a);
}
}
console.log(p2);
p2.eat(10);//調(diào)用函數(shù)
//1. 創(chuàng)建對象方式1：
//聲明對象
function Person(){}
//創(chuàng)建對象
var p = new Person();
//動態(tài)綁定屬性
p.name="張三" ;
p.age=18 ;
//動態(tài)綁定函數(shù)
p.eat=function(){
console.log("吃豬肉");
}
//查看
console.log(p);
//調(diào)用函數(shù)
p.eat();
</script>
</head>
<body>
</body>
</html>
二，DOM
–1，作用
使用document對象的各種方法屬性。解析網(wǎng)頁里的各種元素。
按照id獲取元素-----getElementById(“id屬性的值”)
按照name獲取元素-----getElementsByName(“name屬性的值”)
按照class獲取元素-----getElementsByClassName(“class屬性的值”)
按照標(biāo)簽名獲取元素-----getElementsByTagName(“標(biāo)簽名”)
在瀏覽器輸出-----write(“要展示的內(nèi)容”)
innerHtml
innerText
style
–2，測試
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試 DOM解析網(wǎng)頁元素</title>
<script>
function method(){
// 4. 獲取標(biāo)簽名是p的
var d = document.getElementsByTagName("p");
d[0].innerHTML="hi...";
console.log(d[0].innerHTML);
// 3. 獲取 class="f"
var c = document.getElementsByClassName("f");
c[0].innerHTML="hi...";
console.log(c[0].innerHTML);
// 2. 獲取name="d"
var b = document.getElementsByName("d");//得到多個元素
// b[0].innerHTML="test..."; //修改第一個元素的內(nèi)容
b[0].style.color="blue"; //修改第一個元素的字的顏色
console.log(b[0].innerHTML);//獲取第一個元素的內(nèi)容
// 1. 獲取id="a1"
var a = window.document.getElementById("a1");//得到一個元素
// a.innerText = "<h1>hello</h1>" ; //修改內(nèi)容
// document.write( a.innerText ); //直接向網(wǎng)頁寫出數(shù)據(jù)
// //innerText和innerHtml的區(qū)別？innerHtml能解析HTML標(biāo)簽
// a.innerHtml = "<h1>hello</h1>" ; //修改內(nèi)容
// document.write( a.innerHtml ); //直接向網(wǎng)頁寫出數(shù)據(jù)
}
</script>
</head>
<body>
<div name="d" onclick="method();">我是div1</div>
<div name="d">我是div2</div>
<div class="f">我是div3</div>
<a href="#" id="a1">我是a1</a>
<a href="#" class="f">我是a2</a>
<p class="f">我是p1</p>
<p>我是p2</p>
</body>
</html>
三，Jquery
–1，概述
用來簡化JS的寫法，綜合使用了HTML css js。
語法： $(選擇器).事件
–2，使用步驟
先引入jQuery的文件： 在HTML里使用script標(biāo)簽引入
使用jQuery的語法修飾網(wǎng)頁的元素
–3，入門案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試 jq語法</title>
<!-- 1. 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 2. 在網(wǎng)頁中嵌入JS代碼 -->
<script>
// 點(diǎn)擊p標(biāo)簽，修改文字
function fun(){
//dom獲取元素
var a = document.getElementsByTagName("p");//按照標(biāo)簽名獲取元素
a[0].innerHTML="我變了。。。";//修改文字
//jq獲取元素 -- jq語法： $(選擇器).事件
$("p").hide();//隱藏元素
$("p").text("我變了33333。。。");//修改文字
}
</script>
</head>
<body>
<p onclick="fun();">你是p2</p>
</body>
</html>
–4，jQuery的文檔就緒
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試 jq的文檔就緒</title>
<!-- 1. 導(dǎo)入jq文件 -->
<script src="jquery-1.8.3.min.js"></script>
<script>
//寫法1的問題：想用的h1還沒被加載，用時會報(bào)錯
// 解決方案：寫在h1加載之后 + 使用文檔就緒函數(shù)(先導(dǎo)入jq)
// document.getElementsByTagName("h1")[0].innerHTML="我變了。。";
//寫法2的：使用文檔就緒函數(shù)(先導(dǎo)入jq)--是指文檔都就緒了再用元素
$(document).ready(function(){
//document.getElementsByTagName("h1")[0].innerHTML="我變了。。";//js的dom寫法
$("h1").text("我變了。。");//jq的寫法
});
</script>
</head>
<body>
<h1>我是h1</h1>
</body>
</html>
四，JQuery的語法
–1，選擇器
標(biāo)簽名選擇器： $(“div”) – 選中div
id選擇器： $("#d1") – 選中id=d1的元素
class選擇器： $(".cls") – 選中class=cls的元素
屬性選擇器： $("[href]") – 選中有href屬性的元素
高級選擇器： $(“div.d3”) – 選中class=d3的div
–2,常用函數(shù)
text() html() val() — 獲取或者設(shè)置值
hide() – 隱藏
$(“p”).css(“background-color”,“yellow”); --設(shè)置樣式
show()—顯示
fadeIn() — 淡入
fadeOut() — 淡出
–3,常用事件
單擊事件–click !!!
雙擊事件–dblclick
鼠標(biāo)移入事件–mouseenter
鼠標(biāo)移出事件–mousleave
鼠標(biāo)懸停事件–hover
鍵盤事件–keydown keyup keypress
–4,練習(xí)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試 jq的練習(xí)</title>
<!-- 1. 引入jq -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 2. 使用jq語法做練習(xí) 語法：$(選擇器).事件 -->
<script>
// jq文檔就緒函數(shù)：：保證元素都被加載過了，就可以放心使用了，不然會報(bào)錯
$(function(){
// 練習(xí)1：單擊id=d1的元素，隱藏id=p1的
$("#d1").click(function(){
$("#p1").hide();
})
});
$(function(){
// 練習(xí)2：雙擊class="dd"的元素，給div加背景色
$(".dd").dblclick(function(){
$("div").css("background-color","green");
})
// 練習(xí)3：鼠標(biāo)進(jìn)入 id="d1"的div，隱藏有href屬性的元素
$("#d1").mouseenter(function(){
$("[href]").hide();
})
});
</script>
</head>
<body>
<div id="d1">我是div1</div>
<div class="dd">我是div2</div>
<div>我是div3</div>
<div class="dd">我是div4</div>
<p id="p1">我是p1</p>
<p>我是p2</p>
<a class="dd">我是a1</a>
<a href="#">我是a2</a>
<a href="#">我是a3</a>
</body>
</html>
總結(jié)
本篇文章就到這里了，希望能給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
這篇文章主要為大家介紹了js簡單封裝監(jiān)聽快捷鍵對象及使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
如果文字過長,則將過長的部分變成省略號顯示...2006-06-06
這篇文章主要為大家介紹了JavaScript代碼優(yōu)化技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
一篇文章學(xué)會jsBridge的運(yùn)行機(jī)制
JSBridge是一座用JavaScript搭建起來的橋，搭建這座橋的目的也很簡單，讓native可以調(diào)用web的js代碼，讓web可以 “調(diào)用” 原生的代碼。本文主要通過分析源碼講解jsBridge的運(yùn)行機(jī)制，感興趣的朋友一起來看看吧2021-09-09
字節(jié)飛書面試promise.all實(shí)現(xiàn)示例
這篇文章主要為大家介紹了字節(jié)飛書面試promise.all實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
精確到按鈕級別前端權(quán)限管理實(shí)現(xiàn)方案
這篇文章主要為大家介紹了精確到按鈕級別前端權(quán)限管理實(shí)現(xiàn)方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了Web項(xiàng)目如何配置Eslint過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
微信小程序獲取用戶openId的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序獲取用戶openId的實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序 瘦身技巧與方法詳解的相關(guān)資料,現(xiàn)在微信小程序 提交代碼只有1M大小的限制，這就對開發(fā)者提出難題了，這里提供了相關(guān)方法技巧，需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了js中yield參數(shù)應(yīng)用示例深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08