不得不分享的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 相关文章推荐
js 可拖动列表实现代码
Dec 13 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
vue如何截取字符串
May 06 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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
php模拟登陆的实现方法分析
2015/01/09 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python3.8中使用f-strings调试
2019/05/22 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python数据类型强制转换实例详解
2020/06/22 Python
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
求职简历中个人的自我评价
2013/12/01 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
检讨书大全
2015/01/27 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
党支部季度考核意见
2015/06/02 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript