前端基础之DOM和jQuery
一、DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
- 文档节点(document对象)：代表整个文档
- 元素节点(element 对象)：代表一个元素（标签）
- 文本节点(text对象)：代表元素（标签）中的文本
- 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
- 注释是注释节点(comment对象)
JavaScript 可以通过DOM创建动态的 HTML：
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
1.1、查找标签
直接查找
document.getElementById("id1") 根据ID获取一个标签
document.getElementsByName（"name"） 根据name属性获取标签集合
document.getElementsByClassName() 根据class属性获取标签集合
document.getElementsByTagName() 根据标签名获取标签集合
间接查找
obj=document.getElementById("id1")
obj.parentElement //所有id1的父节点标签
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
1.2、操作
内容
obj=document.getElementById("id1")
obj.innerText 获取标签内容值 仅文本
obj.innerHTML 全部值
obj.value 标签中的值，(input)
属性
obj.attributes 获取所有的属性
obj.setAttribute(k,v) 设置
obj.removeAttribute() 删除
样式
操作标签：
obj.className 获取所有样式类名
obj.classList.add("样式名") 增加样式
obj.class.List.remove("样式名") 删除
obj.style.color = "red" 单个样式
obj.checked=true/flase 选择
创建标签：
1、var tag=<input type="text">
obj.insertAdjacentHTML("beforeEnd/afterEnd/beforeBegin/afterBgin",tag) (4种位置)
2、var tag = document.createElement("input")
tag.setAttribute("type","text")
tag.style.color="red"
document.getElementById("id1").appendChild(tag)
提交form表单：
document.getElementById("form").submit()
1.3、其他
弹出框
alert("你看到了吗？");
提示框
confirm("你确定吗？") （选择值为：true/false）
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载刷新
计时
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
1.4、事件
常用事件 onclick 当用户点击某个对象时调用的事件句柄 ondblclick 当用户双击某个对象时调用的事件句柄 onfocus 获取光标 onblur 移除光标 onchange 域的内容被改变 onkeydown 某个键盘按键被按下 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开 onkeyup 某个键盘按键被松开 onload 一张页面或一幅图像完成加载 onmousedown 鼠标按钮被按下 onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开 onmouseover 鼠标移到某元素之上 onselect 在文本框中的文本被选中时发生 onsubmit 确认按钮被点击，使用的对象是form
绑定方式：
方式一：
<div id="i1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
方式二：
<div id="i2">点我</div>
<script>
var div2 = document.getElementById("i2");
div2.onclick=function () {
this.innerText="哈哈哈";
}
</script>
方式三：
<div id="i3">点我</div>
<script>
var div3 = document.getElementById("i3");
div3.addEventListener("click",function(){console.log(bbb)},false/true) （冒泡false 从后面向前触发/捕捉true)
</script>
补充：
JavaScript中在调用函数的那一瞬间，会先进行词法分析。
词法分析的过程：
当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：
1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。（优先级最高）
function foo(ages){
console.log(age);
var age = 16;
console.log(age);
function age(){
console.log("哈哈");
}
console.log(age);
}
foo(18);
词法分析过程：
1、分析参数，有一个参数，形成一个 AO.age=18;
2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};
最终，AO上的属性只有一个age，并且值为一个函数声明
执行过程：
注意：执行过程中所有的值都是从AO对象上去寻找
1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
2、这句 var age=16; 是对 AO.age 的属性赋值， 此时AO.age=16
3、同理第三个输出的还是16, 因为中间再没有改变age值的语句了
二、jQuery
2.1、介绍jQuery
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。
jQuery版本：
- 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
中文文档：http://jquery.cuishifeng.cn/
jQuery内容：
选择器、筛选器、样式操作、文本操作、属性操作、文档处理、事件、动画效果、extend、each、data、Ajax
jQuery引用：
<script src="jquery-1.12.4.js"></script>
2.2、查找标签
选择器：
基础选择器
id选择器
id=i1
$("i1")
标签选择器
<div></div>
$("div")
样式选择器
class=c1
$(".c1")
所有标签
$("*")
组合、合并选择器
$("div,.c1,i1")
$("div.c1") //找到class类为c1的div标签
层级选择器
$("x y") // x的所有后代y（子子孙孙）
$("x > y") // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
属性选择器
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
筛选器：
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
$(":checkbox") // 找到所有的checkbox
表单对象属性:
:enabled
:disabled
:checked
:selected
$("input:enabled") // 找到可用的input标签
$(":checked") //找到所有选中的
2.3、筛选方法
下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i1")
上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i1")
父亲元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有父辈元素，直到遇到匹配的那个元素为止
儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
查找：
$("div").find("p") //等价于$("div p")
过滤：
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
补充：
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
2.4、操作标签
样式操作：
addClass();// 添加指定的CSS类名
removeClass();// 移除指定的CSS类名
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加
补充：
$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置操作：
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()方法检索一个元素相对于整个页面的当前位置，.position()是相对于相对于父级元素的位移
$(".c1").offset() 获取位置
$(".c1").offset({left: 200, top:200}); 设置位置
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
//一滚动页面就显示id=b2的标签内容
$("#b2").on("click", function () {
$(window).scrollTop(0);
})
//点击id=b2的标签返回顶部
补充：
height() //高度 width() //宽度 innerHeight() // 内容+padding innerWidth() outerHeight() //内容+padding+边框 outerWidth()
文本操作：
HTML代码： html()// 取得第一个匹配元素的html内容 html(val)// 设置所有匹配元素的html内容 文本值： text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容 值： val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值
属性操作：
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
.prop() 用于checkbox和radio操作
$('#tb:checkbox').prop('checked') 获取值
$('#tb:checkbox').prop('checked',false); 取消
$('#tb:checkbox').prop('checked',true);选中
对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop
文档操作：
添加到指定元素内部的后面 $(A).append(B)// 把B追加到A后面 $(A).appendTo(B)// 把A追加到B 添加到指定元素内部的前面 $(A).prepend(B)// 把B加到A上面 $(A).prependTo(B)// 把A加到B上面 添加到指定元素外部的后面 $(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面 添加到指定元素外部的前面 $(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面 移除和清空元素 remove()// 删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点 克隆 clone() //clone方法不加参数true，克隆标签但不克隆标签带的事件，加true则带事件
2.5、事件
常用事件
hover(over,out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
change([[data],fn]) 当元素的值发生改变时，会发生 change 事件。
data:change([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的change事件中绑定的处理函数。
$("input[type='text']").change( function() {
// 这里可以写代码
});
click([[data],fn]) 触发每一个匹配元素的click事件
data:click([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的click事件中绑定的处理函数。
$("p").click( function () { $(this).hide(); });
keydown([[data],fn])当键盘或按钮被按下时，发生 keydown 事件
data:keydown([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的keydown事件中绑定的处理函数。
$(window).keydown(function(event){....});
keyup([[data],fn])当按钮被松开时，发生 keyup 事件
keypress([[data],fn])keypress 当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。
事件绑定与移除：
绑定：
on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间，
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false
$("p").on("click", function(){alert( $(this).text() )});
移除
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
监听键盘事件：
var flag = false;
// shift按键被按下的时候
$(window).keydown(function (event) {
console.log(event.keyCode);
if (event.keyCode === 16){
flag = true;
}
});
// shift按键被抬起的时候
$(window).keyup(function (event) {
console.log(event.keyCode);
if (event.keyCode === 16){
flag = false;
}
});
$("select").change(function (event) {
if (flag) {....}})
//当值方式改变时触发
阻止后续事件执行：
1、return false;
function () {reture false}
2、e.preventDefault();
function (e) {alert(123);//return false;e.preventDefault();}
<script>
$("span").click(function (e) {
alert("span");
e.stopPropagation();
});
$("p").click(function () {
alert("p");
});
$("div").click(function () {
alert("div");
})
</script>
//点击span的时候只会执行alert span
//点击p的时候会执行alert p alert div
事件委托
$('.c1').on("click","选择器",function() {}) //给c1下面的一个选择器绑定一个事情（委托冒泡）
$('.c1').delegate('a',"click",function() {}) （委托a标签全部绑定事件,jQuery3已经不用）
2.6、动画效果
show([speed,[easing],[fn]]) 显示隐藏的匹配元素
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
hide([speed,[easing],[fn]]) 隐藏显示的元素
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
$("p").hide(1000) //用1000毫秒将p隐藏
toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
slideDown([speed],[easing],[fn])
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn在动画完成时执行的函数，每个元素执行一次。
$("p").slideDown(1000); //用1000毫秒的将段落滑下
slideUp([speed,[easing],[fn]])
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
$("p").slideUp(1000);//用1000毫秒的将段落滑上
slideToggle([speed],[easing],[fn])
$("p").slideToggle("slow");//用600毫秒缓慢的将段落滑上或滑下
fadeIn([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
("p").fadeIn("fast",function(){
alert("Animation Done.");
}); //用200毫秒快速将段落淡入，之后弹出一个对话框
fadeOut([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
$("p").fadeOut("slow"); //用600毫秒缓慢的将段落淡出
fadeToggle([speed,[easing],[fn]])
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数
$("p").fadeToggle("slow","linear");//用600毫秒缓慢的将段落淡入
fadeTo([[speed],opacity,[easing],[fn]])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字。
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次
$("p").fadeTo("fast", 0.25, function(){
alert("Animation Done.");
}); //用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框
animate(params,[speed],[easing],[fn])
用于创建自定义动画的函数。
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
//用500毫秒将段落移到left为50的地方并且完全清晰显示出来
$("p").animate({
left: 50, opacity: 1
}, 500);
2.7、补充：
页面载入
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的JS代码
})
each
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//i是索引，v是每次循环的具体元素。
})
为li内的每个标签添加c1
$("li").each(function(){
$(this).addClass("c1");
});
data
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
extend
jQuery的命名空间下添加新的功能。多用于开发者向 jQuery 中添加新函数时使用
方式一：
$.extend({'myway':function(){return "myway"}})
v=$.myway()
方式二：
$.fn.extend({'myway':function(){return "myway"}})
v=$("id1").myway() //jQuery对象可以使用新添加的myway()方法了
<script src="myway.js"></script>
<script>
$.myway()
</script>
通过自执行函数区别引入多个js文件的变量和名称信息
(function (arg) {
var status = 1;
arg.extend({
'myway': function () {
return 'myway';
}
});
})(jQu$ery);
