关闭

超实用的JQuery小技巧

时间: 2019-06-16阅读: 971标签: 技巧

JQuery是一个 JavaScript 库,她极大的简化了我们对 JavaScript 的编程。今天我们总结了下平常项目中用到的一些小技巧,仅供参考。


1、替换元素

//替换元素
$(document).ready(function(){
    $("#id").replaceWith(‘ <p> I have been repaced </p>‘)
});


2、延时加载

//延时加载功能
$(document).ready(function(){
   window.setTimeut(function(){
       // do something
},1000);
});


3、返回顶部按钮

//返回顶部按钮
$(‘ a.top ‘ ).click(function(){
    $(document.body).animate( {scrollTop: 0 } , 800 );
     return false;
})

 

4、预加载图片

//预加载图片
$.preloadImages = function () {
   for(var i=0; i<arguments.length; i++){
       $(‘ <img>‘).attr(‘src‘, arguments[i]);
   }
}

 

5、检查图片是否加载完成

//检查图片是否已经加载完成
$(‘img‘).load(function () {
   console.log(‘image load successful‘);
} )

 

6、检查某个元素是否存在

//通过length属性来判断
$(document).ready (function () { if($(‘#id‘).length){ do something } })

 

7、验证元素是否为空

//验证元素是否为空
$(document).ready(function() {
   if($(‘#id‘).html()) {
      //do something 
   }
})

 

8、把创建的元素动态地添加到DOM中

$(document).ready(function(){
   var newdiv = $ (‘<div> </div>‘)
   newDiv.attr(‘id‘, ‘myNewDiv‘).appendTo(‘body‘);
})

 

9、把创建的元素动态地添加到DOM中

//与其他javascript类库冲突解决方案
$(document).ready(function() {
   var $jq = jQuery.noconflict();
   $jq(‘#id‘).show();
})
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3741

关闭

Js应用技巧集合

这里我将会对这些应用技巧进行集中描述,如果你觉得遗漏了一些好用的应用技巧,也请在留言中提出,我会及时更新到这篇文章中的。

微信小程序分享到朋友圈方法与技巧

小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友,小程序如何分享到朋友圈呢?使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。

11 个Js精简技巧

当我开始学习JavaScript时,我把我在别人的代码、code challenge网站以及我使用的教程之外的任何地方发现的每一个节省时间的技巧都列了一个清单。在这篇文章中,我将分享11条我认为特别有用的技巧

13 个 JS 数组精简技巧

数组是 JS 最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率。有时在创建代码时需要替换数组中的特定值,有一种很好的简短方法可以做到这一点

【JS-if】小技巧

带有if的代码简化;短路运算符1;短路运算符2;swich的代码

Javascript初学者应该知道的技巧和陷阱

Javascript 的sort()函数在默认情况下使用字母数字(字符串Unicode码点)排序。所以[1,2,5,10].sort() 会输出 [1, 10, 2, 5].要正确的排序一个数组, 你可以用 [1,2,5,10].sort((a, b) => a — b)

CSS水平或垂直居中技巧

css水平和垂直居中是一个亘古不变的话题,它常常出现在优美的网页上以及各大前端面试当中。说来惭愧,在两年前面试的时候,我完全不知道如何做到水平和垂直均居中的方法

实用的 git 小技巧

团队合作时,经常会出现这样的问题。这时候可以使用 git blame <file> 来定位代码的最后一次修改。但是,有一个问题,这并不能看出本行代码以前的修改。比如项目组中某人对全部代码进行了格式化

值得收藏的有用Js技巧

像其它语言一样,JavaScript中也可以通过一些技巧来完成一些复杂的操作. 接下来我们学习吧:数组去重;数组和布尔;创建一个空对象;合并对象;函数参数必须

无法忽视的Js技巧

在大家从事web前端的工作中,很容易忽视一些JavaScript的小技巧,今天为大家总结了一些容易被大家忽略的技巧,希望能够对大家有所帮助。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!