超实用的JQuery小技巧
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();
})
后面有空再补充。
超实用的JQuery小技巧的更多相关文章
- 10个jQuery小技巧
收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top' ...
- 人人必知的10个jQuery小技巧
收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Back t ...
- 程序员都会的 35 个 jQuery 小技巧
收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("cont ...
- 必知的 15 个jQuery小技巧(干货)
jQuery小技巧(干活) 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top').click(function(){ ...
- (网页)人人都会的35个Jquery小技巧
转自CSDN: 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind(&q ...
- 10个 jQuery 小技巧
10个 jQuery 小技巧 -----整理by: xiaoshuai 1. 返回顶部按钮 可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Bac ...
- 人人必知的10个 jQuery 小技巧
原文地址:http://info.9iphp.com/10-jquery-tips-everyone-should-know/ 人人必知的10个 jQuery 小技巧 收集的10个 jQuery ...
- Jquery 小技巧
[每个程序员都会的35个jQuery的小技巧]收集的35个jQuery的小技巧/代码片段,可以帮你快速开发
- 前端程序员应该知道的15个 jQuery 小技巧
下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高 ...
随机推荐
- crontab 定时删除
/60 * * * /bin/find /usr/local/****/****/****/****/****.log.2019* -exec rm -f {} ; >/dev/null 2&g ...
- PowerBuilder中pbm_keydown()和pbm_dwnkey()的区别:
原地址:https://vcoo.cc/blog/463/ PowerBuilder开发中我们经常会用到快捷键的事件编程,在PB中的键盘事件主要用三个:pbm_dwnkey.pbm_keydown.p ...
- mysql疑问
- web API .net - .net core 对比学习-依赖注入
今天我们来看一下 .net web api 和 .net core web api依赖注入机制的差异. 首先我们分别在.net web api 和 .net core web api新建文件夹Serv ...
- centos7.5 离线安装ntp服务
安装 #检查rpm包 rpm -qa | grep ntp #从https://pkgs.org/download/ntp 下载rpm包 ntp-4.2.6p5-28.el7.centos.x86_6 ...
- C# vb .net实现消除红眼效果
在.net中,如何简单快捷地实现Photoshop滤镜组中的消除红眼效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...
- angularjs 文件下载 并 从response header中获取文件名
最近在做一个下载文件的功能,后台接口给的是二进制流的方式,那么前端要把二进制流下载下来. 这个过程使用$http的get请求,使用Blob接收,倒是没有难度,主要是遇到了,后台的文件名拿不到 的问题. ...
- Steam之两个list间交集、并集、差集
public static void main(String[] args) { List<String> list1 = new ArrayList(); list1.add(" ...
- 【转载】Asp.net网站安全:去除网站根目录下的备份文件防止代码泄露
很多网站运维人员在更新网站版本的时候,喜欢直接在网站目录文件夹中直接压缩原来的网站文件,如果这个备份压缩文件没有移动出去,这样是非常不安全的,有些网站攻击者可能会尝试访问你网站下有没有对应名字的压缩备 ...
- 7.nth-of-type | nth-child?【CSS】
举例说明: <ul> <p>111</p> <span>222</span> <li>1</li> <li& ...