jQuery实用技巧大全

发表时间: 2024-03-15 14:38

2.1jQuery工具方法:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">var person = {name:'wokong',age:18};var arr = [9,11,43,17,6,20];// $.each(遍历目标，回调函数（索引(键)，值）)$.each(arr,function (k,v) {console.log(k,v)});console.log($.type($())); //检查对象的类型console.log($.isFunction()); //检查是不是函数console.log($.isArray(arr)); //检查是不是数组var json1 = '{"username":"bajie","age":18}';// var json2 = "{'username':'bajie','age':18}";// 用来把json数组或者json对象的字符串 转换成正常的对象或者数组console.log($.parseJSON(json1));</script></body></html>

2.2jQuery爱好选择器练习:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>全选练习</title></head><body><form>你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选<br/><input type="checkbox" name="items" value="足球"/>足球<input type="checkbox" name="items" value="篮球"/>篮球<input type="checkbox" name="items" value="羽毛球"/>羽毛球<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/><input type="button" id="checkedAllBtn" value="全　选"/><input type="button" id="checkedNoBtn" value="全不选"/><input type="button" id="checkedRevBtn" value="反　选"/><input type="button" id="sendBtn" value="提　交"/></form><script src="js/jquery-1.10.1.js"></script><script type="text/javascript">/*功能说明:1. 点击'全选': 选中所有爱好2. 点击'全不选': 所有爱好都不勾选3. 点击'反选': 改变所有爱好的勾选状态4. 点击'全选/全不选': 选中所有爱好, 或者全不选中5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态6. 点击'提交': 提示所有勾选的爱好*/$(function () {// 获取全选全不选的复选框var $checkedAllBox = $('#checkedAllBox');// 获取所有爱好var $items = $(':checkbox[name=items]');// 1. 点击'全选': 选中所有爱好$('#checkedAllBtn').click(function () {$items.prop('checked',true);$checkedAllBox.prop('checked',true);});// 2. 点击'全不选': 所有爱好都不勾选$('#checkedNoBtn').click(function () {$items.prop('checked',false);$checkedAllBox.prop('checked',false);});// 3. 点击'反选': 改变所有爱好的勾选状态$('#checkedRevBtn').click(function () {$items.each(function () {this.checked = !this.checked;})// 选中的个数和我的总数相等 说明全部选中了// var checkedList = $(':checkbox[name=items]:checked');// if($items.length === checkedList.length){//// 说明全选了// $checkedAllBox.prop('checked',true);// }else{//// 说明没有全选// $checkedAllBox.prop('checked',false);// }$checkedAllBox.prop('checked',$items.filter(':checked').length === $items.length);// 不选中的长度为0 也是全选$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length === 0);});// 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中$checkedAllBox.click(function () {$items.prop('checked',this.checked);});// 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态$items.click(function () {$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length === 0);})// 6. 点击'提交': 提示所有勾选的爱好$('#sendBtn').click(function () {$items.filter(':checked').each(function () {alert(this.value);})})})</script></body></html>

2.3jQuery元素滚动:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>13_元素滚动</title></head><body style="height: 2000px;"><div class="box" style="border:1px solid black;width:100px;height:150px;overflow:auto">This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.his is some text.</div><br><br><br><button id="btn1">得到scrollTop</button><button id="btn2">设置scrollTop</button><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">/*需求:1. 得到div或页面滚动条的坐标2. 让div或页面的滚动条滚动到指定位置*/// scrollTop() 读取滚动条的Y(垂直)坐标 scrollLeft（） 读取滚动条的X坐标$('#btn1').click(function () {// console.log($('.box').scrollTop())// body html document// html在chrome中是有效的// body在IE中是有效的// html和body 只有一个能够获取得到值// console.log($('body').scrollTop())//解决方案：html和body在获取的过程中 一个有值一个为零 所以让这两个获取的值相加// document在jQuery1.8版本以上才可以使用 但是上边的解决方案 更加通用// console.log($('html').scrollTop()+$('body').scrollTop());console.log($(document).scrollTop());})// 2. 让div或页面的滚动条滚动到指定位置$('#btn2').click(function () {// $('.box').scrollTop(200);// 设置滚动条坐标时和读取一样// html在chrome中生效 body在IE中生效// 解决方案：html和body同时设置就行了// $('html,body').scrollTop(200);// 如果jQuery1.8以上版本没问题 document也是可以使用的$(document).scrollTop(200);})</script></body>

2.4jQuery回到顶部练习:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#toTop{width: 30px;height: 40px;background: skyblue;text-align: center;line-height: 20px;font-size: 14px;color: #fff;position: fixed;right:200px;bottom:100px;padding: 0 10px;cursor: pointer;}</style></head><body style="height: 2000px"><div id="toTop">回到顶部</div><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">// 能够实现回到顶部的方案一共两种// 1.时间固定 则路程越长 速度越快 第一种更主流// 2.速度固定 则路程越长 时间越长// 动画总时长var time = 2000;// 动画帧时长 动画总时长 / 动画帧时长 = 总帧数var itemTime = 20;// 给回到顶部按钮绑定单击事件$('#toTop').click(function () {// 获取总路程 (当前页面的滚动条位置)var offset = $('html').scrollTop() + $('body').scrollTop();// 计算单次偏移 = 总路程 / (动画总时长 / 动画帧时长)var itemOffset = offset / ( time / itemTime );// 定时器var timer = setInterval(function () {// 500 -= 5; 495 490 485 480 475 470 ... 0offset -= itemOffset;// 如果当前的位置（offset）等于0了 说明已经回到顶部 清除定时器if(offset<=0){offset = 0 //修正值clearInterval(timer);}// 每次调用定时器 都是修改页面的scrollTop值 每次减小itemOffset$('html,body').scrollTop(offset);},itemTime)})</script></body></html>

2.5jQuery:文档增删改:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>17_文档_增删改</title></head><style type="text/css">* {margin: 0px;}.div1 {position: absolute;width: 200px;height: 200px;top: 20px;left: 10px;background: blue;}.div2 {position: absolute;width: 100px;height: 100px;/*top: 50px;*/background: red;}.div3 {position: absolute;top: 250px;}</style><body><ul id="ul1"><li>AAAAA</li><li title="hello">BBBBB</li><li class="box">CCCCC</li><li title="hello">DDDDDD</li><li title="two">EEEEE</li><li>FFFFF</li></ul><br><br><ul id="ul2"><li class="re">aaa</li><li title="hello">bbb</li><li class="box">ccc</li><li title="hello">ddd</li><li title="two">eee</li></ul><!--1. 添加/替换元素* append(content)向当前匹配的所有元素内部的最后插入指定内容* prepend(content)向当前匹配的所有元素内部的最前面插入指定内容* before(content)将指定内容插入到当前所有匹配元素的前面* after(content)将指定内容插入到当前所有匹配元素的后面替换节点* replaceWith(content)用指定内容替换所有匹配的标签删除节点2. 删除元素* empty()删除所有匹配元素的子元素 (掏空子元素)* remove()删除所有匹配的元素 (连自己一起删除)--><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">/*需求:1. 向id为ul1的ul下添加一个span(最后)2. 向id为ul1的ul下添加一个span(最前)3. 在id为ul1的ul下的li(title为hello)的前面添加span4. 在id为ul1的ul下的li(title为hello)的后面添加span5. 将在id为ul2的ul下的li(title为hello)全部替换为p6. 移除id为ul2的ul下的所有li*/// 内部插入:appendTo()，append(),prependTo(),prepend()// 1. 向id为ul1的ul下添加一个span(最后)$('<span>我是appendTo新增的span</span>').appendTo('#ul1');$('#ul1').append('<span>我是append新增的span</span>');// 2. 向id为ul1的ul下添加一个span(最前)$('<span>我是prependTo新增的span</span>').prependTo('#ul1');$('#ul1').prepend('<span>我是prepend新增的span</span>');// 外部插入：before(),after()// 3. 在id为ul1的ul下的li(title为hello)的前面添加span$('#ul1>li[title=hello]').before('<span>我是before新增的span</span>');// 4. 在id为ul1的ul下的li(title为hello)的后面添加span$('#ul1>li[title=hello]').after('<span>我是after新增的span</span>')// 5. 将在id为ul2的ul下的li(title为hello)全部替换为p// $('#ul2>li[title=hello]').replaceWith('<p>我是替换的p标签</p>')// 6. 移除id为ul2的ul下的所有li// remove 是用于删除节点的// empty 用于掏空节点 删除所有子元素 保留父元素// $('#ul2').remove();// $('#ul2>li').remove();$('#ul2').empty();</script></body></html>

2.6jQuery学生管理系统练习:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="css.css"/></head><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="deleteEmp?id=001">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name:</td><td class="inp"><input type="text" name="empName" id="empName"/></td></tr><tr><td class="word">email:</td><td class="inp"><input type="text" name="email" id="email"/></td></tr><tr><td class="word">salary:</td><td class="inp"><input type="text" name="salary" id="salary"/></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div><script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function () {// 获取三个输入框var $empName = $('#empName');var $email = $('#email');var $salary = $('#salary');// 给提交按钮绑定单击事件$('#addEmpButton').click(function () {// 获取三个输入框的值var empName = $empName.val();var email = $email.val();var salary = $salary.val();// 根据输入框的值 拼装节点// <tr>// <td>Jerry</td>// <td>jerry@sohu.com</td>// <td>8000</td>// <td><a href="deleteEmp?id=002">Delete</a></td>// </tr>$('<tr></tr>').append('<td>'+empName+'</td>').append('<td>'+email+'</td>').append('<td>'+salary+'</td>').append('<td><a href="deleteEmp?id=002">Delete</a></td>').appendTo('#employeeTable tbody').find('a').click(clickA);// 清空三个输入框的信息$empName.val('');$email.val('');$salary.val('');});// 给删除按钮绑定单击事件$('a').click(clickA);// 定义事件回调函数 你定义的 你没调用 最终执行了function clickA(event) {// 阻止默认行为event.preventDefault();// 根据点击的a标签 找到对应的trvar $tr = $(this).parent().parent();// 获取当前行的namevar name = $tr.children(':first').html();// var name = $tr.children().first().html();if(confirm('你确定要删除'+name+'的信息吗？')){$tr.remove();}}})</script></body></html>

2.7jQuery- offset和position:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.wrap{width: 200px;height: 200px;background: pink;position: absolute;top: 50px;left:30px;}.inner{width: 100px;height: 100px;background: yellowgreen;position: absolute;top:50px;}.box{width: 150px;height: 150px;background: skyblue;margin-top: 20px;}</style></head><body><div class="wrap"><div class="box"><div class="inner"></div></div></div><button id="btn1">读取</button><button id="btn2">设置</button><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">// 读取wrap相对于页面左上角的位置// 读取inner相对于页面左上角的位置// offset 返回一个对象 有left和top两个属性 元素相对于页面左上角的位置// position 返回一个对象 有left和top两个属性 元素相对于包含块左上角的位置// 以上两个方法 返回值都不带单位 但是以像素计// offset 传一个对象 可以设置元素的位置 设置时不需要带单位 不过一般不使用这种方式$(function () {$('#btn1').click(function () {// console.log($('.wrap').offset());// console.log($('.inner').offset());console.log($('.wrap').position());console.log($('.inner').position());});$('#btn2').click(function () {$('.inner').offset({'left':300,'top':200})})})</script></body></html>

2.8jQuery元素的尺寸:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 150px;background: pink;padding: 10px;margin: 11px;border:10px solid skyblue;/*overflow: scroll;*/}</style></head><body><div></div><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">var $div = $('div');// width和height方法 返回的就是你设置给当前元素的宽度与高度的值console.log($div.width(),$div.height());//内部尺寸 包含width+paddingconsole.log($div.innerWidth(),$div.innerHeight());//外部尺寸 包含width+padding+borderconsole.log($div.outerWidth(),$div.outerHeight());// outerWidth和outerHeight 方法传递参数true 则在原有基础之上添加margin的值console.log($div.outerWidth(true),$div.outerHeight(true))</script></body></html>

2.9jQuery事件的绑定和解绑:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.wrap{width: 200px;height: 200px;position: absolute;left:50px;top:30px;background: pink;}.inner{position: absolute;top:50px;width: 100px;height: 100px;background: skyblue;}</style></head><body><div class="wrap"><div class="inner">内部div</div></div><button id="btn1">取消绑定所有事件</button><button id="btn2">取消绑定某个事件</button><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">// eventName:编码方便 但只能加一个监听，且有的监听不支持// on:编码不方便 但是可以添加多个监听(多个事件相应同一个回调)，且通用// 1.给wrap绑定点击监听 （两种方式）// $('.wrap').click(function () {// console.log('点了我一下1')// });// $('.wrap').click(function () {// console.log('点了我一下2')// });// $('.wrap').on('click mouseleave',function () {// console.log('点了我一下1')// })// 给inner绑定移入移出事件 三种方式// $('.inner').mouseover(function () {// console.log('mouseover');// }).mouseout(function () {// console.log('mouseout');// })// $('.inner').mouseenter(function () {// console.log('mouseenter')// }).mouseleave(function () {// console.log('mouseleave')// })// hover 传递两个参数 都为函数 第一个参数为移入的回调函数 第二个参数为移出的回调函数// 如果只传递了一个参数 那么移入和移出都是使用这一个函数// hover底层使用mouseenter和mouseleave实现的$('.inner').hover(function () {console.log('移入')},function () {console.log('移出')})// 事件的解绑// off() 解除事件 默认清除所有的事件监听// off方法允许传递参数 参数为事件名称的字符串// 可用于单独清除某个事件 如果想删除多个 使用空格分开即可$('#btn1').click(function () {$('.inner').off();});$('#btn2').click(function () {$('.inner').off('mouseleave mouseenter');})</script></body></html>

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！

#春日生活打卡季##前端##vue##react#