不得不分享的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 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
javascript function调用时的参数检测常用办法
Feb 26 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
vue实现登陆页面开发实践
May 30 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
PHP中GET变量的使用
2006/10/09 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
简单的python后台管理程序
2017/04/13 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
Python发送邮件实现基础解析
2020/08/14 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
玲玲的画教学反思
2014/02/04 职场文书
负责人任命书范本
2014/06/04 职场文书
借款协议书
2014/09/16 职场文书
天下第一关导游词
2015/02/06 职场文书