1、DOM模型：文档对象模型，把文档中的标签，属性，文本转换为对象来管理
2、document对象：
（1）管理了所有的html文档内容
（2）是一种树结构文档，有层级关系
（3）把标签都对象化
其中对象化是指有一个类来表示标签，里面记录标签具有的属性
（4）可以通过document访问所有的标签对象
（5）查询方法
① 根据id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 需求：当用户点击校验按钮后，获取输入框中的内容，然后验证其是否合法
* 验证规则是：必须由字幕，数字，下划线组成，长度为5-12位
* */
function onclickFun() {
//1、当我们要操作一个标签时，一定要先获取这个标签对象
var usernameObj = document.getElementById("username");
//[object HTMLInputElement]就是dom对象
var usernameText = usernameObj.value;
//如何验证字符串是否符合某个规则，需要使用正则表达式
var patt = /^\w{5,12}$/;
/*
* test()方法用于测试某个字符串是否匹配我的规则
* 匹配就返回true，不匹配就返回false
*/
var usernameSpanObj = document.getElementById("usernameSpan");
//innerHTML表示起始标签和结束标签中的内容；并且该属性可读可写
if (patt.test(usernameText)) {
// alert("用户名合法！");
usernameSpanObj.innerHTML="用户名合法！";
}else {
// alert("用户名不合法！");
usernameSpanObj.innerHTML="用户名不合法！";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" value="zsj"/>
<span id="usernameSpan" style="color: red;"></span>
<button onclick="onclickFun()">校验</button>
</body>
</html>② 根据name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkAll() {
/*
让所有复选框都选中
document.getElementsByName()是根据指定的name属性查询返回多个标签对象集合
该集合操作与数组相同
集合中每个元素都是dom对象，排列顺序是他们在html页面中从上到下的顺序
*/
var hobbies = document.getElementsByName("hobby");
// checked表示复选框的选中状态，若选中则为true,不选中为false;且该属性可读可写
for (var i = 0;i<hobbies.length;i++){
hobbies[i].checked = true;
}
}
//全不选
function checkNo() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0;i<hobbies.length;i++){
hobbies[i].checked = false;
}
}
//反选
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0;i<hobbies.length;i++){
hobbies[i].checked=!hobbies[i].checked;
// if (hobbies[i].checked) {
// hobbies[i].checked = false;
// }else {
// hobbies[i].checked = true;
// }
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="java">JAVA
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>③ 根据tagname
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkAll() {
/*
document.getElementsByTagName()是根据指定标签名来进行查询并返回集合
该集合操作与数组相同
集合中每个元素都是dom对象，排列顺序是他们在html页面中从上到下的顺序
*/
var inputs = document.getElementsByTagName("input");
for (var i = 0;i<inputs.length;i++){
inputs[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="cpp">C++
<input type="checkbox" value="java">JAVA
<input type="checkbox" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>④ 三个查询方法的优先级为：
getElementsById() 优于 getElementsByName() 优于 getElementsByTagName()
并且三个方法一定要在页面加载完成之后才执行
3、正则表达式
（1）用于对字符串模式匹配及检索替换的工具
（2）
（3）元字符：
① \w：用于查找单词字符【其中单词字符是指：a-z、A-Z、0-9，以及下划线】
② \W：用于查找非单词字符（和\w相反）
③ \d：用于查找数字
（4）量词
① n+：表示字符串中至少包含一个n字符串
/*针对一个字母而言：表示要求字符串中包含字母e,以下是两种表现形式
1、var patt = new Regexp("e");
2、var patt = /e/;
针对多个字母而言：表示要求字符串中包含字母a或b或c中任意一个
var patt = /[abc]/;
表示要求字符串中包含小写字母a到z中任意一个（大写字母、数字等也类似）
var patt = /[a-z]/;
表示字符串中只能包含字母、数字、下划线
var patt = /\w/;
表示字符串中至少包含一个a
var patt = /a+/;
表示字符串中包含零个或多个a【注意：一旦条件满足，就不再向下检查】
var patt = /a*!/;
表示字符串中包含零个或一个a
var patt = /a?/;
表示字符串中包含连续3个a
var patt = /a{3}/;
表示字符串中包含至少3个，至多5个连续的a
var patt = /a{3,5}/;
问题：存在特性【注意：一旦条件满足，就不再向下检查】——>什么时候至多不超过5个的约束才成立
表示字符串中包含至少3个连续的a
var patt = /a{3,}/;
表示字符串必须以a结尾
var patt = /a$/;
表示字符串必须以a打头
var patt = /^a/;
=>回答问题：表示字符串从头到位都要满足至少3个，至多5个连续的a的要求：
var patt = /^a{3,5}$/;
*/（5）节点的常用属性和方法
① 节点就是标签对象
② 方法
<1> getElementsByTagName：在当前节点的子节点中查询指定标签名（不是全局查询）
<2>appendChild(oChildNode)：添加一个子节点，oChildNode是要添加的子节点
③ 属性
<1> childNodes：获取当前节点的所有子节点
<2> firstNodes：获取当前节点的第一个子节点
<3> lastNodes：获取当前节点的最后一个子节点
<4> parentNode：获取当前节点的父节点
<5> nextSibling：获取当前节点的下一个节点
<6> previousSibling：获取当前节点的上一个节点
<7> className：用于获取或设置标签的class属性值
问：为什么设置class属性值对应的属性是className，而不是像设置id或name要设置的属性值与名字一一对应？
答：因为class是一个关键字，使用className做属性名的目的在于避免与关键字同名。
<8> innerHTML：用于获取或设置起始标签和结束标签中的内容
<9> innerText：用于获取或设置起始标签和结束标签中的文本内容
3、JQuery
<1> $是JQuery的核心函数，功能如下所示：
（1）传入参数为 [函数] 时：表示页面加载完成之后，相当于window.onload = function(){}
（2）传入参数为 [HTML字符串] 时：会为我们创建这个html标签对象
（3）传入参数为 [选择器字符串] 时：
$("#id属性值")： id选择器，根据id查询标签对象
$("标签名")：标签名选择器，根据指定的标签名查询标签对象
$(".class属性值")：类型选择器，根据class属性查询标签对象
（4）传入参数为 [DOM对象] 时：会把dom对象转换为jQuery对象
<2> 区分jQuery对象和Dom对象
（1）Dom对象：
① 通过getElementById()查询出来的标签是Dom对象
② 通过getElementByName()查询出来的标签是Dom对象
③ 通过getElementByTagName()查询出来的标签是Dom对象
④ 通过createElement()方法创建的对象时Dom对象
⑤ Dom对象alert出来的效果是：[ object HTML 标签名 Element ]
（2）jQuery对象：
① 通过jQuery提供的API创建的对象是jQuery对象 eg.$("<h1></h1>")
② 通过jQuery包装的Dom对象时jQuery对象 eg.$(btnObj)
③ 通过jQuery提供的API查询到的对象时jQuery对象 eg.$("#btn01")
④ jQuery对象alert出来的效果是：[object Object]
<3>jQuery对象的本质
本质是dom对象数组+jQuery提供的一系列功能函数
注意区分好使用getElementById()时什么时候需要#什么时候不用
document.getElementById(“id”)与$("#id")的区别_CAT-CSDN博客
<4>jQuery对象和Dom对象使用的区别
jQuery对象不能使用Dom对象的属性和方法
Dom对象也不能使用jQuery对象的属性和方法
<5>Dom对象和jQuery对象的相互转换
（1）Dom对象转换为jQuery对象
1、先有Dom对象
2、$(Dom对象)就可以转换成为jQuery对象了
（2）jQuery对象转换为Dom对象
1、先有jQuery对象
2、jQuery对象[下标]取出相应的Dom对象
<3> jQuery选择器
（1）基本选择器
（2）层级选择器
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
