资讯专栏INFORMATION COLUMN

JavaScript常用脚本集锦1

ygyooo / 3424人阅读

摘要:初始化参数可选参数,必填参数可选,只有在请求时需要参数可选回调函数可选参数可选,默认为参数可选,默认为创建引擎对象打开发送普通文本接收文档将字符串转换为对象最后,说明一下此函数的用法。即等待与成功回调,后标志位置为。

jquery限制文本框只能输入数字

jquery限制文本框只能输入数字,兼容IE、chrome、FF(表现效果不一样),示例代码如下:

</>复制代码

  1. $("input").keyup(function(){ //keyup事件处理
  2. $(this).val($(this).val().replace(/D|^0/g,""));
  3. }).bind("paste",function(){ //CTR+V事件处理
  4. $(this).val($(this).val().replace(/D|^0/g,""));
  5. }).css("ime-mode", "disabled"); //CSS设置输入法不可用

上面的代码的作用是:只能输入大于0的正整数。

</>复制代码

  1. $("#rnumber").keyup(function(){
  2. $(this).val($(this).val().replace(/[^0-9.]/g,""));
  3. }).bind("paste",function(){ //CTR+V事件处理
  4. $(this).val($(this).val().replace(/[^0-9.]/g,""));
  5. }).css("ime-mode", "disabled"); //CSS设置输入法不可用

上面代码的作用是:只能输入0-9的数字和小数点。

封装DOMContentLoaded事件

</>复制代码

  1. //保存domReady的事件队列
  2. eventQueue = [];
  3. //判断DOM是否加载完毕
  4. isReady = false;
  5. //判断DOMReady是否绑定
  6. isBind = false;
  7. /*执行domReady()
  8. *
  9. *@param {function}
  10. *@execute 将事件处理程序压入事件队列,并绑定DOMContentLoaded
  11. * 如果DOM加载已经完成,则立即执行
  12. *@caller
  13. */
  14. function domReady(fn){
  15. if (isReady) {
  16. fn.call(window);
  17. }
  18. else{
  19. eventQueue.push(fn);
  20. };
  21. bindReady();
  22. };
  23. /*domReady事件绑定
  24. *
  25. *@param null
  26. *@execute 现代浏览器通过addEvListener绑定DOMContentLoaded,包括ie9+
  27. ie6-8通过判断doScroll判断DOM是否加载完毕
  28. *@caller domReady()
  29. */
  30. function bindReady(){
  31. if (isReady) return;
  32. if (isBind) return;
  33. isBind = true;
  34. if (window.addEventListener) {
  35. document.addEventListener("DOMContentLoaded",execFn,false);
  36. }
  37. else if (window.attachEvent) {
  38. doScroll();
  39. };
  40. };
  41. /*doScroll判断ie6-8的DOM是否加载完成
  42. *
  43. *@param null
  44. *@execute doScroll判断DOM是否加载完成
  45. *@caller bindReady()
  46. */
  47. function doScroll(){
  48. try{
  49. document.documentElement.doScroll("left");
  50. }
  51. catch(error){
  52. return setTimeout(doScroll,20);
  53. };
  54. execFn();
  55. };
  56. /*执行事件队列
  57. *
  58. *@param null
  59. *@execute 循环执行队列中的事件处理程序
  60. *@caller bindReady()
  61. */
  62. function execFn(){
  63. if (!isReady) {
  64. isReady = true;
  65. for (var i = 0; i < eventQueue.length; i++) {
  66. eventQueue[i].call(window);
  67. };
  68. eventQueue = [];
  69. };
  70. };
  71. //js文件1
  72. domReady(function(){
  73. });
  74. //js文件2
  75. domReady(function(){
  76. });
  77. //注意,如果是异步加载的js就不要绑定domReady方法,不然函数不会执行,
  78. //因为异步加载的js下载之前,DOMContentLoaded已经触发,addEventListener执行时已经监听不到了
用原生JS对AJAX做简单封装

首先,我们需要xhr对象。这对我们来说不难,封装成一个函数。

</>复制代码

  1. var createAjax = function() {
  2. var xhr = null;
  3. try {
  4. //IE系列浏览器
  5. xhr = new ActiveXObject("microsoft.xmlhttp");
  6. } catch (e1) {
  7. try {
  8. //非IE浏览器
  9. xhr = new XMLHttpRequest();
  10. } catch (e2) {
  11. window.alert("您的浏览器不支持ajax,请更换!");
  12. }
  13. }
  14. return xhr;
  15. };

然后,我们来写核心函数。

</>复制代码

  1. var ajax = function(conf) {
  2. // 初始化
  3. //type参数,可选
  4. var type = conf.type;
  5. //url参数,必填
  6. var url = conf.url;
  7. //data参数可选,只有在post请求时需要
  8. var data = conf.data;
  9. //datatype参数可选
  10. var dataType = conf.dataType;
  11. //回调函数可选
  12. var success = conf.success;
  13. if (type == null){
  14. //type参数可选,默认为get
  15. type = "get";
  16. }
  17. if (dataType == null){
  18. //dataType参数可选,默认为text
  19. dataType = "text";
  20. }
  21. // 创建ajax引擎对象
  22. var xhr = createAjax();
  23. // 打开
  24. xhr.open(type, url, true);
  25. // 发送
  26. if (type == "GET" || type == "get") {
  27. xhr.send(null);
  28. } else if (type == "POST" || type == "post") {
  29. xhr.setRequestHeader("content-type",
  30. "application/x-www-form-urlencoded");
  31. xhr.send(data);
  32. }
  33. xhr.onreadystatechange = function() {
  34. if (xhr.readyState == 4 && xhr.status == 200) {
  35. if(dataType == "text"||dataType=="TEXT") {
  36. if (success != null){
  37. //普通文本
  38. success(xhr.responseText);
  39. }
  40. }else if(dataType=="xml"||dataType=="XML") {
  41. if (success != null){
  42. //接收xml文档
  43. success(xhr.responseXML);
  44. }
  45. }else if(dataType=="json"||dataType=="JSON") {
  46. if (success != null){
  47. //将json字符串转换为js对象
  48. success(eval("("+xhr.responseText+")"));
  49. }
  50. }
  51. }
  52. };
  53. };

最后,说明一下此函数的用法。

</>复制代码

  1. ajax({
  2. type:"post",
  3. url:"test.jsp",
  4. data:"name=dipoo&info=good",
  5. dataType:"json",
  6. success:function(data){
  7. alert(data.name);
  8. }
  9. });
跨域请求之JSONP

</>复制代码

  1. /**
  2. * JavaScript JSONP Library v0.3
  3. * Copyright (c) 2011 snandy
  4. * Blog: http://www.cnblogs.com/snandy
  5. * QQ群: 34580561
  6. * Date: 2011-04-26
  7. *
  8. * 增加对请求失败的处理,虽然这个功能用处不太大,但研究了各个浏览器下script的差异性
  9. * 1, IE6/7/8 支持script的onreadystatechange事件
  10. * 2, IE9/10 支持script的onload和onreadystatechange事件
  11. * 3, Firefox/Safari/Chrome/Opera支持script的onload事件
  12. * 4, IE6/7/8/Opera 不支持script的onerror事件; IE9/10/Firefox/Safari/Chrome支持
  13. * 5, Opera虽然不支持onreadystatechange事件,但其具有readyState属性.这点甚是神奇
  14. * 6, 用IE9和IETester测试IE6/7/8,其readyState总为loading,loaded。没出现过complete。
  15. *
  16. * 最后的实现思路:
  17. * 1, IE9/Firefox/Safari/Chrome 成功回调使用onload事件,错误回调使用onerror事件
  18. * 2, Opera 成功回调也使用onload事件(它压根不支持onreadystatechange),由于其不支持onerror,这里使用了延迟处理。
  19. * 即等待与成功回调success,success后标志位done置为true。failure则不会执行,否则执行。
  20. * 这里延迟的时间取值很有技巧,之前取2秒,在公司测试没问题。但回家用3G无线网络后发现即使所引用的js文件存在,但由于
  21. * 网速过慢,failure还是先执行了,后执行了success。所以这里取5秒是比较合理的。当然也不是绝对的。
  22. * 3, IE6/7/8 成功回调使用onreadystatechange事件,错误回调几乎是很难实现的。也是最有技术含量的。
  23. * 参考了http://stackoverflow.com/questions/3483919/script-onload-onerror-with-iefor-lazy-loading-problems
  24. * 使用nextSibling,发现不能实现。
  25. * 令人恶心的是,即使请求的资源文件不存在。它的readyState也会经历“loaded”状态。这样你就没法区分请求成功或失败。
  26. * 怕它了,最后使用前后台一起协调的机制解决最后的这个难题。无论请求成功或失败都让其调用callback(true)。
  27. * 此时已经将区别成功与失败的逻辑放到了callback中,如果后台没有返回jsonp则调用failure,否则调用success。
  28. *
  29. *
  30. * 接口
  31. * Sjax.load(url, {
  32. * data // 请求参数 (键值对字符串或js对象)
  33. * success // 请求成功回调函数
  34. * failure // 请求失败回调函数
  35. * scope // 回调函数执行上下文
  36. * timestamp // 是否加时间戳
  37. * });
  38. *
  39. */
  40. Sjax =
  41. function(win){
  42. var ie678 = !-[1,],
  43. opera = win.opera,
  44. doc = win.document,
  45. head = doc.getElementsByTagName("head")[0],
  46. timeout = 3000,
  47. done = false;
  48. function _serialize(obj){
  49. var a = [], key, val;
  50. for(key in obj){
  51. val = obj[key];
  52. if(val.constructor == Array){
  53. for(var i=0,len=val.length;i
  54. 调用方式如下:

  55. </>复制代码

    1. Sjax.load("jsonp66.js", {
    2. success : function(){alert(jsonp.name)},
    3. failure : function(){alert("error");}
    4. });
  56. 千分位格式化
  57. </>复制代码

    1. function toThousands(num) {
    2. var num = (num || 0).toString(), result = "";
    3. while (num.length > 3) {
    4. result = "," + num.slice(-3) + result;
    5. num = num.slice(0, num.length - 3);
    6. }
    7. if (num) { result = num + result; }
    8. return result;
    9. }
  58. 帮助文档
  59. Javascript封装DOMContentLoaded事件
    用原生JS对AJAX做简单封装
    跨域请求之JSONP 三 - snandy - 博客园
    从千分位格式化谈JS性能优化

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85418.html

相关文章

  • JavaScript常用脚本集锦2

    摘要:把中的伪数组转换为真数组在中,函数中的隐藏变量和用获得的元素集合都不是真正的数组,不能使用等方法,在有这种需要的时候只能先转换为真正的数组。检测元素是否支持某个属性代码用法创建和使用命名空间使用方式 把JavaScript中的伪数组转换为真数组 在 JavaScript 中, 函数中的隐藏变量 arguments 和用 getElementsByTagName 获得的元素集合(Nod...

    xialong 评论0 收藏0
  • JavaScript常用脚本集锦5

    摘要:代码来源一些常用的操作方法介绍查找相关元素的前一个兄弟元素的方法。查找元素指定层级的父元素。 DOM操作的增强版功能函数 /** * 将一个DOM节点、HTML字符串混合型参数 * 转化为原生的DOM节点数组 * * */ function checkElem(a) { var r = []; if (a.constructor != Array) { ...

    joywek 评论0 收藏0
  • JavaScript常用脚本集锦6

    摘要:它会指出一个类是继承自另一个类的。测试测试代码来源页面倒计时的一段运用倒计时的一段脚本。截止日期符合日期格式,比如等有效日期。截止的天数小时分钟秒数组成的对象。 清楚节点内的空格 function cleanWhitespace(element) { //如果不提供参数,则处理整个HTML文档 element = element || document; //...

    Acceml 评论0 收藏0
  • JavaScript常用脚本集锦3

    通过数组,拓展字符串拼接容易导致性能的问题 function StringBuffer() { this.__strings__ = new Array(); } StringBuffer.prototype.append = function (str) { this.__strings__.push(str); return this; } StringBuffer....

    dack 评论0 收藏0
  • JavaScript常用脚本集锦8

    摘要:进制为代码来源通过标签解析通过标签解析标签参数是字符串,解析的目标通过测试创建一个标签将赋值给标签的属性。协议主机名称端口查询字符串查询参数文件名哈希参数路径相对路径路径片段代码来源 图片预加载 // 更新: // 05.27: 1、保证回调执行顺序:error > ready > load;2、回调函数this指向img本身 // 04-02: 1、增加图片完全加载后的回调 2、提...

    blankyao 评论0 收藏0
  • JavaScript常用脚本集锦4

    摘要:一些元素位置设置的通用方法查找元素的左端位置代码依赖来自查找元素的顶端位置设置元素和位置与当前位置无关的一对函数设置元素水平的函数设置元素垂直位置的函数在元素的水平位置上增加像素距离的函数在元素的垂直位置上增加像素距离的函数代码来源元素相对 一些元素位置设置的通用方法 /** * 查找元素的左端位置, * 代码依赖:getStyle来自 https://gist.github.c...

    yeooo 评论0 收藏0

发表评论

0条评论

ygyooo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<