超实用的JQuery小技巧

更新日期: 2019-06-16 阅读: 3k 标签: 技巧

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();
})

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/3741

相关推荐

20个让你效率更高的CSS代码技巧

在本文中,我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的,有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识

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

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

小技巧:检查你本地及公共 IP 地址

本地的 IP 地址是分配给你计算机上的内部硬件或虚拟网卡的本地/私有 IP 地址。根据你的 LAN 配置,上述 IP 地址可能是静态或动态的。公共的 IP 地址是你的 Internet 服务提供商(ISP)为你分配的公共/外部 IP 地址。

前端新手程序员不知道的 20个小技巧

前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing

探讨Js奇技淫巧

Js 是一门灵活的语言(手动滑稽)。应该多学习一些奇技淫巧,因为很多奇技淫巧往往代表一些混合的知识,往往会有一些新奇的思考与体验(怎么我想不出来?)

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

去除桌面快捷方式上的小箭头

电脑桌面上默认快捷方式左下角是有个小箭头的。很多用户可能不习惯快捷方式小箭头。那怎么去掉呢?新建一个TXT文档(文档的名称自己顺便命名即可),然后把下面的这些英文全部复制到TXT文档内保存。把TXT文档的扩展名改成 .bat

26 个 jQuery使用技巧

禁用右键点击;禁用搜索文本框;新窗口打开链接;检测浏览器;预加载图片;样式筛选;列高度相同;字体大小调整;返回页面顶部;获取鼠标的xy坐标;验证元素是否为空;替换元素

微信小程序技巧_你需要知道的小程序开发技巧

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下微信小程序开发的一些技巧

点击更多...

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