jQuery系列2---DOM操作和事件
一、DOM操作的分类
一般情况下，DOM操作分三个方面：DOM Core、HTML-DOM和CSS-DOM
1.1 DOM Core
并不是JavaScript所专有，也不仅仅只操作HTML文档。只要文档是DOM结构，都可以使用核心DOM中的方法，如html文档和xml文档都可以使用getElementByxx(s)相关的方法获得元素
1.2 HTML-DOM
专门针对HTML的一种DOM操作。提供了一些专属的方法。例如，直接通过document对象获取标签对象或操作标签的属性。这两种DOM操作都是HTML-DOM。
例如：document.froms element.src
1.3 CSS-DOM
CSS-DOM是针对CSS的操作。主要作用就是获取和数组style对象的各种属性。让网页呈现出不同的效果。
例如：element.style.color = “red”;
二、JQuery基础DOM操作
2.1 获取和设置元素的内容
三个方法：text()、html()和 val()
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function () {
//获取得到的标签的内的文本，不包括内部的标签。但是内部标签与标签中的空格会获取到
var text = $(".box").text(); // ele.innerText
console.log(text);
var html = $(".box").html();
//标签内的所有内容，包括子标签本身 ele.innerHTML
console.log(html);
//上面的方法不传入参数表示只是获取，如果传入字符串表示设置
// $(".box").text("哈哈哈");
//设置html，如果有标签，则会解析出来
$(".box").html("")
})
$(function () {
$("div button").click(function () {
//获取一个标签的value值(如果有)
var inputText = $("div input").val();
alert(inputText);
})
})
script>
head>
<body>
<div class="box">
<a href="http://www.yztcedu.com">点我去育知同创a>
div>
<div>
<input type="text" name="user" id="user" value="" />
<br />
<button>获取输入框中的值button>
div>
body>
html>2.2 获取和修改元素的属性
attr(属性名)方法操作
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function() {
//获取属性href的值
var $href = $("div a").attr("href");
console.log($href);
//点击按钮的时候更换属性的值
$("div button").click(function () {
$("div a")
.attr("href", "http://www.sina.com.cn") //参数1：属性名 参数2：属性值
.attr("title", "浪浪")
.text("浪一下");
})
})
script>
head>
<body>
<div class="box">
<a href="http://www.yztcedu.com">点我去育知同创a>
div>
<div><button>更换友情链接button>div>
body>
html>如果需要同时设置多个属性也可以把多个属性封装在一个对象中
$("div a")
.attr({
href:"http://www.sina.com.cn",
title:"浪浪"
})
.text("浪一下");2.3 元素的样式操作
这里的样式操作主要是针对一个元素的class属性进行操作。一般有一些潜规则：id是给js用的，class是给css用的。所以，大家希望用class去设置样式。
对样式的操作包括：获取class，设置class，追加class，删除class，切换class，判断是否有class属性
2.3.1 获取和设置样式
class也是属性，所以获取和设置的方法与获取和设置属性的方法一致。
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
div.nomal{
width: 200px;
height: 200px;
background: pink;
border: 1px dashed blue;
}
div ul{
list-style: none;
}
.big{
width: 400px;
height: 400px;
border: 1px dashed green;
}
.color{
background: gray;
}
style>
<script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function () {
$("li:nth-child(1)").click(function () {
$("div#box").attr("class", "big");
})
$("li:nth-child(2)").click(function () {
$("div#box").attr("class", "color");
})
})
script>
head>
<body>
<div class="nomal" id="box">我是div中的元素div>
<div>
<ul>
<li><button>点我变大button>li>
<li><button>点我变色button>li>
ul>
div>
body>
html>2.3.2 追加样式
替换样式会把原来的全部更新，有的时候，我们只想向更新某个样式，则使用追加。
CSS规定，一个元素的class属性可以多个值，多个值之间用空格隔开。表示合并这些样式的值。如果有重复的，则以后面的为准
JQuery使用addClass方法来追加样式.
addClass方法可以完成追加的效果
$(function () {
$("ul li:first").click(function () {
//追加样式
$("#box").
("big");
})
$("li:eq(1)").click(function () {
$("#box").addClass("color");
})
})2.3.3 移除样式
removeClass(样式名)
2.3.4 切换样式
toggleClass(样式)
切换样式，如果类名存在则删除，不存在则添加
$(function () {
$("li:last").click(function () {
//该方法会自动判断这个class是否存在，如果存在就删除，不存在就添加
$("#box").toggleClass("color");
})
})2.4.5 判断是否有指定的class
hasClass(样式)
2.4 each方法的使用