jQuery 常见小例汇总

发布时间 - 2026-01-10 21:48:54    点击率:

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 });

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


# jquery  # 常见小例汇总  # jQuery判断checkbox是否选中的小例子  # jquery checkbox实现单选小例  # jquery根据name属性查找的小例子  # jquery实现简单易懂的图片展示小例子  # jQuery Form 页面表单提交的小例子  # jquery动态增加删除表格行的小例子  # jQuery 获取浏览器所在的IP地址的小例子  # jQuery自动切换/点击切换选项卡效果的小例子  # jQuery点击弹出下拉菜单的小例子  # Jquery时间验证和转换工具小例子  # 这段  # 会用  # 如何使用  # 如何获得  # 默认值  # 组中  # 加载  # 展示了  # 如何在  # attr  # appendTo  # body  # cloned  # code  # myNewDiv  # hover  # td  # visible  # toggleClass  # newDiv 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  如何在云主机上快速搭建多站点网站?  Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  北京企业网站设计制作公司,北京铁路集团官方网站?  详解一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)  Laravel怎么实现API接口鉴权_Laravel Sanctum令牌生成与请求验证【教程】  如何在阿里云购买域名并搭建网站?  Swift开发中switch语句值绑定模式  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  如何用JavaScript实现文本编辑器_光标和选区怎么处理  教你用AI润色文章,让你的文字表达更专业  如何在橙子建站中快速调整背景颜色?  网站建设要注意的标准 促进网站用户好感度!  Laravel如何生成API文档?(Swagger/OpenAPI教程)  ,怎么在广州志愿者网站注册?  昵图网官方站入口 昵图网素材图库官网入口  如何用已有域名快速搭建网站?  Laravel如何实现多语言支持_Laravel本地化与国际化(i18n)配置教程  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊,能赚钱吗?  晋江文学城电脑版官网 晋江文学城网页版直接进入  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  如何基于云服务器快速搭建网站及云盘系统?  Javascript中的事件循环是如何工作的_如何利用Javascript事件循环优化异步代码?  Laravel怎么连接多个数据库_Laravel多数据库连接配置  香港服务器网站推广:SEO优化与外贸独立站搭建策略  详解MySQL数据库的安装与密码配置  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  详解Huffman编码算法之Java实现  Laravel如何处理跨站请求伪造(CSRF)保护_Laravel表单安全机制与令牌校验  Laravel用户密码怎么加密_Laravel Hash门面使用教程  轻松掌握MySQL函数中的last_insert_id()  长沙做网站要多少钱,长沙国安网络怎么样?  BootStrap整体框架之基础布局组件  如何快速辨别茅台真假?关键步骤解析  百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏  如何自定义建站之星模板颜色并下载新样式?  简历在线制作网站免费版,如何创建个人简历?  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样?  浅析上传头像示例及其注意事项  Laravel集合Collection怎么用_Laravel集合常用函数详解  在centOS 7安装mysql 5.7的详细教程  Laravel如何处理CORS跨域请求?(配置示例)  Laravel如何使用Livewire构建动态组件?(入门代码)  Laravel如何使用软删除(Soft Deletes)功能_Eloquent软删除与数据恢复方法  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf?  php json中文编码为null的解决办法  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符(忽略数字与嵌套)