超实用的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高 ...
随机推荐
- web版本的用户登陆票据 FormsAuthenticationTicket
FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(1, "username", DateTime.N ...
- 【转帖】MySQL用得好好的,为什么要转ES?
MySQL用得好好的,为什么要转ES? http://developer.51cto.com/art/201911/605288.htm Elasticsearch作为一款功能强大的分布式搜索引擎,支 ...
- 使用guava cache在本地缓存热点数据
某些热点数据在短时间内可能会被成千上万次访问,所以除了放在redis之外,还可以放在本地内存,也就是JVM的内存中. 我们可以使用google的guava cache组件实现本地缓存,之所以选择gua ...
- REST-framework之频率组件
REST-framework之频率控制 一 频率简介 为了控制用户对某个url请求的频率,比如,一分钟以内,只能访问三次 二 自定义频率类,自定义频率规则 自定义的逻辑 ""&qu ...
- if的条件表达式
常用的: [ -a FILE ] 如果 FILE 存在则为真. [ -d FILE ] 如果 FILE 存在且是一个目录则返回为真. [ -e FILE ] 如果 指定的文件或目录存在时返回为真. [ ...
- ultraedit 实际应用技巧
Tip 1: Alt+C 列模式可以说最初选择使用这个文本编辑软件,原因很简单,就是因为“她”具有列编辑模式.如果您还不知道什么是列编辑模式的话,我想您应该好好研究一下啦.这是一个超级“赞”的功能.在 ...
- go 学习笔记(4) package
package name 尽量与目录名称一样 package name: 表示代码文件所属的包
- springboot整合tkmybatis
tkmybatis是什么? tkmybatis是为了简化mybatis单表的增删改查而诞生的,极其方便的使用MyBatis单表的增删改查,在使用mybatis单表增删改查时,可以直接调用tkmybat ...
- django图片上传修改图片名称
storage.py # 给上传的图片重命名 from django.core.files.storage import FileSystemStorage from django.http impo ...
- 空指针异常:解决 RequestContextHolder.getRequestAttributes()为空的问题
现象:实现Feign请求拦截器时,执行如下代码,报空指针异常 ServletRequestAttributes attributes = (ServletRequestAttributes) Requ ...