DOM基本介绍：
- jQuery DOM 操作
- jQuery 中非常重要的部分，就是操作 DOM 的能力。
- jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
提示：DOM = Document Object Model（文档对象模型）- **
ready()**函数用于在当前文档结构载入完毕后立即执行指定的函数。
该函数的作用相当于window.onload事件。
你可以多次调用该函数，从而绑定多个函数，jQuery将在DOM文档结构加载完毕后按照绑定顺序立>即执行这些函数。
请注意：请不要在一个页面同时使用ready()函数和元素的onload事件绑定函数，因为它们之间并不完全兼容。如果你必须使用load，那么请不要使用jQuery的ready()和load()来为window或更多指定项(例如图片)添加load事件处理器。
本章涉及知识点：
- 对于
text—html—val函数的使用text()- 设置或返回所选元素的文本内容html()- 设置或返回所选元素的内容（包括 HTML 标记）val()- 设置或返回表单字段的值
DOM事件获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery 增删改查</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript">
//这里依然可以使用function作为入口函数进行调用内部方法
//这里是获取文本(text)-源码(html)-值(val)
$(function () {
$(document).click(function () {
//get text return to user;
$('#btn1').click(function () {
alert("TEXT: "+$("#text").text())
})
//get source code to user;
$('#btn2').click(function () {
alert("HTML: "+$('#text').html())
})
//get user value to user;
$('#btn3').click(function () {
alert("Value: "+$('#fname').val())
})
});
$(document).ready(function () {
//ready()函数用于在当前文档结构载入完毕后立即执行指定的函数。
$('#btn').click(function () {
alert($('#google').attr('href'))
//attr中如果没有写入href浏览器默认会定位到href中。
})
})
})
//通过text-html-val三个不同的函数实现不同的功能
/*逻辑思路:
入口函数---调用方法---绑定按钮id---按钮id回调函数中触发相应id的值；
*/
$(function () {
$(document).ready(function () {
$('#one').click(function () {
//这里只会以文本的形式输出并不会有标签效应
$('#one1').text("<p>change your first test.</p>");
});
$('#two').click(function () {
$('#two2').html("<h1>Booo!!!!</h1>");
});
$('#three').click(function () {
$('#ipt').val("be your lover~")
})
})
})
</script>
</head>
<body>
<div style="background-color: pink; height: 150px; width: 200px;">
<p id="one1">hello this is first one test.</p>
<p id="two2">onemore time to test.</p>
<input id="ipt" value="fuck your ass.">
</div>
<br/>
<button id="one">set text button</button>
<button id="two">set HTML button</button>
<button id="three">set VALUE button</button>
<p id="text">this is test <b>informaction</b>test.</p>
Name :<input id="fname" value="input your name.">
<br/>
<p><a href="https://www.google.com" id="google">this is google website.</a></p>
<button id="btn">display herf value.</button>
<button type="button" id="btn1">Show your text.</button>
<button type="button" id="btn2">Show your code.</button>
<button type="button" id="btn3">It'll show your value.</button>
</body>
</html>
Tips:以上都是可以实现的代码拖下去练习即可
- 这里还涉及的了这几个函数的回调函数以下是方法
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); });
DOM添加元素
