BUG记录日志2021.03.06

最新推荐文章于 2022-06-14 13:29:01 发布

陳风弥

最新推荐文章于 2022-06-14 13:29:01 发布

阅读量163

点赞数

文章标签： bug

本文链接：https://blog.csdn.net/c202003/article/details/114433888

版权

需要新增功能，肯定用到jQuery AJAX 工作经验不足在获取值和dataType 类型上栽了跟头

重温学习：

html() 方法：

html() 方法返回或设置被选元素的内容 (inner HTML)。如果该方法未设置参数，则返回被选元素的当前内容。

<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()

val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值。

<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

类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串

ajax内部的属性区分大小写，使用datatype约等于没写，默认返回类型为string

陳风弥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BUG记录日志2021.03.06

需要新增功能，肯定用到jQuery AJAX 工作经验不足在获取值和dataType 类型上栽了跟头重温学习：html() 方法：html() 方法返回或设置被选元素的内容 (inner HTML)。如果该方法未设置参数，则返回被选元素的当前内容。<html><head> <script type="text/javascript"> //测试控制台中输出的结果： $(function () { console.log(".
复制链接

扫一扫