JavaScript與JQuery框架基礎入門教程
更新時間：2021年07月12日 15:05:18 作者：cgblpx
這篇文章主要介紹了jQuery和JavaScript入門基礎知識學習指南,jQuery是當下最主流人氣最高的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,
//綁定了函數
eat:function(a){
console.log(a);
}
}
console.log(p2);
p2.eat(10);//調用函數
//1. 創(chuàng)建對象方式1：
//聲明對象
function Person(){}
//創(chuàng)建對象
var p = new Person();
//動態(tài)綁定屬性
p.name="張三" ;
p.age=18 ;
//動態(tài)綁定函數
p.eat=function(){
console.log("吃豬肉");
}
//查看
console.log(p);
//調用函數
p.eat();
</script>
</head>
<body>
</body>
</html>
二，DOM
–1，作用
使用document對象的各種方法屬性。解析網頁里的各種元素。
按照id獲取元素-----getElementById(“id屬性的值”)
按照name獲取元素-----getElementsByName(“name屬性的值”)
按照class獲取元素-----getElementsByClassName(“class屬性的值”)
按照標簽名獲取元素-----getElementsByTagName(“標簽名”)
在瀏覽器輸出-----write(“要展示的內容”)
innerHtml
innerText
style
–2，測試
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試 DOM解析網頁元素</title>
<script>
function method(){
// 4. 獲取標簽名是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..."; //修改第一個元素的內容
b[0].style.color="blue"; //修改第一個元素的字的顏色
console.log(b[0].innerHTML);//獲取第一個元素的內容
// 1. 獲取id="a1"
var a = window.document.getElementById("a1");//得到一個元素
// a.innerText = "<h1>hello</h1>" ; //修改內容
// document.write( a.innerText ); //直接向網頁寫出數據
// //innerText和innerHtml的區(qū)別？innerHtml能解析HTML標簽
// a.innerHtml = "<h1>hello</h1>" ; //修改內容
// document.write( a.innerHtml ); //直接向網頁寫出數據
}
</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標簽引入
使用jQuery的語法修飾網頁的元素
–3，入門案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試 jq語法</title>
<!-- 1. 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 2. 在網頁中嵌入JS代碼 -->
<script>
// 點擊p標簽，修改文字
function fun(){
//dom獲取元素
var a = document.getElementsByTagName("p");//按照標簽名獲取元素
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. 導入jq文件 -->
<script src="jquery-1.8.3.min.js"></script>
<script>
//寫法1的問題：想用的h1還沒被加載，用時會報錯
// 解決方案：寫在h1加載之后 + 使用文檔就緒函數(先導入jq)
// document.getElementsByTagName("h1")[0].innerHTML="我變了。。";
//寫法2的：使用文檔就緒函數(先導入jq)--是指文檔都就緒了再用元素
$(document).ready(function(){
//document.getElementsByTagName("h1")[0].innerHTML="我變了。。";//js的dom寫法
$("h1").text("我變了。。");//jq的寫法
});
</script>
</head>
<body>
<h1>我是h1</h1>
</body>
</html>
四，JQuery的語法
–1，選擇器
標簽名選擇器： $(“div”) – 選中div
id選擇器： $("#d1") – 選中id=d1的元素
class選擇器： $(".cls") – 選中class=cls的元素
屬性選擇器： $("[href]") – 選中有href屬性的元素
高級選擇器： $(“div.d3”) – 選中class=d3的div
–2,常用函數
text() html() val() — 獲取或者設置值
hide() – 隱藏
$(“p”).css(“background-color”,“yellow”); --設置樣式
show()—顯示
fadeIn() — 淡入
fadeOut() — 淡出
–3,常用事件
單擊事件–click !!!
雙擊事件–dblclick
鼠標移入事件–mouseenter
鼠標移出事件–mousleave
鼠標懸停事件–hover
鍵盤事件–keydown keyup keypress
–4,練習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試 jq的練習</title>
<!-- 1. 引入jq -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 2. 使用jq語法做練習 語法：$(選擇器).事件 -->
<script>
// jq文檔就緒函數：：保證元素都被加載過了，就可以放心使用了，不然會報錯
$(function(){
// 練習1：單擊id=d1的元素，隱藏id=p1的
$("#d1").click(function(){
$("#p1").hide();
})
});
$(function(){
// 練習2：雙擊class="dd"的元素，給div加背景色
$(".dd").dblclick(function(){
$("div").css("background-color","green");
})
// 練習3：鼠標進入 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>
總結
本篇文章就到這里了，希望能給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容！
相關文章
JS屬性scrollTop?clientHeight?scrollHeight理解學習
這篇文章主要為大家介紹了JS屬性scrollTop?clientHeight?scrollHeight理解學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Flutter刷新組件RefreshIndicator自定義樣式demo
這篇文章主要介紹了Flutter刷新組件RefreshIndicator自定義樣式demo,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了通用化解決個性化文字換行問題實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了微信小程序 Nginx環(huán)境配置詳細介紹的相關資料,需要的朋友可以參考下2017-02-02
這篇文章主要為大家介紹了pnpm對npm及yarn降維打擊原因詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 合法域名校驗出錯詳解及解決辦法的相關資料,需要的朋友可以參考下2017-03-03
這篇文章主要為大家介紹了js二進制數據及其互相轉化實現詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了9個JavaScript日常開發(fā)小技巧，,需要的朋友可以參考下2020-10-10
這篇文章主要為大家介紹了使用pnpm包管理器替代npm及yarn的命令示例使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家介紹了前端使用koa實現大文件分片上傳示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08