不得不分享的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 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
详解小程序开发经验:多页面数据同步
May 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
php下过滤HTML代码的函数
2007/12/10 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
PHP强制转化的形式整理
2020/05/22 PHP
DEFER怎么用?
2006/07/01 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
python正则表达式re之compile函数解析
2017/10/25 Python
python实发邮件实例详解
2019/11/11 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
领导干部培训感言
2014/01/23 职场文书
营销总经理岗位职责
2014/02/02 职场文书
财务部经理岗位职责
2014/02/03 职场文书
自荐信如何制作?
2014/02/21 职场文书
经营理念标语
2014/06/21 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
总经理检讨书范文
2015/02/16 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
2015年幼师工作总结
2015/04/28 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python