4.1 JQuery 获取内容和属性
JQuery 拥有可操作 HTML 元素和属性的强大方法。
4.1.1 JQuery DOM操作
JQuery 中非常重要的部分，就是操作 DOM 的能力。
JQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
"W3C" 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。
4.1.2 获得内容 - text(),html()以及val()
三个简单实用的用于DOM操作的JQuery方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
实例:
通过 jQuery text() 和 html() 方法来获得内容
<script>
$("#btn1").click(function(){
alert("Text:"+$("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
</script>
<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>实例:
<script>
$(document).ready(function(){
$("button").click(function(){
alert("值为: " + $("#test").val());
});
});
</script>
<body>
<p>名称: <input type="text" id="test" value="欣知大数据"></p>
<button>显示值</button>
</body>4.1.3 获取属性 attr()
jQuery attr() 方法用于获取属性值。
实例:
$("button").click(function(){
alert($("#runoob").attr("href"));
});4.1.4 获取属性 -attr()和prop()的区别
*attr* 和 *prop* 的区别介绍：
对于 HTML 元素本身就带有的固有属性，在处理时，使用 *prop* 方法。
对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 *attr* 方法。
实例1:
<a href="https://www.runoob.com" target="_self" class="btn">欣知大数据</a>这个例子里 <a>元素的 DOM 属性有: href、target和 class，这些属性就是 <a> 元素本身就带有的属性，也是 W3C 标准里就包含有这几个属性，或者说在 IDEA 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop() 方法。
<a href="#" id="link1" action="delete" rel="nofollow">删除</a>这个例子里 <a>元素的 DOM 属性有: href,id和action,明显，前两个是固有属性，而后面一个action 属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时，建议使用attr方法
4.1.5 获取属性 -attr()和 prop()的结果区别
*prop()函数的结果:*
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是空字符串。
*attr()函数的结果:*
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是 undefined。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
4.2 JQuery - 添加元素
4.2.1 添加新的Html元素
添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
4.2.2 JQuery append()方法
JQuery append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）
实例:
$("p").append("追加文本");案例：
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>追加文本</b>。");
});
$("#btn2").click(function(){
$("ol").append("<li>追加列表项</li>");
});
});
</script>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>4.2.3 JQuery prepend()方法
JQuery prepend() 方法在被选元素的开头插入内容
实例:
$("p").prepend("在开头追加文本");4.2.4 通过append()方法和prepend()方法添加若干元素
在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
function appendText() {
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
<body>
<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>
</body>4.2.5 JQuery after()和before()方法
JQuery after() 方法在被选元素之后插入内容。
JQuery before() 方法在被选元素之前插入内容。
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");4.2.6 通过after()和before()方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）
function afterText() {
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}<body>
<img src="/img/logo.png" >
<br><br>
<button onclick="afterText()">之后插入</button>
</body>4.2.7 考虑过append/prepend和after/before的区别吗?
append：
<p>
<span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>使用后结果是这样的:
<p>
<span class="s1">s1</span>
<span class="s2">s2</span>
</p>after：
<p>
<span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>使用后结果是这样的:
<p>
<span class="s1">s1</span>
</p>
<span class="s2">s2</span>总结
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加
4.2.8 参数可以是list
function afterText(){
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after([txt1,txt2,txt3]); // 在图片后添加文本
}4.3 JQuery - 删除元素
4.3.1 删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
4.3.2 JQuery remove()方法
jQuery remove() 方法删除被选元素及其子元素。
实例:
$("#div1").remove();案例:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>
</div>
<br>
<button>移除div元素</button>
</body>4.3.2 JQuery empty()方法
jQuery empty() 方法删除被选元素的子元素
实例:
$("#div1").empty();4.3.3 过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素：
实例:
$("p").remove(".italic");案例:
<body>
<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有 class="italic" 的 p 元素。</button>
</body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>[我耀学IT] Patience is key in life
