不得不分享的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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
表格 隔行换色升级版
2009/11/07 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
大专学生推荐信范文
2013/11/19 职场文书
电脑教师的教学自我评价
2013/11/26 职场文书
高中美术教学反思
2014/01/19 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
销售提升方案
2014/06/07 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
爱心捐助活动总结
2015/05/09 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
Docker部署Mysql8的实现步骤
2022/07/07 Servers