JS的两种引入:
外部引入:
<script type ="text/javascript" src ="xx.js" > </script >
内部引入:
<script type ="text/javascript" >
</script >
JS中的基础方法:
JS声明变量:
关键字:var
基本数据类型:
数值 Number :var a = 10 ;
字符串 String :var b = "123" / var c = '456' ;
布尔类型 Boolean :var d = true / var e = false ;
空对象 null :var f = null ;
未定义类型 undefined :var g;
变量名要求:
1 、数字、字母、下划线和$的 组合
2 、不能以数字开头
3 、不能是关键字和保留字
4 、严格区分大小写
规范:可以使用驼峰命名法
判断相等:
"==" 会判断两个值是否相等
"===" 除判断值之外,还会判断类型
console.log ("5" == 5 );
console.log ("5" === 5 );
console.log ("5" != 5 );
console.log ("5" !== 5 );
类型转换:
console.log(typeof (a));
转数字 (true , false )
console.log(Number (true ));
console.log(Number (false ));
console.log(Number ("123" ));
console.log(Number ("abc" ));
console.log(Number ("a1" ));
console.log(Number ("1a" ));
console.log(Number ("" ));
console.log(Number (" " ));
console.log(Number (undefined ));
console.log(Number (null ));
字符串:
console. log (String (true ));
转布尔值:
非零为真,非空为真。
console.log (Boolean(-1 ));
console.log (Boolean("" ));
隐式转换:
加号两边如果有一个是字符串,就是拼接字符串,其他算术运算符是转化为数值计算。
console.log (3 + true )
console.log (null + 5 )
console.log (false + "2" )
console.log (5 - true )
console.log (7 + null )
console.log (6 + undefined)
转数字:
parseInt ()
console.log(parseInt (5.6 ));
console.log(parseInt ("5.6" ));
console.log(parseInt ("34a6" ));
console.log(parseInt ("a1" ));
进制转换:
10 进制 -> 2 进制
console. log (parseInt(15 ,8 ));
随机数:
var num = parseInt (Math .random()*(30 - 20 + 1 ) +20 );
console.log(num);
函数
注意:JS里面的变量只分为函数内部的局部变量,和函数外面的全局变量
匿名函数:
var fn = function ( ){
console.log ("我是匿名函数" );
}
fn ( );
匿名函数自执行:
(function () {
console.log("我是匿名函数" );
})();
(function () {
console.log("我是匿名函数" );
}());
console.log("hello word" );
DOM操作:
<body >
<div id ="first" > </div >
<input type ="text" class ="uName" />
<input type ="button" value ="点我呀" />
</body >
获取元素:
var first = document .getElementById("first" );
修改样式:
first.style .backgroundColor = "blue"
first.style .border = "5px green solid"
first.style .margin = "0px auto"
获取、修改内容:
first.innerHTML = "<p>福</p>"
first.innerText = "<p>福</p>"
console.log (first.innerHTML )
innerHTML:可以解析字符串里面的标签。
innerText:不能解析,可以写留言板。
例题:
// 通过类名获取一组元素
var uNames = document.getElementsByClassName ("uName" )
// uNames是所有类名为uName的集合(先当数组使用)
// 获取、修改输入框都使用value
uNames[0 ].value = "我是一个输入框"
console.log (uNames[0 ].value )
// 通过标签名获取
var button = document.getElementsByTagName ("input" )[1 ]
var a = 1
// 添加点击方法,每次点击都会执行下面这个函数
button.onclick = function(){
console.log (123 )
uNames[0 ].value = a++
first.style .transition = "1s"
first.style .width = a * 10 + "px"
first.style .height = "100px"
}
创建元素:
var newDiv = document .createElement("div" );
设置类名:
newDiv.className = "item"
newDiv.id = "first"
newDiv.style .background = "red"
添加元素:
var body = document.getElementsByTagName("body" )[0 ];
var box = document.getElementsByClassName("box" )[0 ];
body .appendChild(newDiv);
body .insertBefore(newDiv, box);
body .replaceChild(newDiv, box);
删除元素:
body.removeChild (box)
box.remove ()
原生(正常)的对象:
var obj = {
name:"丁鹏" ,
age:18 ,
gender:"man" ,
eat:function(){
console.log ("开始吃饭了" )
}
}
obj.dd = 1
console.log (obj)
console.log (obj.age )
obj.eat ()
宿主对象:
概论:浏览器自己添加的对象(div );
console.log (box.childNodes);
console.log (box.children);
console.log (newDiv.offsetWidth);
console.log (newDiv.clientWidth);
console.log (newDiv.scrollHeight);
console.log (newDiv.offsetTop);
console.log (newDiv.scrollTop);
定时器:
延时器:
概论:一次性定时器 。
setTimeout(function () {
console.log("执行了" )
}, 1000 );
循环定时器:
setInterval(function () {
console.log("循环定时器" );
}, 2000 );
清除定时器:
clearTimeout() ;
clearInterval() ;