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 相关文章推荐
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
Angular2库初探
Mar 01 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 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 str_pad 函数使用详解
2009/01/13 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
基于python的多进程共享变量正确打开方式
2018/04/28 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
详解python Todo清单实战
2018/11/01 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
公司踏青活动方案
2014/08/16 职场文书
汶川大地震感悟
2015/08/10 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫