A.今天學到了什么
1.輸出方式
<script>
// console.log("hello world");
alert("hello")
</script>
2.變量申明
<script>
// javascript 是一種弱類型語言，聲明變量的時候，不用聲明他的類型
// var a=10;
// var str="hello world";
// 可以先聲明在賦值
</script>
<script>
// 如果沒有給變量賦值 會輸出 undefined
var a;
console.log(a);
</script>
3.申明提前
<script>
// js在運行的時候將所有聲明的變量谭确，集中到作用域的頂部集中創(chuàng)建岛啸，賦值留在原地翠霍；
console.log(a);
// var a=10;
let a=10;
</script>
4.數(shù)據(jù)類型
4.1基本數(shù)據(jù)類型
<script>
// 1.number型
var a=10;
// 如何判斷一個變量的類型 typeof
console.log(typeof a);
// 2.String 型
var str="hello world";
console.log(typeof str);
// 3 boolean型
var c=true;
console.log(typeof c);
// 4.undefined型
var d;
console.log(typeof d);
</script>
4.2引用類型
<script>
//數(shù)組
var a=[1,2,3];
// 讀取數(shù)組的值
console.log(a[0]);
// 獲取數(shù)組的長度
console.log(a.length);
// 向數(shù)組的尾部添加一個值
a[a.length]=4;
console.log(a);
</script
5.對象
<script>
// 1.聲明對象
var obj={
name:"xuao",
age:22
}
// 2.讀取對象屬性
console.log(obj.name);
// 3.給變量添加屬性
obj.sex="男";
console.log(obj);
</script>
5.函數(shù)
<script>
// function+函數(shù)名
// 1.沒有返回值
function say(){
console.log("沒有返回值的函數(shù)");
}
// 調用
say();
// 2.有返回值
function eat(){
return "eat"
}
var a=eat();
console.log(a);
</script>
6.變量
<script>
// 在函數(shù)外部聲明的變量叫全局變量
var a=10;
function fn(){
// 在函數(shù)內部聲明的變量叫局部變量
var b= 20;
}
console.log(b);
</script>
7.數(shù)據(jù)類型的轉換
7.1基本轉換
<script>
// 1.string ,boolean--> number 語法 Number(str)
// NaN 不是一個數(shù)字
// 只能識別純數(shù)字的字符串
var str="10";
var b="true";
var c="10px";
console.log(Number(str));
// false =0 true =1;
console.log(Number(false));
console.log(Number(c));
</script>
7.2自動轉換
<script>
// 1.算術計算中的自動轉換+,-,*,/,%
// 在算術計算中，會將參與計算的值先轉換為number再計算
var a="10";
var b=true;
var c=a-b;
var c=Number(a)-Number(b);
console.log(c);
// 特殊：在+運算中德澈，倘若有一邊為字符串 +就變成字符串拼接
</script>
7.3比較運算的自動轉換
<script>
// 比較運算
// 比較運算的自動轉換：默認先將所有的類型轉為number再進行比較
// 比較運算的結果返回boolean
var a=20;
var b=true;
console.log(a>b);
</script
7.4字符串類型轉換成number
<script>
//
var a="12px";
var b="12.33px";
// 轉換為整數(shù)
console.log(parseInt(a));
// 轉換為小數(shù)
console.log(parseFloat(b));
// 必須要以數(shù)字開頭
var c="p1222";
console.log(parseInt(c));
</script>
7.5任意類型轉化為字符串類型
<script>
// 兩種方法
var a=10;
console.log(a.toString());
console.log(String(a));
</script>
7.6任意類型轉換為boolean類型
<script>
// 語法 boolean();
// 特點 ：在JS中占有五中值為false "" 0 NaN undefined null
var a=[1,2,3];
var obj={
name:"xxx"
}
var b=null;
console.log(Boolean(obj));
console.log(Boolean(b));
</script>
8.自增運算符
<script>
var a=10;
// a++;
// ++在后 先運算再自增
// ++在前 先自增再運算
b=a++ +1;
console.log(a);
console.log(b);
</script>
9.遍歷
<script>
// 遍歷
var arr=[1,2,3,4];
for(var key in arr){
console.log(arr[key]);
}
var obj={
name:"ahfdshk",
age:29
}
for( var k in obj){
console.log(k)
console.log(obj[k])
}
</script>
10.塊級作用域
<script>
// es5之前沒有塊級作用域
for(var i=0;i<5;i++){
console.log("hello world")
}
console.log(i);
// eS6之后就有塊級作用域
for(let k=0;i<5;i++){
console.log("hello world")
}
console.log(k);
</script>
11.break和continue的區(qū)別
<script>
for(let i=0;i<5;i++){
if(i==3){
break;
}
console.log(i)
}
</script>
12.如何獲取一個節(jié)點
<p id="test" class="one">hello wrold</p>
<script>
// 1.如何獲取一個節(jié)點,di獲取
var test =document.getElementById("test");
// 2.修改元素的內容 obj.innerHTML
test.innerHTML="change";
console.log(test)
</script
12.1 一個事件
<p id="p">hello world</p>
<button id="btn">changge</button>
<script>
var p=document.getElementById("p");
var btn=document.getElementById("btn");
btn.onclick=function(){
p.innerHTML="改變了"
}
</script
12.2通過標簽獲取
<p>hello world</p>
<p>hello world</p>
<button id="btn">btn</button>
<script>
// 通過標簽名獲取,獲取的是一個集合
var p=document.getElementsByTagName("p");
console.log(p);
// p[0].innerHTML="change";
var btn = document.getElementById("btn");
btn.onclick=function(){
for(let i=0;i<p.length;i++){
p[i].innerHTML = "change";
}
}
</script>
12.3 通過class名獲取
<!-- p.one{hello world}*4 +tab -->
<p class="one">hello world</p>
<p class="one">hello world</p>
<p class="one">hello world</p>
<p class="one">hello world</p>
<script>
var ps = document.getElementsByClassName("one");
console.log(ps);
</script>
12.4 通過選擇器獲取
<div class="one">hello world</div>
<div class="one">hello world</div>
<div class="one">hello world</div>
<script>
var one=document.querySelectorAll(".one");
console.log(one);
</script>
