不得不分享的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 中的replace方法说明
Apr 13 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
实用的Vue开发技巧
May 30 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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和MySql来与ODBC数据连接
2006/10/09 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
Django自定义分页与bootstrap分页结合
2021/02/22 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
银行类自荐信
2014/02/04 职场文书
职代会闭幕词
2015/01/28 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
思想品德课教学反思
2016/02/24 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书