不得不分享的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 相关文章推荐
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
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
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python跳出循环语句continue与break的区别
2014/08/25 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
python装饰器与递归算法详解
2016/02/18 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
英国假发网站:Hothair
2018/02/23 全球购物
为什么要有struct关键字
2012/05/08 面试题
酒店管理专业毕业生推荐信
2013/11/10 职场文书
教师党员思想汇报
2014/01/06 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
电视新闻稿
2015/07/17 职场文书
婚礼家长致辞
2015/07/27 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
Python3中最常用的5种线程锁实例总结
2021/07/07 Python