[JQuery实现] 测测你今天的运势如何？（程序猿老黄历）-优快云博客

本文链接：https://blog.youkuaiyun.com/SolarL/article/details/89884343

本文介绍如何利用JQuery、JSON和ajax实现程序猿版的老黄历。内容涉及JSON数据格式、ajax异步请求以及JQuery的DOM操作。通过案例详细讲解了从页面初始化到事件绑定的JQuery开发步骤，最后提供了实现老黄历的代码示例和CSS样式。适合有一定JavaScript基础的读者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用程序猿老黄历，来测测你的运势吧

写在前面
结束语

写在前面

本篇文章主要内容是通过 JQuery 的方式来实现 DOM 操作，将会向大家介绍 JQuery 的简单开发，相比 JavaScript 更加方便快捷，提高代码的简洁性，JavaScript 的入门参照文章 https://blog.youkuaiyun.com/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