jQuery 常见小例汇总


Posted in Javascript onDecember 14, 2016

1

//这段代码展示了在用户未输入值时,
//如何在文本类型的input域中保留
//一个默认值
wap_val = [];
$(".swap").each(function(i){
wap_val[i] = $(this).val();
$(this).focusin(function(){
if ($(this).val() == swap_val[i]) {
$(this).val("");
}
}).focusout(function(){
if ($.trim($(this).val()) == "") {
$(this).val(swap_val[i]);
}});});

2

var el = $('#id');
el.html(el.html().replace(/word/ig, ''));

3

$('button.someClass').live('click', someFunction);
//注意,在jQuery 1.4.2中,delegate和undelegate选项
//被引入代替live,因为它们提供了更好的上下文支持
//例如,就table来说,以前你会用
//.live()
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
//现在用
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});

4.如何把已创建的元素动态地添加到DOM中:

var newDiv = $(''); 
  newDiv.attr('id','myNewDiv').appendTo('body');

5

var cloned = $('#somediv').clone();

6

if($(element).is(':visible') == 'true') { 
  //该元素是可见的 
}

7.JQ中定位

jQuery.fn.center = function () { 
  this.css('position','absolute'); 
  this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px'); 
  this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px'); 
  return this; 
} 
//这样来使用上面的函数: 
$(element).center();

8.如何把有着某个特定名称的所有元素的值都放到一个数组中:

var arrInputValues = new Array();
$("input[name='table[]']").each(function(){
arrInputValues.push($(this).val());
});

9.在jQuery中如何使用.siblings()来选择同辈元素

$('#nav li').click(function(){
$('#nav li').removeClass('active');
$(this).addClass('active');
});
//替代做法是
$('#nav li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});

10.正反选

var tog = false; 
$('a').click(function() { 
  $("input[type=checkbox]").attr("checked",!tog); 
  tog = !tog; 
});

11.如何获得鼠标垫光标位置x和y

$(document).ready(function() {
$(document).mousemove(function(e){
$('#XY').html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
});
});

12.如何把整个的列表元素(List Element,LI)变成可点击的

$("ul li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});

13.如何检查图像是否已经被完全加载进来

$('#theImage').attr('src', 'image.jpg').load(function() {
alert('This Image Has Been Loaded');
});

14.如何检查cookie是否启用

var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled) {
//没有启用cookie
}

15.如何让cookie过期:

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
JS实现简易日历效果
Jan 25 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 #Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 #Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 #Javascript
实例解析angularjs的filter过滤器
Dec 14 #Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 #Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 #Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 #Javascript
You might like
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
php下保存远程图片到本地的办法
2010/08/08 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python pandas生成时间列表
2019/06/29 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
大学生活动策划方案
2014/02/10 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
少先队活动总结
2014/08/29 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
转变工作作风心得体会
2016/01/23 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python