用程序猿老黄历,来测测你的运势吧
写在前面
- 本篇文章主要内容是通过 JQuery 的方式来实现 DOM 操作,将会向大家介绍 JQuery 的简单开发,相比 JavaScript 更加方便快捷,提高代码的简洁性,JavaScript 的入门参照文章 https://blog.csdn.net/SolarL/article/details/89852420
- 本案例的实现还用到了 JSON 和 ajax 最简单的异步请求网络。
1. 什么是 JSON ?
- JSON([JavaScript Object Notation) 是一种轻量级的数据交换格式。当然 XML 也是一种数据交换格式,大家可以了解一下。
- JSON格式
JSON对象
{ key1:value}
{"username":"SolarL","password":"123456"}
JSON数组
[{ key1:value},{ key1:value},{ key1:value}]
2. 什么是 ajax 请求 ?
- 概述
通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。 - 函数调用格式
jQuery.get(url, [data], [callback], [type])
返回值:XMLHttpRequestjQuery.get(url, [data], [callback], [type]) - 参数列表
urlString待载入页面的URL地址。
data (可选)Map待发送 Key/value 参数。
callback (可选)Function载入成功时回调函数。
type (可选)String返回内容格式,xml, html, script, json, text, _default。
3. JQuery 简单开发
-
什么是 JQuery
JQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。JQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 -
JQuery的核心特性
具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。JQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等. -
JQuery的作用
1.写更少的代码,做更多的事情: write Less ,Do more;
2. 将我们页面的JS代码和HTML页面代码进行分离。 -
JQuery 入门开发
<script>
//js文档加载完成的事件
window.onload = function(){
alert("window.onload 111");
}
window.onload = function(){
alert("window.onload 222");
}
/*文档加载完成的事件*/
jQuery(document).ready(function(){
alert("jQuery(document).ready(function()");
});
/*
jQuery 简写成 $
*/
$(document).ready(function(){
alert("$(document).ready(function()");
});
/*
最简单的写法 (常用写法)
*/
$(function(){
alert("$(function(){");
});
</script>
- JQ的开发步骤 (将页面的JS代码和HTML页面代码进行分离)
- 导入JQ相关的文件
- 文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器
- 确定相关操作的事件
- 事件触发函数
- 函数里面再去操作相关的元素
- JQ 中的DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<script src="../js/jquery-1.11.0.js" type="text/javascript"></script>
<script>
//文档加载完成事件
$(function () {
$("#btn1").click(function () {
//$("#dv1").append("<font color='red' size='7'>来,搞点事吧</font>");
//$("#dv1").prepend("<font color='#ffd700' size='7'>来,搞点事吧</font>")
//$("#dv1").after("<font color='#ffd700' size='7'>来,搞点事吧</font>")
$("<font color='#ffd700' size='7'>来,搞点事吧</font>").appendTo("#dv1");
})
})
</script>
</head>
<body>
<input type="button" value="来啊,点我啊!!" id="btn1"/><br/>
<div id="dv1">
添加内容!!
</div>
</body>
</html