不得不分享的JavaScript常用方法函数集(下)


Posted in Javascript onDecember 25, 2015

本文中,收集了一些比较常用的Javascript函数,希望对学习JS的朋友们有所帮助。

22. 替换元素

$(document).ready(function() {
  $('#id').replaceWith('
<DIV>I have been replaced</DIV>
 
');
});

23. jQuery延时加载功能

$(document).ready(function() {
  window.setTimeout(function() {
    // do something
  }, 1000);
});

24. 移除单词功能

$(document).ready(function() {
  var el = $('#id');
  el.html(el.html().replace(/word/ig, ""));
});

25. 验证元素是否存在于jquery对象集合中

$(document).ready(function() {
  if ($('#id').length) {
   // do something
 }
});

26. 使整个DIV可点击

$(document).ready(function() {
  $("div").click(function(){
     //get the url from href attribute and launch the url
   window.location=$(this).find("a").attr("href"); return false;
  });// how to use<DIV><A href="index.html">home</A></DIV>});

27. ID与Class之间转换
当改变Window大小时,在ID与Class之间切换

$(document).ready(function() {
  function checkWindowSize() {
    if ( $(window).width() > 1200 ) {
    $('body').addClass('large');
  }  else {
    $('body').removeClass('large');
  }
  }
$(window).resize(checkWindowSize);
});

28. 克隆对象

$(document).ready(function() {
  var cloned = $('#id').clone();// how to use<DIV id=id></DIV>});

29. 使元素居屏幕中间位置

$(document).ready(function() {
 jQuery.fn.center = function () {
    this.css("position","absolute");
       this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
          this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
             return this;
 }
 $("#id").center();
});

30. 写自己的选择器

$(document).ready(function() {
  $.extend($.expr[':'], {
    moreThen1000px: function(a) {
         return $(a).width() > 1000;
   }
  });
 $('.box:moreThen1000px').click(function() {
    // creating a simple js alert box
   alert('The element that you have clicked is over 1000 pixels wide');
 });
});

31. 统计元素个数

$(document).ready(function() {
  $("p").size();
});

32. 使用自己的 Bullets

$(document).ready(function() {
  $("ul").addClass("Replaced");
  $("ul > li").prepend("‒ "); // how to use
 ul.Replaced { list-style : none; }
});

33. 引用Google主机上的Jquery类库

//Example 1
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT>
<SCRIPT type=text/javascript>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
  // do something
});
</SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>
 // Example 2:(the best and fastest way)
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

34. 禁用Jquery(动画)效果

$(document).ready(function() {
  jQuery.fx.off = true;
});

35. 与其他Javascript类库冲突解决方案

$(document).ready(function() {
  var $jq = jQuery.noConflict();
  $jq('#id').show();
});

以上就是本文的全部内容,喜欢的就收藏吧!

Javascript 相关文章推荐
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
JSONP之我见
Mar 24 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
理解JavaScript原型链
Oct 25 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
javaScript中的空值和假值
Dec 18 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
JQuery datepicker 用法详解
Dec 25 #Javascript
一道JS前端闭包面试题解析
Dec 25 #Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 #Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 #Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 #Javascript
JavaScript中Window对象的属性及事件
Dec 25 #Javascript
JavaScript字符串删除重复字符的方法
Dec 25 #Javascript
You might like
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
请php正则走开
2008/03/15 PHP
PHP进程通信基础之信号
2017/02/19 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
PHP函数积累总结
2019/03/19 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
Python判断Abundant Number的方法
2015/06/15 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
如何在django中添加日志功能
2020/02/06 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
个人简历自我鉴定
2013/10/11 职场文书
园林毕业生自我鉴定范文
2013/12/29 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
Android Rxjava3 使用场景详解
2022/04/07 Java/Android