JavaScript常用操作

来源：互联网发布：淘宝直通车价格查询编辑：程序博客网时间：2024/06/04 19:25

@Feb 2， 2014

1. JavaScript操作选择元素

1.1 操作radio

设置第2个radio item 选中

<form>

<inputtype="radio"name="voice"value="turn_on"/> 开启  

<inputtype="radio"name="voice"value="turn_off"/> 关闭

</form>

var radios = document.getElementsByTagName("roaming_status");

radios[0].checked = false;

radios[1].checked = true;

1.2 操作select

设置某个Item选中

<selectid="colors">

<option>green</option>

</select>

varoptions = document.getElementById("colors").options;

var I;

for(i = 0; i < options.length;++i) {

options[i].selected= false;

}

options[4].selected = true;

2 JavaScript操作Cookie

JavaScript是通过document的cookie属性来操作Cookie。

document.cookie(…)

每个Cookie是一个名值对。下面的代码设置一个user_name的Cookie:

document.cookie=”user_name=zhangsan”;

一次设置多个Cookie：

document.cookie=”user_name=zhangsan;location=china”;

Cookie不同于document的其他属性，再设置面其他的Cookie，user_name和location两个Cookie的值仍然存在。

document.cookie=”last_login_time= 1395590400000”;

改变一个Cookie的值只需要对它重新赋值：

document.cookie=”user_name=lisi”

只能够一次获取所有Cookie的值，而不能直接获取某个Cookie的值，如下面的代码：

var value=document.cookie; // value=”user_name=lisi;location=china;last_login_time=1395590400000”

名或值中不能包含“，”“；”“=”，可以通过使用escape()函数来包含这些字符，它能将一些特殊符号使用十六进制表示，同时也可以避免中文乱码问题。当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。

Note:JavaScript操作Cookie并不方便，jQuery封装了访问Cookie的便捷API。

3 JavaScript常用 API

3.1 JavaScript产生随机数

Math.random; //产生0到1（不包含1）之间的随机数

想要min到max之间的随机数，可以这样写：

Math.floor(min+Math.random()*(max –min+1) )

4 javascript库: jQuery

每次都要通过document.getElementById(“my_id”)来获取相应Id的元素是一件非常麻烦的事情，但通过使用Jquery，就变得十分简单：$(“#my_id”)。

Jquery是一个javascript库，它极大的简化了javascript的编程。

jQuery 库包含以下特性：

Ÿ HTML 元素选取

Ÿ HTML 元素操作

Ÿ CSS 操作

Ÿ HTML 事件函数

Ÿ JavaScript 特效和动画

Ÿ HTML DOM 遍历和修改

Ÿ AJAX

Ÿ Utilities

4.1 使用Jquery

整个Jquery库是一个.js文件，可以从http://jquery.com/download/#Download_jQuery下载。

<html>

<head>

</htad>…

这样在该html文件和my_js.js就可以使用jquery提供的api了。

也可以使用google提供的jquery：

/jquery/1.4.0/jquery.min.js"></script>

4.2 Jquery示例

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

Ÿ 美元符号定义 jQuery

Ÿ 选择符（selector）“查询”和“查找” HTML 元素

Ÿ jQuery 的 action() 执行对元素的操作

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有class="test" 的所有元素

$("#test").hide() - 隐藏所有id="test" 的元素

$("p") 选取 <p> 元素。

$("p.intro") 选取所有class="intro" 的 <p> 元素。

$("p#demo") 选取所有id="demo" 的 <p> 元素。

$(“#test”).val() 获取id==test元素的值

$(“#test”).val(“new value”) 设置id==test元素的值

$(“#test”).css(“color:#ff0000”) 设置元素的css

$("button").click(function(){…}); 设置click事件

$(“#test”).html(“<a href=’#’>login</a>”) 设置元素Html内容，相当于innerHTML

文档就绪函数

$(document).ready(function(){

--- jQuery functions go here ----

});

jQuery操作select:

4.3 Jquery AJAX方法

Jquery load方法是简单但强大的AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

下面的例子把"demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：

$("#div1").load("demo_test.txt#p1");

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：

$("button").click(function(){

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

alert("外部内容加载成功！");

if(statusTxt=="error")

alert("Error: "+xhr.status+": "+xhr.statusText);

});

4.3.1 jQuery get() 和 post()

jQuery get() 和 post() 方法用于通过 HTTPGET 或 POST 请求从服务器请求数据。

HTTP 请求：GET vs.POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get() 方法

$.get() 方法通过 HTTP GET请求从服务器上请求数据。

语法：

$.get(URL,callback)

jQuery $.post() 方法

$.post() 方法通过 HTTPPOST 请求从服务器上请求数据。

语法：

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名

4.4 jQuery操作Cookie

4.4.1 jQuery设置Cookie的过期时间

设置Cookie 5分钟后失效

var cookietime = new Date();
cookietime.setTime(date.getTime() + (5 * 60 * 1000));//coockie保存5分钟
$.cookie("example", "foo",{expires:cookietime});

设置Cookie 10天后失效

$.cookie("example","foo",{expires:10});

5 JSON

JSON：JavaScript 对象表示法（JavaScriptObject Notation），是存储和交换文本信息的语法。类似 XML，但更小、更快、更容易解析，语法是 JavaScript 对象表示法语法的子集，能够用javascript eval()方法进行解析。JSON可使用 AJAX 进行传输。

JSON 最常见的用法之一，是从web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

下面是一个把字符串转换成js对象的例子：

var txt = '{ "employees" : [' +

'{ "firstName":"Bill" ,"lastName":"Gates" },' +

'{ "firstName":"George" ,"lastName":"Bush" },' +

'{ "firstName":"Thomas" ,"lastName":"Carter" } ]}';

JavaScript 函数 eval() 可用于将 JSON 文本转换为JavaScript 对象。

必须把文本包围在括号中，这样才能避免语法错误：

var obj = eval ("(" + txt +")");

0 0