day21-原生js基础

最新推荐文章于 2023-03-14 22:39:44 发布

要迅捷些

最新推荐文章于 2023-03-14 22:39:44 发布

阅读量360

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Hokage_rob/article/details/108063628

版权

一常见数据类型

js常用数据类型：数字类型、字符串、布尔、数组

1.1. 数字类型(Number) - 所有数字对应的类型

1.1.1. typeof(数据) - 获取指定数据对应的类型

console.log(typeof(20), typeof(3.1415))

1.1.2. 数学对象（Math）

小数转整数

console.log(Math.ceil(5.8))    // 6
console.log(Math.floor(5.8))   // 5
console.log(Math.round(5.8), Math.round(5.4))   // 6 5

常用运算
2.1 x的y次方

console.log(Math.pow(3, 2), Math.pow(16, 0.5), Math.pow(8, 1/3))    // 9 4  2
console.log(2**3)

2.2 求绝对值

console.log(Math.abs(-19))

随机数
产生0~1随机小数

console.log(Math.random())

产生0~100随机整数

console.log(parseInt(Math.random()*100))

产生100~999随机数

console.log(Math.random()*899+100)

类型转换
Number() - 转换成数字（元数据是什么格式的数字，，就转换成什么格式的数字）
console.log(Number(‘12.4’))
parseFloat() - 将数据转换成带小数点的数字
parseInt() - 数数据转换成整数
Math.ceil()/ Math.floor()/Math.round()

1.2.字符串（String） - 容器型数据类型，不可变并且有序

1.2.1 表示: 使用’'或者""，模板字符串用``

str1 = '小明'
str2 = "四川成都"
str3 = `我是${str1},我来自${str2}`
console.log(str1, str2, str3)
console.log(typeof(str3))

1.2.2 转义字符

str4 = '\t\'abc\n123'
console.log(str4)
str5 = '\u4e00abc'
console.log(str5)       // 一abc

1.2. 3 获取字符

js中下标值的范围是 0 ~ 长度-1

1.2.3.1 获取单个字符

message = 'hello world!'
console.log(message[0])
//下标没有-1，越界也不会报错
console.log(message[-1], message[100])    // undefined   undefined

1.2.3.2 遍历

for(let x in message){
console.log(x, message[x])
}

1.2.4 相关操作操作

1.2.4.1加法

console.log('abc'+'123', 'abc'+89090, 'abc'+true)    //abc123 abc89090 abctrue

1.2.4.2 不支持乘法运算

console.log('abc'*3)   // NaN

1.2.4.3 比较运算（和python一样）

console.log('abc'>'MN')   // true
判断是否是小写字母
chr = 'p'
console.log(chr>='a' && chr<='z')

1.2.5 相关方法和属性

message = 'hello world!'

1.2.5.1 获取字符串长度

console.log(message.length)

1.2.5.2 获取字符

console.log(message.charAt(1), message.charCodeAt(1))

1.2.5.3 正则相关

字符串.match(正则表达式) - 查找字符串中能够满足正则的子串

console.log('mms234abc829llo'.match(/\d{3}/))  //['234'] 
console.log('mms234abc829llo'.match(/\d{3}/g))      //['234', '829']

1.2.5.4 字符串.replace(正则, 新子串)

message = 'abc34and8923kls0akjs98数据2规范'
console.log(message.replace(/\d+/, '*'))    //abc*and8923kls0akjs98数据2规范
console.log(message.replace(/\d+/g, '*'))   // abc*and*kls*akjs*数据*规范

1.2.5.5 切片

字符串.slice(开始下标, 结束下标)

console.log(message.slice(2,7))    // c34an

1.2.6 类型转换

String(数据) - 将数据转换成字符串

1.3.布尔(Boolean)

只有true和false两个值

1.4.数组（Array）

相当于python中的列表

1.4.1增删改查

1.4.1.1查

names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
console.log(names[0])    // 诸葛亮

遍历

for(let index in names){
	console.log(index, names[index])
}

数组.forEach(有一个或者两个参数的函数)

names.forEach(function(item,index){
    console.log(`x:${item}, y:${index}`)
})  
names.forEach(function(item){
    console.log('item:', item)
})

1.4.1.2增

数组.push(元素)

names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
names.push('貂蝉')
console.log(names)   // ["诸葛亮", "赵云", "曹操", "荀彧", "郭嘉", "庞统", "貂蝉"]

数组.splice(下标,0,元素1,元素2,元素3,…) - 在指定下标前插入指定元素

names.splice(2,0,'刘备')
console.log(names)    //["诸葛亮", "赵云", "刘备", "曹操", "荀彧", "郭嘉", "庞统", "貂蝉"]

names.splice(1,0,'孙尚香', '大乔', '小乔', '甄姬')
console.log(names)    // ["诸葛亮", "孙尚香", "大乔", "小乔", "甄姬", "赵云", "刘备", "曹操", "荀彧", "郭嘉", "庞统", "貂蝉"]

1.4.1.3.删

names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']

数组.pop()

names.pop()
console.log(names)    //  ["诸葛亮", "赵云", "曹操", "荀彧", "郭嘉"]

数组.splice(下标, 删除个数) - 从指定下标开始删除指定个数的元素

names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
names.splice(2,1)
console.log(names)    // ["诸葛亮", "赵云", "荀彧", "郭嘉", "庞统"]
    
names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
names.splice(2,2)
console.log(names)    //  ["诸葛亮", "赵云", "郭嘉", "庞统"]

1.4.1.4 改

数组[下标] = 值

names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
names[3] = '貂蝉'
console.log(names)    // ["诸葛亮", "赵云", "曹操", "貂蝉", "郭嘉", "庞统"]
    
names[10] = '吕布'
console.log(names) // ["诸葛亮", "赵云", "曹操", "貂蝉", "郭嘉", "庞统", empty, empty, empty, empty, "吕布"]
    
names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
names[-1] = '董卓'    // 报错
console.log(names)

1.4.2 相关方法

1.4.2.1 数组.every(函数) - 检测数组中所有的元素是否满足函数返回值提供的条件

函数 - 需要一个参数，这个参数指向的是数组中的每个元素

检测scores中是否所有的元素都大于20

scores = [29, 89, 78, 67, 99, 45, 75, 39]
result = scores.every(function(item){
    return item>20
})
console.log(result)

检测names中所有的名字是否都姓张

names = ['张小明', '张三', '张三丰', '张无忌', '张翠山']
result = names.every(function(item){
    return item[0]=='张'
})
console.log(result)

1.4.2.2 数组.filter(函数) - 获取数组所有满足函数返回值要求的元素

函数 - 需要一个参数，这个参数指向的是数组中的每个元素

scores = [29, 89, 78, 67, 99, 45, 75, 39]
result = scores.filter(function(item){
    return item<60
})
console.log(result)    // [29, 45, 39]

1.4.2.3 数组.join(分隔符=’,’) - 将数组中所有的元素适用分隔符拼接成一个字符串

names = ['张小明', '张三', '张三丰', '张无忌', '张翠山']
result = names.join()
console.log(result)   // 张小明,张三,张三丰,张无忌,张翠山
    
result = names.join('')
console.log(result)    // 张小明张三张三丰张无忌张翠山
    
scores = [29, 89, 78, 67, 99, 45, 75, 39]
result = scores.join()
console.log(result)    // 29,89,78,67,99,45,75,39

1.4.2.4 数组.map(函数) - 将原数字中所有的元素按照函数做指定的操作后，产生新的数组

scores = [29, 89, 78, 67, 99, 45, 75, 39]
newScores = scores.map(function(item){
    return item / 10
})
console.log(newScores)     // [2.9, 8.9, 7.8, 6.7, 9.9, 4.5, 7.5, 3.9]

1.4.2.5 数组.reduce(函数, 初始值)

运算规则和python中的reduce一样

scores = [29, 89, 78, 67, 99, 45, 75, 39]
    
求所有元素的和
result = scores.reduce(function(x, item){
    return x+item
}, 0)
console.log(result)
    
求所有元素个位数的和
result = scores.reduce(function(x, item){
    return x+item%10
}, 0)
console.log(result)

1.4.2.6 排序

数组.sort(函数)

函数有两个参数，指向的都是序列中的元素
scores = [29, 89, 78, 67, 99, 45, 75, 39]
scores.sort(function(a, b){
按照元素的大小从小到大排序
return a-b
        
按照元素的大小从大到小排序
return b-a
按照元素个位数的大小从小到大排序
return a%10 - b%10
        
        
按照元素各位数的和的大小从大到小排序
sumA = 0
for(let x in String(a)){
      sumA += parseInt(String(a)[x])
}
        
sumB = 0
for(let x in String(b)){
    sumB += parseInt(String(b)[x])
}
        
return sumB - sumA
        
})
 console.log(scores)

二对象

2.1.对象

js的对象可以看成是python中字典和对象的结合

对象字面量

	stu1 = {
		'name':'熊明',
		'age':19,
		'sex':'男'
	}
	stu2 = {
		name:'小明',
		age:18,
		sex:'女'
	}
	
	console.log(stu1['name'],stu1.name)
	console.log(stu2['sex'],stu2.sex)

2.2.构造函数(定义类) - 用来创建对象的函数,函数名就相当于类名

2.2.1 相当于定义类

function 类名(){
添加对象属性和对象方法
this.属性 = 值
this.方法 = 函数
}

2.2.2 创建对象

对象 = new 类名()

    function Students(name,age=18,sex){
		// 添加对象属性
		this.name=name
		this.age = age
		this.sex = sex
		this.score = 0
		// 添加对象方法
		this.eat = function(food){
			console.log(`${this.name}在吃${food}`)
		}
	}
	stu3 = new Students('张三')
	console.log(stu3)
	stu4 = new Students('李四',10,'男')
	console.log(stu4)
	stu4.eat('垃圾')

练习:创建一个dog类,有属性名字,年龄,品种,颜色,性别;方法:叫唤

	function Dog(name,age,kind,color,sex){
		this.name=name
		this.age=age
		this.kind=kind
		this.color=color
		this.sex=sex
		this.call=function(name1){
			console.log(`${this.name}在叫${name1}`)
		}
	}
	dog1 = new Dog('馒头',1,'哈士球','red','女')
	console.log(dog1)
	dog1.call('阿康')

2.3.属性的操作

2.3.1 查

对象[属性名]
对象.属性

console.log(dog1['name'],dog1.kind)

2.3.2 增/改

对象[属性名] = 值 - 如果没有指定属性就是添加，有就是修改
对象.属性 = 值 - 如果没有指定属性就是添加，有就是修改

	dog1.name = '小小'
	console.log(dog1['name'],dog1.name)
	
	dog1['weight'] = 20
	console.log(dog1['weight'],dog1.weight)
	console.log(dog1)

2.4.类的prototype属性 - 给指定类所有的对象添加属性和方法(这儿的所有对象可以是添加前创建的，也可以是添加后创建的)

类名.prototype.属性 = 值
类名.prototype.方法 = 函数

	Dog.prototype.height = 70
	console.log(dog1)

三 DOM操作

3.1.什么是DOM

DOM是 document object model 的缩写，文档对象模型
js中自带一个document对象，指向的是当前网页的内容（包含了body以及body中所有的可见标签）

3.2.DOM操作 - js通过document对象来操作网页内容

3.2.1 获取节点(获取标签)

直接获取
document.getElementById(id值) - 根据id属性值获取节点（返回的是标签/节点对象）

p1 = document.getElementById('p1')
console.log(p1)

document.getElementsByClassName() - 根据class属性值获取节点（返回的是类似数组的容器-HTMLCollection，容器中的元素是标签）

a2 = document.getElementsByClassName('c1')

document.getElementsByTagName() - 根据标签名获取节点（返回HTMLCollection对象，元素是选中的所有标签对象

p2 = document.getElementsByTagName('p')

间接获取
获取一个标签的父节点：节点对象.parentElement
获取一个标签的子标签：节点对象.children

<div id="div1">
			<p id="p2">段落3</p>
			<a href="">超链接1</a>
			<p>段落4</p>
		</div>
		<script type="text/javascript">
			// 获取父节点
			p2 = document.getElementById('p2')
			div1 = p2.parentElement
			console.log(div1)
			
			// 获取子节点
			div1Children = div1.children
			console.log(div1Children)

			// 获取一个标签的第一个节点和最后一个节点
			firstChild = div1.firstElementChild
			lastChild = div1.lastElementChild
			console.log('大儿子：',firstChild)
			console.log('小儿子：',lastChild)
		</script>

四节点的创建、添加和创建

4.1 创建节点

document.createElement(标签名) - 返回节点对象(节点不会添加到网页中)

4.2.添加节点（将节点放到网页中去）

节点对象1.appendChild(节点对象2) - 将节点对象2添加到节点对象1的最后
节点1.inserBefore(节点2,节点3) - 在节点1中节点3的前面插入节点2

4.3.删除节点（删除网页中指定标签）

节点对象.remove() - 删除指定节点

4.4.拷贝节点

节点.cloneNode(false) - 浅拷贝一个节点(默认)
节点.cloneNode(true) - 深拷贝一个节点

<div id="box1">
			<p id="p1">段落一</p>
		</div>
		
		<div id="box2" style="height: 100px;width: 200px;background-color: red;margin-bottom: 20px;">
			这是div2
		</div>
		
		<script type="text/javascript">
			// 1.创建节点
			a1 = document.createElement('a')
			
			// 2.添加节点
			// 在最后添加子节点
			box1 = document.getElementById('box1')
			box1.appendChild(a1)
			
			// 在指定位置插入子节点
			p2 = document.createElement('p')
			box1.insertBefore(p2,box1.firstElementChild)
			
			img1 = document.createElement('img')
			box1.insertBefore(img1,document.getElementById('p1'))
			
			// 3.删除节点
			p1 = document.getElementById('p1')
			p1.remove()
			
			
			// 4.拷贝节点
			box2 = document.getElementById('box2')
			// 浅拷贝
			cb1 = box2.cloneNode()
			// 深拷贝
			cb2 = box2.cloneNode(true)
			
			
			body1 = document.getElementsByTagName('body')[0]
			body1.append(cb1)
			body1.append(cb2)
		</script>

五标签的属性操作

5.1.双标签的标签内容属性

节点.innerText - 文本内容
节点.innerHTML - HTML内容

5.2.普通属性（原来标签的属性在js标签对象中都有对应的属性）

<p id="p1">段落一</p>
		<script type="text/javascript">
			// 1.双标签的内容
			p1 = document.getElementById('p1')
			console.log(p1.innerText,p1.innerHTML)
			
			
			// 2.修改标签内容
			p1.innerText = 'hello word'
			
			
			
		</script>

要迅捷些

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day21-原生js基础

一常见数据类型js常用数据类型：数字类型、字符串、布尔、数组1.1. 数字类型(Number) - 所有数字对应的类型1.1.1. typeof(数据) - 获取指定数据对应的类型console.log(typeof(20), typeof(3.1415))1.1.2. 数学对象（Math）小数转整数console.log(Math.ceil(5.8)) // 6console.log(Math.floor(5.8)) // 5console.log(Math.r
复制链接

扫一扫