Need to add new features, definitely use jQuery AJAX, lack of work experience, and have trouble getting values and dataType types
Relive learning:
html() method:
The html() method returns or sets the content of the selected element (inner HTML). If this method does not set parameters, it returns the current content of the selected element.
<html>
<head>
<script type="text/javascript">
//测试 控制台中输出的结果：
$(function () {
console.log("ready执行");
});
$(function() {
console.log("ready1执行");
});
window.onload = function () {
console.log('load执行');
};
window.onload = function () {
console.log('load1执行');
}
/**
* ready执行
ready1执行
load1执行
*/
/**
* 这里可以看出两点不同：
1.$(function(){})不会被覆盖，而window.onload会被覆盖，
个人感觉$(function(){})不会被覆盖的原因是将其放入到了一个队列中，在对应时机一次出队。
2. $(function(){})在window.onload执行前执行的，
$(function(){})类似于原生 js 中的DOMContentLoaded事件，
在 DOM 加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。
DOM 文档加载步骤：
解析 HTML 结构
加载外部的脚本和样式文件
解析并执行脚本代码
执行 $(function(){}) 内对应代码
加载图片等二进制资源
页面加载完毕，执行 window.onload
*/
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">改变 p 元素的内容</button>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
/**
* 页面自动加载方法
* JQuery 的代码我们通常会包裹在一个$(function(){})函数中，
* jq 的$(function(){})也就是$(document).ready(function(){})的简写，
* 与之对应的原生 js 的 window.onload事件
*/
$(document).ready(function(){
});
$(function(){
});
$(function(){
//html()
(1)设置所有 p 元素的内容：
$(".btn1").click(function(){
$("p").html("Hello <b>world!</b>");
});
(2)返回元素内容,当使用该方法返回一个值时，它会返回第一个匹配元素的内容。
$(".btn1").click(function(){
alert($("p").html());
});
(3)设置元素内容,当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。
$(".btn1").click(function(){
$("p").html("Hello <b>world!</b>");
});
$("button").click(function(){
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
});
</script>
</body>
</html>
val()
The val() method returns or sets the value of the selected element. The value of the element is set through the value attribute. This method is mostly used for input elements. If the method does not set parameters, it returns the current value of the selected element.
<html>
<head>
</head>
<body>
//1
<p>Name: <input type="text" name="user" value="Hello World" /></p>
<button>改变文本域的值</button>
//2
Firstname: <input type="text" name="fname" value="Bill" /><br />
Lastname: <input type="text" name="lname" value="Gates" /><br /><br />
<button>获得第一个文本域的值</button>
//3
<p>Name: <input type="text" name="user" /></p>
<button>设置文本域的值</button>
//4
<p>Name: <input type="text" name="user" value="Bill" /></p>
<button>设置文本域的值</button>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//val()
(1)设置输入域的值：
$("button").click(function(){
$(":text").val("Hello Kitty");
});
(2)返回 Value 属性,返回第一个匹配元素的 value 属性的值。
$("button").click(function(){
alert($("input:text").val());
});
(3)设置 Value 属性的值。
$("button").click(function(){
$("input:text").val("Bill Gates");
});
(4)使用函数设置 Value 属性的值
/**
* function(index,oldvalue) 规定返回要设置的值的函数。
index - 可选。接受选择器的 index 位置。
oldvalue - 可选。接受选择器的当前 Value 属性。
*/
$("button").click(function(){
$("input:text").val(function(n,c){
return c + " Gates";
});
});
</script>
</body>
</html>
AJAX dataType
Type: String
The type of data that the server is expected to return. If not specified, jQuery will automatically make intelligent judgments based on the MIME information of the HTTP package. For example, the XML MIME type is recognized as XML. In 1.4, JSON will generate a JavaScript object, and script will execute the script. Then the data returned by the server will be parsed according to this value and passed to the callback function. Available values:
- "xml": Return an XML document, which can be processed by jQuery.
- "html": Returns the plain text HTML information; the included script tag will be executed when the dom is inserted.
- "script": Returns the plain text JavaScript code. The results are not automatically cached. Unless the "cache" parameter is set. Note: When requesting remotely (not under the same domain), all POST requests will be converted to GET requests. (Because the script tag of DOM will be used to load)
- "json": Return JSON data.
- "jsonp": JSONP format. When calling a function in the form of JSONP, such as "myurl?callback=?" jQuery will automatically replace? With the correct function name to execute the callback function.
- "text": return a plain text string
The attributes inside ajax are case sensitive, using datatype is approximately equal to not writing, and the default return type is string