文章目錄
- 一,JS函式
- --1,測驗
- 二,JS物件
- --1,測驗
- 三,DOM技術
- --1,概述
- --3,document物件
- --3,測驗
- 四,JSON
- --1,概述
- --2,測驗
一,JS函式
–1,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js函式</title>
<script>
//統計1~100里4的整數倍數的和
//方式1:
//1. 定義js函式
function test1(){
var sum = 0 ;//定義變數,記錄總和
for(var i=1;i<=100;i++){
if(i % 4 == 0){//4的整數倍
sum = sum + i ; //求和
}
}
return sum ;//把算完的和回傳給呼叫者
}
//2.呼叫函式
var a = test1();
console.log(a);
//方式2:
//1.定義函式
var test2 = function(){
console.log(100);
}
var test3 = function(){
return 666; //回傳值,交給呼叫者保存
}
var test4 = function(a,b,c){//引數串列等著呼叫者傳入具體的值
return a+b+c;
}
//2.呼叫函式
var tt = test4(1,2,3);
console.log(tt);
var t = test3();
console.log(t);
test2();
</script>
</head>
<body>
</body>
</html>
二,JS物件
–1,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 JS的物件</title>
<script>
//2. js的自定義物件
//方式2: {name: 'jack', age: 20}
//練習:創建新的js物件
var car = {
//系結屬性 k:v
color : 'red' ,
price : 9.9 ,
//系結函式
run : function(a,b){
console.log(a+b);
},
stop : function(x,y,z){
return x+y+z ;//回傳給呼叫者
}
}
//呼叫屬性
console.log(car.color + car.price);
//呼叫函式
var res = car.stop(1,2,3);
console.log(res);
car.run(1,2);
console.log(car);
var teacher = {
//系結屬性
name : 'jack',
age : 20 ,
//系結函式
run : function(){
console.log(100);
},
eat : function(){
console.log(200);
}
}
teacher.eat();//呼叫函式
teacher.run();
console.log( teacher.name );//呼叫屬性的值可以列印或修改
//方式1:
function Student(){}//宣告物件
var s = new Student();//創建物件
//系結屬性
s.name='蔡徐坤';
s.hobby='唱跳rap';
//系結函式
s.sing=function(){
console.log("solo...");
}
console.log(s);
s.sing();
function Person(){}//宣告物件
var p = new Person();//創建物件
//動態的給物件系結屬性
p.name = 'jack';
p.age = 20;
//動態的給物件系結函式
p.eat = function(){
console.log(100);
}
console.log(p);
p.eat();//呼叫函式
//1.js的內置物件
//document物件,JSON物件...重點后面講
//window物件的常用功能--了解
// window.alert('123');//彈出框
// window.confirm('請選擇');//確認框
// window.prompt('請輸入');//輸入框
// window.document //獲取document檔案物件
// //string物件的常用功能--了解
// alert('123'.length);//求字串的長度
// alert('123'.concat("hello"));//拼接字串
// //number物件的常用功能--了解
// alert(3.3333.toFixed(2));//約束小數位數,引數是小數的位數
// var a = parseInt('100')+1 ;//把字串轉成數字
// alert(a);//101
</script>
</head>
<body>
</body>
</html>
三,DOM技術
–1,概述
全稱是 檔案物件模型.用來 利用document物件提供的各種屬性和方法,方便快速的定位網頁中的所有元素
–3,document物件
1, 獲取物件: window.document
2, 常用的方法:
按照id的值獲取元素: getElementById(id屬性的值)–只會獲取到一個元素
按照name的值獲取元素: getElementsByName(name屬性的值)–獲取到多個元素 , 存入陣列
按照class的值獲取元素: getElementsByClassName(class屬性的值)–獲取到多個元素 , 存入陣列
按照標簽名的值獲取元素: getElementsByTagName(標簽的名字)–獲取到多個元素 , 存入陣列
直接向網頁輸出: write()
3, 常用的屬性:
title–回傳網頁的標題
id–設定或回傳元素的id
innerHTML–設定或回傳元素的內容
–3,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 DOM技術</title>
<!--
DOM: document object model 檔案物件模型,用來利用js的技術快速的操作元素
利用核心物件document提供的API完成
-->
</head>
<body>
<!-- onclick給元素設定滑鼠點擊事件,呼叫指定函式test1() -->
<div onclick="test1()">我是div1</div>
<div name="n1">我是div2</div>
<div class="c1">我是div3</div>
<span id="d1">我是span1</span>
<span name="n1">我是span2</span>
<a href="#" class="c1">點我</a>
<script>
// 1. 定義函式--當點擊我是div1時觸發
function test1(){
//需求3:輸出第二個class="c1"的元素內容
var data2 = document.getElementsByClassName("c1")[1].innerText;
console.log(data2);
//修改元素內容
// document.getElementsByClassName("c1")[1].innerText='<p>我是p1</p>';//不決議標簽
document.getElementsByClassName("c1")[1].innerHTML='<p>我是p1</p>';//決議
//修改元素的樣式css變字的顏色
document.getElementById("d1").style.color='red' ;
//需求2:輸出第一個name="n1"的元素內容
//document.getElementsByName根據name屬性獲取到多個元素,存入陣列
//[0]按照下標,獲取到陣列里的第一個元素
var data = document.getElementsByName("n1")[0].innerText ;
console.log(data);
//也可以選中元素后,直接修改內容
document.getElementsByName("n1")[0].innerHTML='<h1>我又變了...</h1>' ;
//document物件提供的innerHTML和innerText屬性的區別?前者可以決議HTML代碼
//需求1:輸出了id=d1的元素內容
var a = document.getElementById("d1");//獲取id=d1的元素
console.log(a);//輸出了整個元素
console.log(a.innerHTML);//獲取元素的內容
a.innerHTML='我變了....';//修改元素的內容
}
</script>
</body>
</html>
四,JSON
–1,概述
就是一個字串,作用就是用來,完成 瀏覽器 和 服務器 之間的 資料的交換
規定了 瀏覽器 和 服務器 之間的 資料的 格式 : ’ “name” : “jack” ’
–2,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 JSON字串</title>
<!-- JSON用來完成 瀏覽器和服務器之間 的資料交換 的格式 -->
<script>
// 1. 定義一個簡單的json字串
var a = '"name":"jack"' ;
console.log(a);
console.log(a.length);//求字串的長度
// 2. 定義一個json物件
var b = '{"name":"jack","age":"20"}' ;
console.log(b);
var c = b.concat('hello');//b拼接字串
// 3. 定義一個json陣列
var d ='[{"firstname":"tom","lastname":"chen"},{"firstname":"jerry","lastname":"wang"}]';
console.log(d);
//問題: 決議json字串里的資料太麻煩,還要對字串進行切割截取....
//解決方案:把一個json字串轉成JS物件,再通過物件方便的呼叫屬性的值--利用JSON物件
</script>
</head>
<body>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298395.html
標籤：其他