不得不分享的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 解析读取XML文档 实例代码
Jul 07 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
微信小程序实现日历小功能
Nov 18 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
Zerg基本策略
2020/03/14 星际争霸
php笔记之:文章中图片处理的使用
2013/04/26 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
浅谈PHP封装CURL
2019/03/06 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
JavaScript修改css样式style
2008/04/15 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python 导入文件过程图解
2019/10/15 Python
python中删除某个元素的方法解析
2019/11/05 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
教师自我反思材料
2014/02/14 职场文书
2014庆六一活动方案
2014/03/02 职场文书
设计专业自荐信
2014/06/19 职场文书
妈妈活动方案
2014/08/15 职场文书
连锁超市项目计划书
2014/09/15 职场文书
质量保证书
2015/01/17 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
js 实现验证码输入框示例详解
2022/09/23 Javascript