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 相关文章推荐
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
Angular2入门--架构总览
Mar 29 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 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下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php getsiteurl()函数
2009/09/05 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
javascript连续赋值问题
2015/07/08 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
微信小程序 共用变量值的实现
2017/07/12 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python字符串的常用操作方法小结
2016/05/21 Python
python+django快速实现文件上传
2016/10/24 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
python怎么调用自己的函数
2020/07/01 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
助人为乐表扬信范文
2014/01/14 职场文书
人事专员职责
2014/02/22 职场文书
公开服务承诺制度
2014/03/26 职场文书
2014年店长工作总结
2014/11/17 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
反邪教观后感
2015/06/11 职场文书
记者节感言
2015/08/03 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript