一个计算机技术爱好者与学习者

0%

发表于 分类于 ，

显示欢迎信息

Ajax的优点我们已经说过了，上个例子先！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--显示欢迎信息.html-->
<html>
	<head>
	<title>显示欢迎信息</title>
	<meta charset="UTF-8">
	<script type="text/javascript" src="jquery-1.11.1.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#submit").click(function(){
				var name = $(".uname").val();
				var data = "uname=" + name;
				$.ajax({
					type:"POST",
					url:"http://demo.voidking.com/welcome.php",
					data:data,
					success: function(html){
						$("#message").html(html);
					}
				});
				return false;
			});
		});
	</script>
	</head>
	<body>
		<form>
			<label>Enter your name</label>
			<input type="text" name="uname" class="uname" /><br/>
			<input type="submit" id="submit"/>
		</form>
		<div id="message">
		</div>
	</body>
</html>
1
2
3
4
5
<!--welcome.php-->
<?php
	$name = $_POST['uname'];
	echo "welcome ".$name;
?>

把ajax实例01.html、welcome.php、jquery-1.11.1.js上传到自己的服务器。打开浏览器访问“显示欢迎信息.html”，输入一个名字，就能看到效果了。

为什么要上传服务器，搞的这么麻烦？大哥，ajax主要就是用来和服务器交互的好不好？如果你觉得麻烦，可以直接访问我的服务器查看效果:VoidKing编程实例，接下来的例子也可以在这个网页找到。

当然，你也可以直接本地打开“显示欢迎信息.html”，但是提交数据没有反应，因为同源策略限制交互。怎么破？简单点，本地搭建一个php服务器！高大上点，自行百度，修改代码！

阅读全文 »

发表于 分类于 ，

前言

任何基于GUI的现代应用程序都是基于事件驱动的，Web应用程序也不例外。

所有事件驱动的应用程序都采用相同的工作模式：建立事件机制、等待相关事件发生（比如鼠标单击）、对该事件做出相应。

浏览器事件模型

忆苦思甜，先了解一下传统的事件模型的缺点，我们才能明白改革开放是多么好的政策！

DOM第0级事件模型

也许你听说过网景事件模型、基本事件模型、浏览器事件模型，但是大多数人称其为DOM第0级事件模型。

为什么称其为第0级事件模型呢？因为，虽然该模型并不是一个正式的标准，但是所有主流的浏览器都与之兼容。而且，所有的现代浏览器依然支持这种模型。

阅读全文 »

发表于 分类于 ，

选择器语法

jQuery选择元素的语法为：$(selector,[content]);

如果第一个参数是选择器，那么第二个参数就是指示该操作的上下文，默认为整个DOM文档。上下文参数可以是DOM元素的引用，也可以包含jQuery选择器的字符串，或者是DOM元素包装集。

上文hello voidking中的html文件内容修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>	
	<script type="text/javascript" src="jquery-1.10.2.js"></script>
	<script type="text/javascript">
		$(function(){
			$("p","div#voidking").css("color","red");
		});
	</script>
</head>
<body>
	<div id="voidking">
		<p>
			welcome to jQuery world !
		</p>
	</div>
	<p>
		welcome to jQuery world !
	</p>
</body>
</html>
阅读全文 »

发表于 分类于 ，

jQuery是什么

jQuery是一个兼容多浏览器的Javascript库，类似于C语言中的”.h”文件和Java中的”.jar” 文件。

核心理念是write less,do more(写得更少,做得更多)。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery能够做什么

1、简化编程。jQuery最大的优点，是简化了Javascript编程。本来需要很多行代码才能完成的功能，使用jQuery，时常一两行就够了。

2、跨平台。使用Javascript开发，是一件痛苦的事情，因为你不得不考虑到各种浏览器的兼容问题。而使用jQuery，你编写的程序可以很容易地实现跨浏览器平台。

阅读全文 »

发表于 分类于 ，

注释

本文中的文件名，写在了代码注释中。既然用到了三种文件，就把这三种文件的注释方法先说明一下。

HTML注释

语法<!--注释的内容-->,示例如下：

1
<!--欢迎来到VoidKing的主页-->

CSS注释

语法/*注释的内容*/，示例如下：

1
2
3
4
5
/*这是注释*/
/*
这也是注释
可以分段
*/
阅读全文 »