不得不分享的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 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 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
基于mysql的bbs设计(一)
2006/10/09 PHP
PHP中的extract的作用分析
2008/04/09 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
js 上传图片预览问题
2010/12/06 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python将图片转base64,实现前端显示
2020/01/09 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
如何用python 操作zookeeper
2020/12/28 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
Android面试题附答案
2014/12/08 面试题
学期评语大全
2014/04/30 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
开除通知书范本
2015/04/25 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
如何使用pdb进行Python调试
2021/06/30 Python