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 相关文章推荐
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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
基于PHP实现等比压缩图片大小
2016/03/04 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
Python实现一个优先级队列的方法
2020/07/31 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
python statsmodel的使用
2020/12/21 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
计算机专业职业规划
2014/02/28 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
财务务虚会发言材料
2014/10/20 职场文书
党员自我评价范文2015
2015/03/03 职场文书
前台岗位职责范本
2015/04/16 职场文书
家长反馈意见及建议
2015/06/03 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书