Browse Category: Javascript

javascript技术和jquery学习教程

国内最快的jquery几个cdn加速节点

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript框架,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页…..以上内容太官方化,不是我们今天所探讨的主要内容,今天要为大家分享的是大家必须要知道的几个jQuery的cdn加速节点。

大家都知道,jQuery虽然强大,但是体积不小,min版经过压缩后最小也要90多kb,如果我们在本地直接加载的话,势必会影响网页的响应速度,那么我们如何解决这个jQuery加载慢的问题呢?这时我们就要用到cdn加速节点,其实网络上目前有很多jQuery的cdn加速节点,甚至连jQuery官网也有提供,但是我们最好选择一个距离较近的节点使用,比如我们网站主要是针对国内用户的话,那最好就选择国内的jQuery的cdn加速节点,如果是面向国外用户那自然是选择国外的jQuery cdn加速节点了….下面我们就来看一下具体有哪些吧,min就是已经压缩处理的意思

1、谷歌jquery cdn加速点
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js

2、微软jquery cdn加速点
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js

3、新浪jquery cdn加速点
http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js
http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js
http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js
http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js
http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js
http://lib.sinaapp.com/js/jquery/2.0/jquery.min.js
http://lib.sinaapp.com/js/jquery/2.0/jquery.js
http://lib.sinaapp.com/js/jquery/2.0.1/jquery-2.0.1.min.js
http://lib.sinaapp.com/js/jquery/2.0.1/jquery-2.0.1.js
http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js
http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.map
http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.js
http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js
http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.js
http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.map

4、加速乐jquery cdn加速点

http://mini.jiasule.com/framework/jquery/1.8.0/jquery-1.8.0.min.js
http://mini.jiasule.com/framework/jquery/1.8.1/jquery-1.8.1.min.js
http://mini.jiasule.com/framework/jquery/1.8.3/jquery-1.8.3.min.js
http://mini.jiasule.com/framework/jquery/1.9.0/jquery-1.9.0.min.js
http://mini.jiasule.com/framework/jquery/1.9.1/jquery-1.9.1.min.js

5、百度jquery cdn加速点
http://libs.baidu.com/jquery/2.0.0/jquery.min.js
http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js

6、jQuery官网cdn加速点(国外)
http://code.jquery.com/jquery-1.9.1.min.js
http://code.jquery.com/jquery-2.1.0.min.js
http://code.jquery.com/jquery-2.1.1.min.js(支持IE版本≥9.0)

7、cloudflare jQuery cdn加速点(国外)
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js

8、又拍云jQuery cdn加速点
http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js
http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js
http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.1.min.js
http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.10.2.min.js
http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.9.1.min.js
9、360安全卫士jQuery cdn加速点

http://libs.useso.com/js/jquery/2.1.1-rc2/jquery.min.js
http://libs.useso.com/js/jquery/2.1.1-rc2/jquery.min.map
http://libs.useso.com/js/jquery/2.1.1-rc2/jquery.js
http://libs.useso.com/js/jquery/2.1.1/jquery.js
http://libs.useso.com/js/jquery/2.1.1/jquery.min.js
http://libs.useso.com/js/jquery/2.1.1/jquery.min.map
http://libs.useso.com/js/jquery/2.1.0/jquery.js
http://libs.useso.com/js/jquery/2.1.0/jquery.min.js
http://libs.useso.com/js/jquery/2.1.0/jquery.min.map
http://libs.useso.com/js/jquery/1.9.1/jquery.js
http://libs.useso.com/js/jquery/1.9.1/jquery.min.js
http://libs.useso.com/js/jquery/1.9.1/jquery.min.map
http://libs.useso.com/js/jquery/1.8.3/jquery.js
http://libs.useso.com/js/jquery/1.8.3/jquery.min.js

选择好你的jQuery cdn加速点之后直接在网页中使用< script type=”text/javascript” >….< /script >调用即可,建议不要放到head中,而是放到< /body >前,原因你懂得

javascript选项卡切换速度控制实例Demo

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>javascript选项卡切换速度控制实例Demo</title>  
  5.     <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/>  
  6. <script src=“http://libs.baidu.com/jquery/1.9.0/jquery.js”></script>  
  7. </head>  
  8. <body>  
  9.   
  10. <script style=“text/javascript”>  
  11. var time =0;//区分第几次点击  
  12. $(“#xgt a”).click(function(){  
  13.   
  14.     //点击速度控制  
  15.     if(time==1){  
  16.           
  17.         if(!qiehuan())return false;  
  18.     }  
  19.     //第一次点击后改为1  
  20.     time =1;  
  21.     //获取本次点击后的时间戳毫秒  
  22.     nowTimestamp =new Date().getTime();  
  23.     //实行切换  
  24.     $(“#xgt a”).removeClass(‘active’);  
  25.     $(this).addClass(“active”)  
  26.     var func = $(this).attr(‘function’);  
  27.       
  28.     $.post(“/mpyp/get_cases_xgts”, { func:func,id:id},  
  29.    function(data){  
  30.        if(data){  
  31.         var obj = JSON.parse(data);  
  32.             if(obj.imgs !=){  
  33.             $(“#xgt_show”).html(obj.imgs);  
  34.             $(“#func_name”).html(obj.func);  
  35.             }  
  36.        }  
  37.    });  
  38.      
  39. });  
  40.   
  41. //切换速度控制函数  
  42. function qiehuan()  
  43. {  
  44.       
  45.     var curTimestamp = new Date().getTime();//本次点击时间戳毫秒  
  46.     //换成秒判断  
  47.     if(curTimestamp/1000 – nowTimestamp/1000<=3)  
  48.     {  
  49.         alert(‘切换速度过于快!’)  
  50.         return false;  
  51.     }  
  52.     return true;  
  53. }  
  54. </script>     
  55. </body>  
  56. </html>  

javascript获取iframe中元素实例

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>  
  3. <head>  
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />  
  5. <title>js获取iframe中元素实例</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <script src=“http://libs.baidu.com/jquery/1.9.0/jquery.js”></script>  
  10.   
  11. <iframe id=“if” src=“index.html” width=“1200”></iframe>  
  12.  <P></P>  
  13. <button id=“getIframe”>获取内容</button>  
  14.       
  15. <script type=“text/javascript”>  
  16.       
  17.     window.onload= function(){  
  18.           
  19.         var btn =  document.getElementById(“getIframe”);  
  20.         var adiv = document.getElementById(“if”).contentWindow.document;  
  21.         var bdiv = adiv.getElementById(“fix”);  
  22.         btn.onclick= function(){  
  23.               
  24.                   
  25.                 alert(bdiv.innerHTML);  
  26.             }  
  27.           
  28.         }  
  29.   
  30.   
  31. </script>  
  32. </body>  
  33. </html>  

index.html中代码

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>  
  3. <head>  
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />  
  5. <title>标题</title>  
  6. </head>  
  7.   
  8. <body>  
  9.   
  10. <img src=“index.jpg” style=“text-align:center” /><br/>  
  11. <p style=“text-align:center” id=“fix”>我是内容</p>  
  12. </body>  
  13. </html>  

ajax异步传输post方法实例

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

ajax异步传输post方法实例,

[code lang=”javascript”]

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","post.php",true);
/*如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:*/
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

[/code]

post.php只需要接受变量即可。post.php中的代码

[code lang=”php”]</pre>
<?php

echo $_POST[‘fname’];
echo $_POST[‘lname’];

?>
<pre>
[/code]

ajax异步传输get方法实例

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。下面是一个ajax异步传输get方法实例,

[code lang=”javascript”]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax异步传输get方法演示</title>
<script>
function loadxmlhttp()
{
/*</pre>
创建 XMLHttpRequest 对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
<pre>*/
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/*</pre>
向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
<pre>*/
/*下面的xmlhttp.open规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)*/
xmlhttp.open("GET","test.txt",true);

/*下面是将请求发送到服务器。
string:仅用于 POST 请求*/
xmlhttp.send();

/*将得到的数据传输到div内部的html中*/
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}

</script>
</head>

&nbsp;

<body>
/*div 部分用于显示来自服务器的信息。当按钮被点击时,它负责调用名为loadxmlhttp()的函数:*/
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadxmlhttp()">通过 AJAX 改变内容</button>

</body>
</html>

[/code]

点击按钮 倒计时60秒方可再次点击发送的Js代码

Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果。

比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果。

本文用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能。

例子:

[code langue=”javascript”]

<input type="button" id="btn" value="免费获取验证码" />
<script type="text/javascript">
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="免费获取验证码";
wait = 60;
} else { // www.jbxue.com
o.setAttribute("disabled", true);
o.value="重新发送(" + wait + ")";
wait–;
setTimeout(function() {
time(o)
},
1000)
}
}
document.getElementById("btn").onclick=function(){time(this);}
</script>

&nbsp;

[/code]

识别地域ip跳转页面的js,指定ip段自动跳转,高效率js代码

[code lang=”js”]</pre>
<!—判断不同ip用不同商务通start—>
<script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js" charset="GB2312" ></script>
<script type=text/javascript>

<!– alert("你的IP是:" + remote_ip_info.province);
–>
if(remote_ip_info.province ==’杭州’){

document.writeln(‘<script language="javascript" src="http://www.10ym.com/swt/zhejiangswt.js"><\/script>’);

}else{
document.writeln(‘<script language="javascript" src="http://nk.shsj120.com/swt/swt.js"><\/script>’);

}
</script>
<!—判断不同ip用不同商务通end—>
<pre>[/code]

 

 

jquery制作选项卡

<html>
<head>
<!–这是js代码–>
<script src=”/jquery/jquery.js”></script>
<script type=”text/javascript”>//引入jquery库文件
$(function(){

$(‘#tabin >ul >li’).each(function(index){
$(this).mouseover(function(){
var liNode=$(this);
timeOutId=setTimeout(function(){
$(‘div.current’).removeClass(‘current’);
$(‘li.tabin’).removeClass(‘tabin’);
$(‘#tabin > div’).eq(index).addClass(‘current’);
liNode.addClass(‘tabin’);
},200);//使用200毫秒的延迟
}).mouseout(function(){
clearTimeout(timeOutId);
})
})

});

</script>
<!–以下是css代码–>
<style type=”text/css”>
ul, li { list-style:none; padding:0px; margin:0px; }
div, li { font-size:12px; }
div#tabin { width:250px; }//设置文本域的宽度
div#tabin li { background:#CCC; display:block; float:left; padding:4px 8px; color:#000; margin-right:3px; border:1px solid #CCC; }
div#tabin li a { cursor:pointer; }
div#tabin div { clear:left; background-color:#6CF; color:#FFF; padding:8px; line-height:22px; display:none; }
div#tabin li.tabin { background:#FFCB4B; border:1px solid #6E6E6E; }
div#tabin div.current { display:block; }
</style>
<title>jquery选项卡</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
</head>
<body>
<div id=”tabin”>
<ul>
<li><a>客户留言</a></li>
<li><a>意见投诉</a></li>
<li><a>联系我们</a></li>
</ul>
<div>客户留言内容</div>
<div>意见投诉内容</div>
<div>联系我们内容</div>

</div>
</body>
</html>