Javascript学习随笔1（CA学习记...-【javascript】ajax基础-优秀的 jQuery 文本输入框自动完成 & 自动提示插件

当前位置: 编程技术>WEB前端

本页文章导读:

▪Javascript学习随笔1（CA学习记录1）先说一下怎么运行吧。<script type='text/javascript'>prompt("what the fuck"); //在这里写代码调试就好了</script> prompt.........

▪【javascript】ajax基础什么是ajaxajax 即“Asynchronous JavaScript and XML”（异步JavaScript和XML），也就是无刷新数据读取。http请求首先需要了解 http 请求的方法（GET 和 POST）。GET 用于获取数据。GET 是在 URL 中传递数.........

▪优秀的 jQuery 文本输入框自动完成 & 自动提示插件　　文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作，是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件，帮助你在网站.........

[1]Javascript学习随笔1（CA学习记录1）

来源: 发布时间: 2013-11-06

先说一下怎么运行吧。

prompt() 用来弹出一个消息框让用户输入信息 prompt("Will this run the first block?");

confirm() 用来弹出一个消息框让用户确认或取消 confirm("Or the second block?");

console.log("The answer makes sense!"); 在控制台输出信息 console.log(99 % 8); 作用就是print out

alert(); 警示对话框，用来对用户提示信息。

http://www.cnblogs.com/xiangzi888/archive/2013/01/19/2867630.html

==等于x==8 为 false===全等（值和类型）x===5 为 true；x==="5" 为 false!=不等于x!=8 为 true

"some word".substring(x, y) x代表起始位置，y代表终止位置

"hello". substring(0, 2); 0-h-1-e-2-l-3-l-4-o-5 　　输出为he

Find the 4th to 7th letter of the string "wonderful day".

"wonderful day".substring(3,7)

变量声明： var myAge = 20;

　　myCountry.length 注意length是属性不是函数木有length()

函数声明： var greeting = function (name) { console.log("Great to see you," + " " + name); };

　　传参数的时候注意，如果传的是字符串类型，记得加上“”或者''

what the heck went wrong 究竟哪里出错了。 wordy 啰嗦 tuned 调整 slave 拼命工作

1 var multiplied =5;　　 //global variable
2 var timesTwo = function(number) {
3 var multiplied = number * 2; //local variable
4 };
5
6 timesTwo(4);
7
8 console.log(multiplied); 　　//输出结果是全局变量，而不是局部变量。

像这样的一条 JavaScript 语言可以在 HTML 页面中写入可变的文本：document.write("h1" + name + "/h1")

http://www.cnblogs.com/ducle/archive/2012/09/15/2686532.html

第一个游戏，用对话框提示信息，并采用打字机式输出

1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4 <title>打字效果</title>
5 <SCRIPT LANGUAGE="JavaScript">
6 var max=0;
7 var sd=5; //这里是控制速度的，值越大速度越慢
8 var txt,lentxt,go;
9 function textlist()
10 {
11 if (max>=lentxt){clearTimeout(go);}
12 document.getElementById('con').innerHTML+=txt.substr(max,1);
13 document.getElementById('con').innerHTML=document.getElementById('con').innerHTML.replace(/\%\$/ig,'<br>')
14 max++
15 }
16 function textticker()
17 {
18 txt=document.getElementById('con').innerHTML;
19 txt=txt.replace(/\<br\>/ig,'%$')
20 lentxt=txt.length;
21 document.getElementById('con').innerHTML='';
22 go = setInterval(textlist, sd);
23 }
24 </script></head>
25 <body bgcolor="#fef4d9" OnLoad="textticker()">
26 <div id="con">
27 。<br>倒萨倒萨 <br>大速度安生
28 </div>
29 </body>
30 </html>
31
32 这里的程序只做了对<br>的处理，如果还想有其它HTML标签，自己行加上就行了。

一定要注意<script></script>标签的位置。

1 <script>
2 confirm("r u ready?");
3 var age=prompt("What's your age?");
4 if(age>18) alert("fighting!~");
5 else {alert("see u");window.close();} //window.close()关闭当前页面
6 alert("Snow White and Batman were

[2]【javascript】ajax基础

来源: 发布时间: 2013-11-06

什么是ajax

ajax 即“Asynchronous JavaScript and XML”（异步JavaScript和XML），也就是无刷新数据读取。

http请求

首先需要了解 http 请求的方法（GET 和 POST）。

GET 用于获取数据。GET 是在 URL 中传递数据，它的安全性低，容量低。

POST 用于上传数据。POST 安全性一般，容量几乎无限。

ajax请求

ajax 请求一般分成4个步骤。

1、创建ajax对象

在创建对象时，有兼容问题：

var oAjax = new XMLHttpRequest(); //for ie6以上
var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //for ie6

合并上面的代码：

var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}

2、连接服务器

在这里会用到 open() 方法。open() 方法有三个参数，第一个参数是连接方法即 GET 和 POST，第二个参数是 URL 即所要读取数据的地址，第三个参数是否异步，它是个布尔值，true为异步，false为同步。

oAjax.open('GET', url, true);

3、发送请求

send() 方法。

oAjax.send();

4、接收返回值

onreadystatechange 事件。当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState：请求状态，返回的是整数（0-4）。

0（未初始化）：还没有调用 open() 方法。

1（载入）：已调用 send() 方法，正在发送请求。

2（载入完成）：send() 方法完成，已收到全部响应内容。

3（解析）：正在解析响应内容。

4（完成）：响应内容解析完成，可以在客户端调用。

status：请求结果，返回 200 或者 404。

200 =》成功。

404 =》失败。

responseText：返回内容，即我们所需要读取的数据。需要注意的是：responseText 返回的是字符串。

oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status==200){
fnSucc(oAjax.responseText);
}else{
if(fnFaild){
fnFaild();
}
}
}
};

将以上代码进行封装：

最后附上实例：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ajax基础</title>
</head>
<body>
点击按钮的时候，读取abc.txt<input id="btn" type="button" value="读取"/><br/>
<div id="con"></div>
</body>
</html>
<script type="text/javascript" src="/blog_article/ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
var oBtn =

[3]优秀的 jQuery 文本输入框自动完成 & 自动提示插件

来源: 发布时间: 2013-11-06

　　文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作，是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件，帮助你在网站中轻松添加输入框的自动完成和自动提示功能。

您可能感兴趣的相关文章

12款很棒的浏览器兼容性测试工具推荐
10套精美的免费网站后台管理系统模板
开发者必备的8个最佳云端集成开发环境
十款精心挑选的在线CSS3代码生成工具
推荐8款优秀的免费 Web 安全测试工具

　　在这篇文章中，我们使用 jQuery 实现智能输入框光标的位置。它不需要图像，是使用纯粹的 CSS3 实现的，而且实时、准确，这意味着你在添加或删除文本的时候它会自动适应。使用事件代理机制实现，所以不用担心性能问题。

下载源码在线演示

　　主要参数介绍：

serviceUrl：Ajax 请求的 URL；
lookup：本地数据数组；
minChars：触发自动提示的最小字符数；
params：请求的附加参数；
formatResult：返回结果的格式化函数；
autoSelectFirst：是否自动选中第一个；
onSearchStart：搜索开始的回调函数；
onSearchComplete：搜索完成的回调函数；
tabDisabled：是否禁用 Tab 键；

使用方法

　　这个差距的使用非常简单，下面是 HTML、CSS 和 JavaScript 示例代码。

　　HTML 代码：

　　CSS 代码：

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }

　　Ajax 查找模式：

$('#autocomplete').autocomplete({
serviceUrl: '/autocomplete/countries',
onSelect: function (suggestion) {
alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
}
});

　　本地查找模式：

您可能感兴趣的相关文章

60款非常酷的 jQuery 幻灯片演示和下载
15个款优秀的 jQuery 图片特效插件推荐
几款优秀的 jQuery Ajax 分页插件和教程
Web开发者必备的20款超赞 jQuery 插件
分享23款美轮美奂的 jQuery 图片特效插件

本文链接：优秀 jQuery 文本输入框自动完成 & 自动提示插件

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

hide

本文链接