目录
js知识点
js
js的核心
1 文档对象模型(DOM)
2 浏览器对象模型(BOM)
js优点
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。
数据类型
1 js中不区分整型和浮点型,都叫数值类型
1 整型
2 浮点型
3 NaN=====>not a number
var str = `my name is ${name}, my age is ${age}`;
2 字符串拼接
使用+
3 类型转换
eg:parseInt("123")转为整型
parseFloat("123.123")转为浮点型
4 布尔值
true 和false
在js中那些为假呢
0 空字符串 NaN null undefault
'''null和undefault的区别'''
'''
1 null 表示值为空,一般在需要指定或者清空一个变量的时候使用
2 undefined 表示当声明一个变量但未初始化时,该值默认值是undefined
3 函数无明确的返回值时,返回值也是undefined
'''
数组
# 数组可以存放任意的数据类型
#取值 ======>通过索引来取值
# 多维数组 =====>var lll = [1, 2, [3, 4,[5, 6]]]; # 三维数组
拼接字符串一般使用 +
''' 常用方法'''
.length 数组的长度或者大小
.push() 尾部追加元素
.pop() 弹出元素
.unshift() 头部插入
.shift() 头部移除
.slice(start,end) 切片
.reverse() 反转或者翻转
.join() 将数组元素连接成字符串
.concat(val,val1) 连接数组
.sort() 排序
'''补充'''
.trim() 移除空格,有左右
.charAt(n) 返回第n个字符
.split() 分割
#补充 slice和substring的区别 string.slice(start,stop)string.substring(start,stop)
'''相同点'''
如果start等于stop,返回空字符串
如果stop参数省略,则取到字符串末尾
如果参数超过string的长度,这个参数会被替换为string的长度
'''不同点'''
substring()的特点
如果start > stop start和stop将被交换
如果参数是负数或者不是数字,将被0替换
silce()的特点
如果start > stop 不会交换
如果start 小于0 则会从字符串末尾往前的第abs(start)个字符开始,包括自己
如果stop 小于0 则会从字符串末尾往前的第abs(start)个字符结束,不包括自己
forEach()
var arr1 =[1,2,3,4]
arr1 forEach(function(values,index,arr)
{
console.log(value,index,arr)
})
'''补充'''
some返回true,false,一般用来提高效率
补充
== 比较值
=== 比较值,内存地址
这里由于的x++和++x在出现赋值运算式,x++会先赋值再进行自增1运算,而++x会先进行自增运算再赋值!
三元运算
a > b ?a :(b=="20")?a:b
#如果条件成立执行?后面的,否则执行 :后面的
函数
function 函数名(参数可选){
代码
}
#匿名函数
var sum = function(参数){
代码
}
'''函数中的argument参数'''
arguments相当于将出传入的参数全部包含,可以通过索引来取值
函数的全局变量和局部变量
在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。
全局变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
变量生存周期:
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
作用域,看你所在的位置,就近原则
内置对象和方法
自定义对象
#对象本质上是键值对的集合
1 创建一个对象
方法一 var obj =new object()
方法二 var obj ={}
2 给对象增加值
obj.name="xiaoming"
3 给对象改值
obj.name="xiaohong"
4 给对象删除值
delect obj.name
Date对象
1 创建一个date对象
var date=new.Date();使用date.toLocaleString()输出
Date对象的方法
var date =new Date();
getDate() 获取日
getDay() 获取星期
getMonth() 获取月(0~11)
getFullYear() 获取年份
getHours() 获取小时
getMinutes() 获取分钟
getSeconds() 获取秒
getTime() 获取毫秒数
JSON对象
1 python中
import json
json.dumps() 序列号
json.loads() 反序列化
2 js中
Json.stringfy() 序列号
JSON.parse() 反序列化
EegExp对象
1 定义正则的两种方法
var regexp =new RegExp("正则")
var regexp =/正则/
正则校验
regexp.test("数据")
2 var s ="数据"
s.match(/匹配元素/gi) g匹配多个 i不区分大小写
MAth对象
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数(底为e)。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
BOM 和DOM
BOM
'''Window方法'''
window.innerHeight
window.innerWidth
window.open()
window.close()
'''navigator(浏览器)对象'''
navigator.appName 浏览器名称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
'''history对象'''
history.forward() 前进一页
history.back() 后退一页
'''location对象 重定向到新页面'''
location.href
location.href="URL" 跳转到指定页面
location.reload() 重新加载页面
弹出框
1 alert() 警告框
2 confirm() 确认框=====》true和false
3 prompt() 提示框=====>确认返回输入的值,取消返回null
计时相关
#setTimeout() #执行一次
var t=setTimeout("功能",时间)
clearTimeout(t)
#setInterval() #连续执行
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
DOM
先理解
DOM规定HTML文档中的每一个成分都是一个节点(node)
文档节点(document对象) 代表整个文档
元素节点(element对象) 代表一个元素或者标签
文本节点(text对象) 代表元素(标签)中的文本
属性节点(attribute属性) 代表一个属性,元素(标签)才有属性
注释是注释节点(comment对象)
● JavaScript 能够改变页面中的所有 HTML 元素
● JavaScript 能够改变页面中的所有 HTML 属性
● JavaScript 能够改变页面中的所有 CSS 样式
● JavaScript 能够对页面中的所有事件做出反应
标签查找
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
1 首先创建节点元素
var div =document.createElement("div")
var div1 =document.getElementById("d1")
2 给创建的节点添加属性
方法一,对于创建这个标签已经存在的属性
div.id="c1"
方法二 创建的属性不存在的属性
div.setAttribute("name","xiaoming")
div.setAttribute("width","100px")
3 获取属性
div.getAtrribute("name")
4 删除属性
div.removeAttribute("width")
5 增加属性
div1.append(div)
替换节点:
语法:
somenode.replaceChild(newnode, 某个节点);
属性节点
获取文本节点的值
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
设置文本节点的值
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
获取值操作
语法:
elementNode.value
适用于以下标签:
● .input
● .select
● .textarea
● value不能获取文件数据,获取文件数据要用files
class的操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true,否则返回false
classList.toggle(cls) 存在就删除,否则添加
指定css操作
obj.style.backgroundColor="red"
事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习:输入框
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击,使用的对象是form。
绑定方法
方式一
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
方法二
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>
window.onload,当页面加载完成之后在执行,存在覆盖现象
标签:知识点,JavaScript,对象,标签,元素,js,var,节点 From: https://www.cnblogs.com/liyuanxiangls/p/17331034.html