对象
对象：是一种类型，即引用类型。对象的值是引用类型的实例。
引用类型是一种数据结构，用于将数据和功能组织在一起。
对象的创建
使用new运算符创建Object
<script>
var box=new Object();
box.name='吴华华';
box.sex='男';
box.age=25;
box.go=function(){
alert('您确认要出去吗？');
}
</script>
使用字面量方式创建Object
<script>
var box={
name:'吴华华',
sex:'男',
age:25,
go:function(){
alert('您确认要出去吗？');
}
}
</script>
使用方式：
使用属性 ：对象.属性
console.log(box.name);
box.go();//使用属性 对象.属性
克隆标签：?
克隆标签：a.cloneNode()克隆a标签??如果不带参数，不克隆内容??加true克隆内容。
追加
<body>
<ul id="wrap">
<li >
<h6>这是例子0000</h6>
<p>122</p>
</li>
</ul>
<script>
var list=[
{
title:'这是例子1',
con:'299'
},
{
title:'这是例子2',
con:'233'
},
{
title:'这是例子3',
con:'299'
},
{
title:'这是例子6',
con:'233'
},
{
title:'这是例子5',
con:'299'
},
{
title:'这是例子4',
con:'233'
}
]
for(var i=0;i<list.length;i++){
var tag=wrap.children[0].cloneNode(true);
if(i==0){
wrap.innerHTML=''
}
tag.children[0].innerHTML=list[i].title;
tag.children[1].innerHTML=list[i].con;
// a.appendChild(b)把b追加a内部的后面
// wrap.appendChild(tag)
// a.parentNode.insertBefore(b,a)把b追加到a的同级之前
wrap.insertBefore(tag,wrap.children[0]);
}
// a.cloneNode()克隆a标签 如果不带参数，不克隆内容 加true克隆内容
console.log(wrap.children[0].cloneNode(true))
</script>
</body>
JavaScript内部对象
Global对象
Global(全局)对象是ECMAScript中一个特别的对象，因为这个对象是不存在的。
Global对象有一些内置的属性和方法：
<script>
var box = '//张三';
console.log(encodeURI(box)); //只编码了中文
var box = '//张三';
console.log(encodeURIComponent(box));//特殊字符和中文编码了
var box = '//张三';
console.log(decodeURI(encodeURI(box))); //还原
var box = '//张三';
console.log(decodeURIComponent(encodeURIComponent(box)));//还原
// eval()把可执行的字符串转化为js
eval('var a=100');
console.log(eval('1+2+2+4'))
console.log(a)
</script>
Date对象
Date对象：可以被用来表示任意的日期和时间，获取当前系统日期以及计算两个日期的间隔。它拥有一些预定义的属性和方法。
创建Date对象
| var date = new Date(“July 4,2004,6:25:22”) | | var date = new Date(“July 4,2004”) | | var date = new Date(2004,7,4,6,25,22)// 2004年8月4日 | | var date = new Date(2004,7,4)// 2004年8月4日 | | var date = new Date(“2004/7/4”) | | var date = new Date(Milliseconds) | | var date = new Date(); |
注意：使用newDate(“2004/7/4”)时，一定要加引号，否则认为是毫秒数
Date方法
Date没有直接访问的属性，只有获取和设置的方法。
| getYear()： | 返回年数；（小于2000年返回两位）（不推荐使用） | | getFullYear()： | 返回年数； | | getMonth()： | 返回当月号数；（比实际小1）（程序的月份从0开始? 11结束） | | getDate()： | 返回当日号数； | | getDay()： | 返回星期几；（0表示星期日） | | getHours()： | 返回小时数； | | getMinutes()： | 返回分钟数； | | getSeconds()： | 返回秒数； | | getTime()： | 返回毫秒数；（从1970年开始计算的毫秒数） |
?设置日期和时间的方法
| setYear()： | 设置年数； | | setMonth()： | 设置当月号数；（程序的月份从0开始? 11结束） | | setDate()： | 设置当日号数； | | setDay()： | 设置星期几； | | setHours()： | 设置小时数； | | setMinutes()： | 设置分钟数； | | setSeconds()： | 设置秒数； | | setTime()： | 设置毫秒数； |
?常用应用：计算时间差https://blog.csdn.net/weixin_44519518/article/details/119218720
String对象
String对象：和原始字符串类型对应的内置对象 声明字符串：string.html
属性：
- constructor? ?表示创建对象的函数。
- length? ?表示字符串的长度
- prototype 表示您向对象添加属性和方法
? ? ? ? ? ? ?
String对象方法
| 方法 | 描述 | | charAt() | 返回在指定位置的字符 | | charCodeAt() | 返回在位置的字符的Unicode编码 | | concat() | 连接两个或更多字符串，并返回新的字符串 | | fromCharCode() | 将Unicode编码转为字符 | | indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置 | | lastIndexOf() | 从后向前搜索字符串 | | match() | 查找找到一个或多个正则表达式的匹配 | | replace() | 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串 | | search() | 查找与正则表达式相匹配的值 | | slice() | 提出字符串的片段，并在新的字符串中返回被提取的部分 | | split() | 把字符串分割为字符串数组 | | substr() | 从起始索引号提取字符串中指定数目的字符 | | substring() | 提取字符串中两个制定的索引号之间的字符 | | toLowerCase() | 把字符串转换为小写 | | toUpperCase() | 把字符串转换为大写 | | trim() | 去除字符串两边的空白 | | valueOf() | 返回某个字符串对象的原始值 |
Array对象
Array对象用于在变量中存储多个值，即数组。
var ca=["12","13","14"];
Array对象方法
| 方法 | 描述 | | concat() | 连接两个或更多的数组，并返回结果 | | every() | 检测数组元素的每个元素是否都符合条件 | | filter() | 检测数组元素，并返回符合条件所有元素的数组 | | indexOf() | 搜索数组中的元素，并返回它所在的位置 | | join() | 把数组的所有元素放入一个字符串。 | | lastIndexOf() | 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索 | | map() | 通过指定函数处理数组的每个元素，并返回处理后的数组 | | pop() | 删除数组的最后一个元素并返回删除的元素 | | push() | 向数组的末尾添加一个或更多元素，并返回新的长度 | | reverse() | 反转数组的元素顺序 | | shift() | 删除数组的第一个元素 | | slice() | 选取数组的一部分，并返回一个新数组 | | some() | 检测数组元素中是否有元素符合指定条件 | | sort() | 对数组的元素进行排序 | | splice() | 从数组中添加或删除元素 | | toString() | 把数组转换为字符串，并返回结果 | | unshift() | 向数组的开头添加一个或更多元素，并返回新的长度 | | valueOf() | 返回数组对象的原始值 |
浏览器对象模型BOM
浏览器对象模型-BOM：提供独立于内容而与浏览器窗口进行交互的对象。
window对象的属性： document frames history location navigator screen
window对象
观察BOM的体系结构，所有的对象都源自window对象，它表示整个浏览器窗口。
- 整个BOM的核心，是顶层对象
- 使用框架，每个框架都由它自己的window对象表示
操作窗口
移动窗口：window.moveBy(xx,xx)
<button onclick="window.moveBy(20,20)">按钮</button>
打开窗口：window.open()
三个参数
<!-- 双引号和单引号使用方法一样，但是双引号内部只能放置单引号，单引号内部只能放置双引号 -->
<!-- 第三个参数，限制新打开窗口的形态 ，只有宽和高有用 -->
<button onclick="window.open('https://www.baidu.com/','zshmiao','width=500,height=300,scrollbars=no,directories=no ')">打开窗口</button>
定时执行：
?setTimeout()单次定时器函数：让函数在一定时间内重新执行，递归调用 如果不递归调用则仅执行一次。
clearTimeout()清除单次定时器：让setTimeout()函数停止。
注意：函数名称需要加括号，并使用双引号括起来；或者直接写函数名称，不加双引号和括号；
<script>
// 确认框，点击确认返回true 否则false
if(confirm('您确认关闭嘛')){
alert('关闭窗口');
}
// setTimeout(function(){},时间) clearTimeout()单次定时器
function fn(){
setTimeout(function(){
console.log(110000);
// 函数内部调用自身，函数的递归调用
fn();
},1000)
}
fn();
</script>
状态栏
状态栏：
- 在窗口底部边界内的区域，用于向用户显示信息
- 一般来说，状态栏告诉了用户何时在载入页面，何时完成载入页面
isNaN
isNaN：用于判断变量是否为NaN。
<input type="text" id="txt">
<button id="btn">按钮</button>
<script>
btn.onclick=function(){
// 如果可以转化数值类型，直接就转化了。否则得到的是NaN
// NaN和自身也不相等 使用isNaN()判断一个变量是否是NaN
var m=parseInt(txt.value);
console.log(m);
if(isNaN(m)){
alert('请输入数值类型')
}
}
</script>
history对象
history历史：
- 用户访问过的站点的列表
- 属性：length
- 方法：go()、back()、forward()
- 只对已经访问过的页面有效
<body>
<button onclick="history.go(-1)">history</button>
<!-- 跳转页面 -->
<button onclick="location.assign('https://hao.360.com/')">assign</button>
<!-- 替换页面 -->
<button onclick="location.replace('https://hao.360.com/')">replace</button>
<button onclick="location.reload()">reload</button>
<script>
console.log(location.href)
console.log(navigator.appName)
console.log(screen.width)
console.log(screen.height)
</script>
</body>
|