js初印象

Posted 2020-09-06

js：
　　javascript：

　　脚本语言，解释性，基于对象，事件驱动函数
js的组成:
　　ECMAScript(语法)
　　BOM(浏览器对象模型)
　　DOM(文档对象模型)
html和js的整合：
　　方式1:内部编写js
　　　　<script type="text/javascript">js代码</script>
　　方式2:
　　　　外部有一个独立的js文件 后缀名:.js
　　　　在html中通过script的src属性导入
　　　　<script src="js的路径"></script>
　　注意:
　　一旦使用了src属性,那么script标签体中的js代码将不再执行了.

变量:
　　var 变量名=初始化值;
数据类型:
　　原始类型(5种)：
　　　　1.Undefined
　　　　2.Null
　　　　3.String 用引号引起来的内容
　　　　4.Number
　　　　5.Boolean

通过typeof可以判断一个值或者变量是否是原始类型,若是原始类型,还可以判断属于那种.
　　typeof 变量|值
　　引用类型
运算符:
　　关系运算符:
　　两边值都是字符串,比较ascii码
　　两边都是数字,和java一样
　　一边是数字,一遍是字符串形式的数字, 可以比较
　　一边是数字,一遍是普通字符串 可以比较 值永远是false
等性运算符：
　　"66"==66 true
　　"666"===666 false
js的语句
　　if while for 和java一样

------------------------------------------------------
获取元素:
　　var obj=document.getElementById("id值");
获取元素的value属性
　　var val=document.getElementById("id值").value;
设置元素的value属性
　　document.getElementById("id值").value="sdfsdf";
获取元素的标签体
　　var ht=document.getElementById("id值").innerHTML;
设置元素的标签体
　　document.getElementById("id值").innerHTML="ssss";

定义函数:
　　方式1:

　　　　function 函数名(参数列表){函数体}
　　方式2:
　　　　var 函数名=function(参数列表){函数体}
　　注意:
　　　　函数声明的时候不用声明返回值类型
　　　　参数列表上不要写参数类型
　　　　通过return结束方法和将值返回

事件:
　　onclick 单击
　　onsubmit 表单提交
　　onload 页面加载成功或者元素加载成功（这也是区别js代码写在head body内 body外 或者标签元素下面的原因）

事件和函数绑定
　　方式1:

　　通过元素的事件属性
　　<xxx onxxx="函数名(参数列表)">
　　方式2:

　　　　派发事件
　　document.getElementById("id值").onxxx=function(){...};
　　document.getElementById("id值").onxxx=函数名;
---------------------------------

定时函数：

　　setInterval(code,毫秒数):周期执行
　　setTimeout(code,毫秒数):延迟多长事件后 只执行一次.

清除定时器
　　clearInterval(id):
　　clearTimeout(id):
步骤分析:
　　1.确定事件
　　2.编写函数
　　3.获取元素
　　4.操作元素

属性:

　　就是css中属性 css属性有"-" 例如:backgroud-color
　　若有"-" 只需要将"-"删除,后面第一个字母变大写即可
注意:
　　只要是window对象的属性和方法,可以把window省略
　　window.onload 等价于 onload
　　window.setInterval() 等价于 setInterval()

-------------------------------------
　　bom(浏览器对象模型)总结
　　所有的浏览器都有5个对象：
　　　　1.window:窗口
　　　　2.location:定位信息 (地址栏)
　　　　3.history:历史
　　　　4.window对象详解:
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，
并为每个框架创建一个额外的 window 对象。
常用的属性:
　　通过window可以获取其他的四个对象
　　window.location 等价域 location
　　window.history 等价于 history
-----------------------------------------------
　　常用的方法
消息框
　　alert("...."):警告框
　　confirm("你确定要删除吗?"):确定框 返回值:boolean
　　prompt("请输入您的姓名"):输入框 返回值:你输入的内容
定时器
　　设置定时器
　　setInterval(code,毫秒数):周期执行
　　setTimeout(code,毫秒数):延迟多长事件后 只执行一次.
清除定时器
　　clearInterval(id):
　　clearTimeout(id):
打开和关闭：
　　open(url):打开
　　close():关闭
　　location:定位信息
常用属性:
　　href:获取或者设置当前页面的url(定位信息)
-----------------------------------------------

location：
　　location.href; 获取url
　　location.href="...";设置url 相当于 a标签

--------------------------------------------------

history：
　　history:历史
　　back();后退
　　forward():向前
★go(int)
　　go(-1) 相当于 back()
　　go(1) 相当于 forward()
-----------------------------------------
常见的事件:
　　焦点事件:★
　　　　onfocus
　　　　onblur
表单事件:★
　　onsubmit
　　onchange 改变
页面加载事件:★
　　onload

鼠标事件(掌握)
　　onclick
鼠标事件(了解)
　　ondblclick:双击
　　onmousedown:按下
　　onmouserup:弹起
　　onmousemove:移动
　　onmouserover:悬停
　　onmouserout:移出
键盘事件(理解)
　　onkeydown:按下
　　onkeyup:弹起
　　onkeypress:按住
绑定事件:
　　方式1:
　　　　元素的事件属性
方式2:
　　派发事件

----------------------------------
　　阻止默认事件的发生
　　阻止事件传播
-----------------------------------------------
Array:
常用属性:
length:数组的长度
--------------------------------

dom(文档对象模型)
当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
节点(Node)
文档节点 document
元素节点 element
属性节点 attribute
文本节点 text
获取节点:
通过document可以获取其他节点:
常用方法:
document.getElementById("id值"):获取一个特定的元素
document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
设置获取获取节点的value属性
dom对象.value;获取
dom对象.value="";设置
设置或者获取节点的标签体
dom对象.innerHTML;获取
dom对象.innerHTML="";设置
获取或者设置style属性
dom对象.style.属性;获取
dom对象.style.属性="";设置
获取或者设置属性
dom对象.属性
---------------------------------------------------------------------
对于htmldom的操作若在js或者htmldom 查找不到 去查找xml dom
关于文档的操作 在 xml dom 的document中
关于元素的操作 在 xml dom 的element中
appendChild(dom对象):在一个元素下添加孩子
-------------------------------------------------------------------------
常用方法:(了解)
存放值:对内容的操作
　　pop():弹 最后一个
　　push():插入 到最后
　　shift():删除第一个
　　unshift():插入到首位
打印数组:
　　join(分隔符):将数组里的元素按照指定的分隔符打印
　　拼接数组:
　　concat():连接两个或更多的数组，并返回结果。
对结构的操作:
　　sort();排序
　　reverse();反转

-------------------------------------------------------------------
引用类型总结:
原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
Array:数组
String:
语法:
new String(值|变量);//返回一个对象
String(值|变量);//返回原始类型
常用方法:
substring(start,end):[start,end)
substr(start,size):从索引为指定的值开始向后截取几个

charAt(index):返回在指定位置的字符。
indexOf(""):返回字符串所在索引

replace():替换
split():切割

常用属性:length
Boolean:
语法:
new Boolean(值|变量);
Boolean(值|变量);
非0数字 非空字符串 非空对象 转成true
Number
语法:
new Number(值|变量);
Number(值|变量);
注意:

null====>0
fale====>0 true====>1
字符串的数字=====>对应的数字
其他的NaN
Date:
new Date();
常用方法:
toLocalString()
RegExp:正则表达式
语法:
直接量语法 /正则表达式/参数
直接量语法 /正则表达式/

new RegExp("正则表达式")
new RegExp("正则表达式","参数")
参数:
i:忽略大小写
g:全局
常用方法:
test() :返回值为boolean
Math:
Math.常量|方法
Math.PI
Math.random() [0,1)

全局:
★
decodeURI() 解码某个编码的 URI。
encodeURI() 把字符串编码为 URI。

Number():强制转换成数字
String():转成字符串

parseInt():尝试转换成整数
parseFloat():尝试转换成小数

eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。