不得不分享的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
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
JavaScript常用工具函数大全
May 06 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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
oracle资料库函式库
2006/10/09 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
利用PHP实现短域名互转
2013/07/05 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Django之模型层多表操作的实现
2019/01/08 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
党员大会主持词
2014/04/02 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
学校教学工作总结2015
2015/05/19 职场文书
大学生入党群众意见书
2015/06/02 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
无线电通信名词解释
2022/02/18 无线电
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电