JS基础(一)

最新推荐文章于 2024-06-01 20:51:21 发布

「已注销」

最新推荐文章于 2024-06-01 20:51:21 发布

阅读量196

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/M_ount/article/details/79593988

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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);//true
console.log("5" === 5);//false
console.log("5" != 5);//false
console.log("5" !== 5);//true

类型转换:

console.log(typeof (a));
转数字 (true, false)
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number("123"));//123
console.log(Number("abc"));//NaN
console.log(Number("a1"));//NaN
console.log(Number("1a"));//NaN
console.log(Number(""));//0
console.log(Number(" "));//0
console.log(Number(undefined));//NaN
console.log(Number(null));//0

字符串：

console.log(String(true));//true

转布尔值：

非零为真，非空为真。
console.log(Boolean(-1));
console.log(Boolean(""));

隐式转换：

加号两边如果有一个是字符串，就是拼接字符串，其他算术运算符是转化为数值计算。
console.log(3 + true);//4
console.log(null + 5);//5
console.log(false + "2");//false2
console.log(5 - true);//4
console.log(7 + null);//7
console.log(6 + undefined);//NaN

转数字：

parseInt()
console.log(parseInt(5.6));//5
console.log(parseInt("5.6"));//5
console.log(parseInt("34a6"));//34
console.log(parseInt("a1"));//NaN

进制转换：

10进制 -> 2进制
console.log(parseInt(15,8));//13

随机数：

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最后添加
body.appendChild(newDiv);
//  把newDiv插入到box前面
body.insertBefore(newDiv, box);
//  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)；

//  节点  标签、文本、注释、声明(doctype)
//  获取元素下所有子节点
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);
//  除了scrollTop之外，以上属性都是只读

定时器：

延时器：

概论：一次性定时器 。
setTimeout(function(){
    console.log("执行了")
}, 1000);

循环定时器：

setInterval(function(){
    console.log("循环定时器");
}, 2000);

清除定时器：

//  清除延时器
clearTimeout();
//  清除循环定时器
clearInterval();

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础(一)

JS的两种引入：外部引入：&lt;script type="text/javascript" src="xx.js"&gt;&lt;/script&gt;内部引入:&lt;script type="text/javascript"&gt;&lt;/script&gt;JS中的基础方法：JS声明变量：关键字：var基本数
复制链接

扫一扫

专栏目录