不得不分享的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 表格工具集
Apr 25 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
JS中循环遍历数组的四种方式总结
Jan 23 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
python清空命令行方式
2020/01/13 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
舞蹈教育学专业推荐信
2013/11/27 职场文书
部队万能检讨书
2014/02/20 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
升国旗演讲稿
2014/09/05 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
2015年质检工作总结
2015/05/04 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android