DOM应用
document object model:文档对象模型
我们可以把每个标签看成一个对象，标签的属性也就是对象的属性，js就是通过docment来操作每一个标签
js的数据类型
1、基本数据类型
number : 数字
String ： 字符串
boolean ： 布尔
undefined ： 未定义
js属于弱类，数据类型分得不细
通过系统typeof（数据）返回一些的类型
<script>
var age = 10;
var weight = 66.6;
var name = "张三";
var sex;
console.log(typeof(age), typeof(weight), typeof(name), typeof(sex));
</script>
运行效果
获得对象的方法
1、根据id值获得标签对象
var 命名 = document.getElementById("id");
2、根据class值获取标签对象(集合）
var 命名 = document.getElementByClass(“class值”);
3、根据name值获得标签对象(集合)
var 命名 = document.getElementByName("name值");
4、根据标签名获取标签对象(集合）
var 命名 = document.getelementByTagName("标签名");
对象的使用
1 获取属性:
标签对象.属性
2 操作属性:
标签对象.属性=值;
事件绑定
某些组件执行了某些操作后，会触发代码的执行。事件分为了鼠标、键盘、html事件....
事件绑定的4步操作:
1、 什么是事件：需要执行的某些操作
2、 什么事件源：操作的那个组件
3、 什么是监听器 ：触发的代码
4、什么是注册监听 ：把事件、事件源、监听器结合在一起
** 注册监听的步骤 **
a、在script中自定义函数
b、在标签的属性中： 事件="函数名()"
方式1： 在标签中通过注册事件来完成
<button id="btn1" onclick="f1()">按钮1</button>
<script>
function f1() {
alert("ok1");
}
</script>
方式2：在js中完成注册
<button id="btn2">按钮2</button>
<script>
var btn2 = document.getElementById("btn2");
btn2.onclick = function() {
alert("ok2");
}
</script>
方式3：绑定事件
绑定语法:
a、标签对象.addEventListener("事件类型",function(){代码})
b、标签对象.addEventListener("事件类型",函数名)
移出绑定语法:
标签对象.removeEventListener("事件类型",函数名)
事件类型不能有 "on"
var b1 = document.getElementById("b1");
b1.addEventListener("click", f1)
b1.addEventListener("click", f2)
function f1() {
alert("b1");
}
function f2() {
alert("b2");
}
<!-- 内置函数 -->
var b2 = document.getElementById("b2");
b2.addEventListener("click", function() {
b1.removeEventListener("click", f1);
})
常用的鼠标事件
鼠标单击:onclick
鼠标进入：onmouseover (鼠标进入区域后只会触发一次)
鼠标移出： onmouseout
鼠标移动：onmousemove (鼠标进入区域后每次移动都会触发)
常用的键盘事件
onkeydown : 被按下触发 （支持所有案件）
onkeyup : 松开触发
onkeypress : 按下触发
页面加载事件
onload（放在body中）：页面加载才会执行js
方法1：<body onload = "f()">不推荐
方法2：onload = function(){} 推荐
value和innerHTML
value是操作表单元素的值(比如文本框、按钮名等)
<input type="text" value="值"/>
获取 : var a = 对象.value
操作 : 对象.value="值";
innerHTML是操作全闭合标签的标签体的内容
<p>值</p>
获取 ：var a = 对象.innerHTML
操作 : 对象.innerHTML="值";
this
this代表当前的标签对象
onchange事件
主要针对下拉列表
想要获取下拉列表中被选择的项的内容:
select标签对象.value
如果option没有value属性，则找到的是option标签体内容
如果option写了value属性，那就是获取该value属性
<select name="" id="sel" onchange="f1(this)">
<option value="1">小学</option>
<option value="2">中学</option>
<option>大学</option>
</select>
function f1(o) {
console.log(o.value);
}
js控制样式（css)
标签对象.style.样式属性（css) = "值”
注意：如果样式属性是右-组成的，则我们需要去掉-，-后面的单词首字母大写,
比如:font-size 需要写成 fontSize
冒泡和捕获
js的事件流：元素节点按照特定的顺序传播
捕获阶段---》目标阶段---》冒泡阶段
冒泡：子元素到父元素的过程
捕获:父元素到子元素的过程
我们可以通过 对象.addEventListener的语法来控制捕获或冒泡:
addEventListener("click",function(){}, true/false);
true:捕获
false/不写: 冒泡
js如何解决冒泡
使用关键词event
用法和this相同，需要传递到函数中
onclick="event"
function xx(e){}
作用：
1、通过event可以获得点击那个元素对象
e.target
2、能够阻止冒泡
event.stopPropagation()
3、阻止默认 (阻止元素本身的行为)
e.preventDefault()
event和this的区别
this：绑定的那个元素
event:操作的那个元素
事件委托
利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应
1、减少DOM操作，提高性能。
2、.随时可以添加子元素，添加的子元素会自动有相应的处理事件。
例子：利用事件委托，为ul注册事件，并且点击li，能够弹出对应的内容
<ul onclick="f(event)">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li></li>
</ul>
<script>
function f(e) {
alert(e.target.innerHTML);
}
</script>
节点
我们会把页面上的所有元素当成节点来进行操作元素(标签、属性、注释)
核心：根据层次关系来获取对应的元素
层次关系：
找父级元素
找子级元素
找兄弟元素
节点的属性
1 nodeType 节点类型
在html中有12种节点，我们只需要直到标签节点/元素节点的type=1，文本节点的type=3
标签节点/元素节点: <span></span> <br/>
元素节点：标签外部的文本比如 xxxxx<span>xxxxx</span>xxxxx
2 firstElementChild | lastElementChild
找当前标签元素的第一个/最后一个元素节点儿子
3 children 获得当前节点的所有元素子节点
console.log(标签对象.children[0]);
console.log(标签对象.children[d.children.length - 1]);
4 直接获得html标签对象
document.documentElement
5 直接获得body标签对象
document.body
6 找当前元素节点的下一个元素兄弟
nextElementSibling
7 找当前元素节点的上一个元素兄弟
previousElementSibling
8 找当前元素节点的父节点
parentNode
节点方法
1 操作属性
节点对象.setAttribute("属性"，“值”)
节点对象.getAttribute("属性")
2 创建节点
var 节点= document.createElement("标签名")
3 父节点追加字节点到末尾
父节点.appendChild(子节点(新节点));
4 删除当前节点
当前节点的父节点.removeChild(当前节点)
补充部分
让超链接失去跳转功能
方法一：<a href="javaScript:;"></a>
方法二：<a href="javaScript:void(0)"></a>
string
字符串，是js的基本数据类型之一,同时也是内置对象
内置对象，不用new，直接用
语法：
···
1 .length
2 .indexOf(内容)--->返回第一个下标
3 .lastIndexOf(内容)---->返回最后一个下标
4 .substr(开始位置,截取长度)
5 .substring(开始位置，结束位置)
6 charAt()
7 charCodeAt()
8 split()分割 通过分隔符转成数组
···
数组
方式1：var arr= new Array();
方式2：var arr=[....];
方法：
1、 数组名.join(分隔符) --- 数组通过拼接分隔符转成字符串
正则表达式
var reg=//; -- 表达式
reg.test(字符串)--->如果合法则返回true，否则false
^ : 以....开头
$ : 以...结尾
[]: 匹配[]中的任意一个字符
[1,2,3,a,b,c]
[a-zA-Z0-9]
[^] :匹配不在[]中的任意一个字符
\s : 匹配空白字符
\S : 匹配非空白字符
\w: 匹配单词 (单词=字母、数字、_) ==> [a-zA-Z0-9_]
\W: 匹配非单词
\d :匹配数字 ==>[0-9]
\D :匹配非数字
. :匹配任意字符
\. : 匹配.
| :或者 需要搭配()
{n,m} 匹配左边规则的个数必须>=n && <=m
{n,} 匹配左边规则的个数必须>=n
{n} 匹配左边规则的个数必须=n
? :匹配0次或1次 -->{0,1}
+ :匹配1一次或多次 -->{1,}
* :匹配0次多次 {0,}
样式：reg = /^[a-zA-Z]\w{5,9}$/;
正则表达式就是来做表单验证的
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
