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 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
vue时间格式化实例代码
Jun 13 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php.ini中date.timezone设置分析
2011/07/29 PHP
php牛逼的面试题分享
2013/01/18 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
python写一个md5解密器示例
2018/02/23 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python实现图片上添加图片
2019/11/26 Python
关于Python-faker的函数效果一览
2019/11/28 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
法人授权委托书范本
2014/09/17 职场文书
税务会计岗位职责
2015/04/02 职场文书
会议营销主持词
2015/07/03 职场文书
关于环保的广播稿
2015/12/17 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏