不得不分享的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获取地址栏参数
Dec 22 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
js实现网页收藏功能
Dec 17 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
JavaScript 闭包的使用场景
Sep 17 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
Yii2 中实现单点登录的方法
2018/03/09 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
对于Python中RawString的理解介绍
2016/07/07 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
如何在python中实现随机选择
2019/11/02 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
EJB的基本架构
2016/09/22 面试题
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
单位创先争优活动方案
2014/01/26 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
领导调研接待方案
2014/02/27 职场文书
品牌服务方案
2014/06/03 职场文书
大学课外活动总结
2014/07/09 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL