JQuery实例

2025-02-26 技术教程

前面学习了原生的DOM，现在看看如何使用JQuery。JQuery建议使用1.12的版本，这样对旧版本的IE兼容性比较好。

例1.添加，删除class

知识要点：

1. 通过<script src='jquery-1.12.4.js></script>调用jquery

2. 相对于Dom的document.getElementbyID('i1'), JQuery直接使用$('#i1')；

类似的，查找类可以用$('.c1')，查找p标签 $('p')，查找form的元素 $(':text') ，还可以组合使用。具体的选择器可以参考https://www.w3schools.com/jquery/jquery_ref_selectors.asp

3.addclass（‘hide’）直接给找到的标签添加一个样式class，removeClass('hide')删除一个class，无需使用classlist了

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>.hide{display:none;}</style></head><body><inputtype="button"value="hide"onclick="hides();"/><divid="i1"><divclass="item"></div><divclass="item"><divclass="c1">123</div><a>百度</a></div><divclass="item"></div></div><divid="i2"></div><scriptsrc="jquery-1.12.4.js"></script><script>flag=true;functionhides(){if(flag==true){$('#i1').addClass('hide');console.log(flag)flag=false;}else{$('#i1').removeClass('hide');console.log(flag)flag=true;}}</script></body></html>

点击hide按钮切换隐藏效果

例2. 全选和反选

这个例子在前面的Dom里面出现过，现在看看JQuery如何实现

知识点：

1. 选择器可以组合使用比如 $('#tb :checkbox') 表示id=tb下面所有的checkbox元素

2. 对于checkbox的属性，通过prop()来实现，如果是自定义的其他的属性，通过attr()实现

3. each()可以实现循环，循环里面如果输出this,可以看见他是一个dom的格式，如果把他转换成jquery对象的格式（数组格式），可以通过$(this)实现，如果想把jquery转为dom的格式，那么直接取第一个数组的值就行了，例子里面实现了3种方式，dom，jquery以及三元运算符的格式

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><inputtype="button"value="全选"onclick="checkAll();"/><inputtype="button"value="反选"onclick="reverseAll();"/><inputtype="button"value="取消"onclick="cancleAll();"/><tableborder="1"><thead><tr><th>选项</th><th>IP</th><th>PORT</th></tr></thead><tbodyid="tb"><tr><td><inputtype="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr><tr><td><inputtype="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr><tr><td><inputtype="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr></tbody></table><scriptsrc="jquery-1.12.4.js"></script><script>functioncheckAll(){$('#tb:checkbox').prop('checked',true);}functioncancleAll(){$('#tb:checkbox').prop('checked',false);}functionreverseAll(){$(':checkbox').each(function(k){//this,代指当前循环的每一个元素//Dom/*if(this.checked){this.checked=false;}else{this.checked=true;}*//*if($(this).prop('checked')){$(this).prop('checked',false);}else{$(this).prop('checked',true);}*///三元运算varv=条件?真值：假值varv=$(this).prop('checked')?false:true;$(this).prop('checked',v);})}</script></body></html>

例3隐藏菜单

知识点：

1. click的事件可以直接选择到标签之后执行，这个比在html里面使用onclick事件要好很多。

2. Jquery支持链式的编程，因此如下所示可以一行实现很多功能

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.header{background-color:black;color:wheat;}.content{min-height:50px;}.hide{display:none;}</style></head><body><div><divclass="item"><divclass="header">标题一</div><divid="i1"class="contenthide">内容</div></div><divclass="item"><divclass="header">标题二</div><divclass="contenthide">内容</div></div><divclass="item"><divclass="header">标题三</div><divclass="contenthide">内容</div></div></div><scriptsrc="jquery-1.12.4.js"></script><script>$('.header').click(function(){$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')})</script></body></html>

例4. 复制，删除文本框

clone（）克隆标签

find（）查找标签

attr（）添加一个事件

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><div><p><aonclick="Add(this);">+</a><inputtype="text"/></p></div><scriptsrc="jquery-1.12.4.js"></script><script>functionAdd(ths){varp=$(ths).parent().clone();p.find('a').text('-');p.find('a').attr('onclick','Remove(this);');$(ths).parent().parent().append(p);}functionRemove(ths){$(ths).parent().remove();}</script></body></html>

效果：点击+自动复制一行，点击-删除自己所在

例5. 绑定事件-例2的升级版

例2里面我们需要给每个标签都手动的添加onclick事件，如果可以统一绑定事件，会省事很多。有两种方式，如下所示;

$(function){

....

}里面执行的...会在文档树加载之后自动执行，不会等待所有的图片内容的加载

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>.hide{display:none;}.menu{width:200px;height:600px;border:1pxsolid#dddddd;overflow:auto;}.menu.item.title{height:40px;line-height:40px;background-color:#2459a2;color:white;}</style></head><body><divclass="menu"><divclass="item"><divclass="title">菜单一</div><divclass="body"><p>内容一</p><p>内容一</p><p>内容一</p><p>内容一</p><p>内容一</p></div></div><divclass="item"><divclass="title">菜单二</div><divclass="bodyhide"><p>内容二</p><p>内容二</p><p>内容二</p><p>内容二</p><p>内容二</p><p>内容二</p></div></div><divclass="item"><divclass="title">菜单三</div><divclass="bodyhide"><p>内容三</p><p>内容三</p><p>内容三</p><p>内容三</p><p>内容三</p><p>内容三</p></div></div></div><scriptsrc="jquery-1.12.4.js"></script><script>//方法一//$(function(){////当文档树加载完毕后，自动执行//$('.item.title').click(function(){////this,$(this)//$(this).next().removeClass('hide');//$(this).parent().siblings().find('.body').addClass('hide');//});//});//方法二$('.item.title').bind('focus',function(){$(this).next().removeClass('hide');$(this).parent().siblings().find('.body').addClass('hide');})</script></body></html>

例6 事件的延迟绑定

比如通过javascript创建的新标签，如何让他自动绑定事件？可以通过delegate实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><inputtype="button"onclick="Add();"/><ul><li>123</li><li>456</li><li>789</li></ul><scriptsrc="jquery-1.12.4.js"></script><script>$(function(){/*$('li').click(function(){alert($(this).text());});*/$("ul").delegate("li","click",function(){alert($(this).text());});});functionAdd(){vartag=document.createElement('li');tag.innerText='666';$('ul').append(tag);}</script></body></html>

例7　模态对话框　（高级版）

之前用DOM实现过模态对话框，现在用JQuery实现同样的功能。

知识要点：

1.模态对话框的HTML和CSS布局，3层，最上层居中，中间一个阴影层，最下面是主界面，上面两层默认隐藏，通过z-index区分上下顺序

2. 可以通过attr()方法来获取和设置自定义的属性；如果是checkbox或者radio，那么通过prop()方法来获取和设定属性

3.通过属性来定位元素，比如 $("[editable='false']")则可以获取editable属性为false的那个标签元素

4. 文本编辑，对于InnerText的值是通过text()实现，对于input的表单内容则是通过val()实现

5. 添加class，删除class通过addClass()和removeClass()实现

6. delegate 延迟绑定的实现，一般用于未来的新的标签，比如通过脚本创建的标签

7. 动态的创建标签，可以直接插入html字符串或者通过CreateElement()实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.hide{display:none;}.modal{position:fixed;top:50%;left:50%;width:500px;height:400px;margin-left:-250px;margin-top:-250px;background-color:#eeeeee;z-index:10;}.shadow{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0.6;background-color:black;z-index:9;}.item{position:relative;width:100px;margin-top:20px;margin-left:30px;}.label{width:40px;color:chocolate;}.content{width:100px;position:absolute;right:-80px;}.buttons{margin-top:20px;margin-left:30px;}</style></head><body><aonclick="addElement();">添加</a><tableborder="1"id="tb"><tr><tdtarget="hostname">1.1.1.11</td><tdtarget="port">80</td><tdtarget="ip">80</td><tdeditable="true"><aclass="edit">编辑</a>|<aclass="del">删除</a></td></tr><tr><tdtarget="hostname">1.1.1.12</td><tdtarget="port">80</td><tdtarget="ip">80</td><tdeditable="true"><aclass="edit">编辑</a>|<aclass="del">删除</a></td></tr><tr><tdtarget="hostname">1.1.1.13</td><tdtarget="port">80</td><tdtarget="ip">80</td><tdeditable="true"><aclass="edit">编辑</a>|<aclass="del">删除</a></td></tr><tr><tdtarget="hostname">1.1.1.14</td><tdtarget="port">80</td><tdtarget="ip">80</td><tdeditable="true"><aclass="edit">编辑</a>|<aclass="del">删除</a></td></tr></table><divclass="modalhide"><div><divclass="item"><labelclass="label">主机名</label><inputclass="content"name="hostname"type="text"/></div><divclass="item"><labelclass="label">端口</label><inputclass="content"name="port"type="text"/></div><divclass="item"><labelclass="label">IP地址</label><inputclass="content"name="ip"type="text"/></div></div><divclass="buttons"><inputtype="button"value="取消"onclick="cancelModal();"/><inputtype="button"value="添加"onclick="addModal();"/><inputtype="button"value="修改"onclick="updateModal();"/></div></div><divclass="shadowhide"></div><scriptsrc="jquery-1.12.4.js"></script><script>$("#tb").delegate('.del',"click",function(){$(this).parent().parent().remove();})functionaddModal(){vartr=document.createElement('tr');vartd1=document.createElement('td');td1.innerHTML=$(".modalinput[name='hostname']").val();varatt1=document.createAttribute('target');att1.value='hostname';td1.setAttributeNode(att1);vartd2=document.createElement('td');td2.innerHTML=$(".modalinput[name='port']").val();varatt2=document.createAttribute('target');att2.value='port';td2.setAttributeNode(att2);vartd3=document.createElement('td');td3.innerHTML=$(".modalinput[name='ip']").val();;varatt3=document.createAttribute('target');att3.value='ip';td3.setAttributeNode(att3);vartd4=document.createElement('td');td4.innerHTML="<aclass='edit'>编辑</a>|<aclass='del'>删除</a>"$(tr).append(td1);$(tr).append(td2);$(tr).append(td3);$(tr).append(td4);$('#tb').append(tr);$(".modal,.shadow").addClass('hide');}functionaddElement(){$(".modal,.shadow").removeClass('hide');}functioncancelModal(){$(".modal,.shadow").addClass('hide');$('.modalinput[type="text"]').val("");}functionupdateModal(){varhost=$(".modalinput[name='hostname']").val()varport=$(".modalinput[name='port']").val()varip=$(".modalinput[name='ip']").val()vartds=$("[editable='false']").prevAll()console.log(tds)tds.each(function(){console.log($(this).attr('target'))if($(this).attr('target')=='ip'){$(this).text(ip);console.log('updateip')}elseif($(this).attr('target')=='port'){$(this).text(port);console.log('updateport')}elseif($(this).attr('target')=='hostname'){$(this).text(host)console.log('updatehost')}})$(".modal,.shadow").addClass('hide');$("[editable='false']").attr('editable','true')}$("#tb").delegate(".edit","click",function(){$(".modal,.shadow").removeClass('hide');//this$(this).parent().attr('editable','false')vartds=$(this).parent().prevAll();tds.each(function(){//获取td的target属性值varn=$(this).attr('target');//获取td中的内容vartext=$(this).text();vara1='.modalinput[name="';vara2='"]';vartemp=a1+n+a2;$(temp).val(text);})})</script></body></html>

例8 TAB效果

知识点：

1.AddClass和RemoveClass的使用

2.小技巧，通过自定义的属性值进行匹配，定位标签的时候因为格式为[attr=‘value’]的格式，因此做了一个字符串的拼接

3.注释掉的代码是另外一种方法，可以通过索引来进行匹配

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.hide{display:none;}.menu{height:38px;background-color:#eeeeee;line-height:38px;}.active{background-color:brown;}.menu.menu-item{float:left;border-right:1pxsolidred;padding:05px;cursor:pointer;}.content{min-height:100px;border:1pxsolid#eeeeee;}</style></head><body><div><divclass="menu"><divclass="menu-itemactive"a="1">菜单一</div><divclass="menu-item"a="2">菜单二</div><divclass="menu-item"a="3">菜单三</div></div><divclass="content"><divb="1">内容一</div><divclass="hide"b="2">内容二</div><divclass="hide"b="3">内容三</div></div></div><scriptsrc="jquery-1.12.4.js"></script><script>$('.menu-item').click(function(){$(this).addClass('active').siblings().removeClass('active');vartarget=$(this).attr('a');#$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');$('.content').children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide');});</script></body></html>

例9 点赞

知识点：

1. Jquery里面通过css()来改变一个标签的style

2. 思路和Dom一样的，动态创建一个span标签，通过定时器改变大小和位置，当透明度低于一定程度，结束定时器

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.container{padding:50px;border:1pxsolid#dddddd;}.item{position:relative;width:30px;}</style></head><body><divclass="container"><divclass="item"><span>赞</span></div></div><divclass="container"><divclass="item"><span>赞</span></div></div><divclass="container"><divclass="item"><span>赞</span></div></div><divclass="container"><divclass="item"><span>赞</span></div></div><scriptsrc="jquery-1.12.4.js"></script><script>$('.item').click(function(){AddFavor(this);});functionAddFavor(self){//DOM对象varfontSize=15;vartop=0;varright=0;varopacity=1;vartag=document.createElement('span');$(tag).text('+1');$(tag).css('color','green');$(tag).css('position','absolute');$(tag).css('fontSize',fontSize+"px");$(tag).css('right',right+"px");$(tag).css('top',top+'px');$(tag).css('opacity',opacity);$(self).append(tag);varobj=setInterval(function(){fontSize=fontSize+10;top=top-10;right=right-10;opacity=opacity-0.1;$(tag).css('fontSize',fontSize+"px");$(tag).css('right',right+"px");$(tag).css('top',top+'px');$(tag).css('opacity',opacity);if(opacity<0){clearInterval(obj);$(tag).remove();}},40);}</script></body></html>

例10 鼠标移动窗口

下面这个例子可以通过鼠标拖曳窗口

知识点：

1. offset()显示的是当前标签在整个html里面的坐标，还有一个position()显示的是在absolute在relative标签里面的位置

2. event=e || windows.event 是为了兼容旧版的IE来获取当前的事件， _event.clientX和_event.clientY这里获取的是鼠标的坐标

3. 绑定事件有几种方式，比如直接通过标签执行 $(''#title).mousover(function(){}); 或者通过on绑定，off接触绑定，例如$(''#title).on('mousemove',function(){}), $(''#title).off('mousemove'); 或者可以通bind和unbind绑定和接触绑定，比如例5；最后还可以通过delegate()来延迟绑定，比如例6

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><div><divid="title"></div><div></div></div><scripttype="text/javascript"src="jquery-1.12.4.js"></script><script>$(function(){//鼠标放在标签上面自动变成移动的符号$('#title').mouseover(function(){$(this).css('cursor','move');});//鼠标单击的事件$("#title").mousedown(function(e){console.log($(this).offset());//鼠标所在的坐标var_event=e||window.event;varord_x=_event.clientX;varord_y=_event.clientY;console.log(ord_x)console.log(ord_y)//标签左上角在html里面的坐标varparent_left=$(this).parent().offset().left;varparent_top=$(this).parent().offset().top;$('#title').on('mousemove',function(e){var_new_event=e||window.event;varnew_x=_new_event.clientX;varnew_y=_new_event.clientY;//获取标签左上角的新坐标varx=parent_left+(new_x-ord_x);vary=parent_top+(new_y-ord_y);$(this).parent().css('left',x+'px');$(this).parent().css('top',y+'px');})});$("#title").mouseup(function(){//撤销绑定事件$("#title").off('mousemove');});})</script></body></html>

例11 阻止事件的发生

有的时候，我们会希望根据一定的条件阻止某个事件的发生，比如表单验证，如果不符合格式或者内容，则无法提交。

知识点：

默认情况下，当我们执行了自定义的Click事件后，他会自动跳转到href指定的地址。但是如果我们把自定义的事件返回值为false，那么他就不会执行后面的操作

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><aonclick="returnClickOn()"href="http://www.oldboyedu.com">走你1</a><aid="i1"href="http://www.oldboyedu.com">走你2</a><scriptsrc="jquery-1.12.4.js"></script><script>functionClickOn(){alert(123);returnfalse;}$('#i1').click(function(){alert(456);returnfalse;})</script></body></html>

例12 JQuery的扩展事件

如果希望自己定义一个事件，然后让JQuery来调用的，可以通过extend

知识点：

1. extend的使用有两种方式：$. extend('name':function(){})定义，然后$.name来调用；或者是$.fn.extend()定义，然后通过$('#id').name的方式来调用

2. 可以把这些扩展方法都写入一个专门的js文件，注意在plugin文件里面，我们是把他放在了一个自执行的方法里面，这个是为了避免和其他js文件里面变量名的冲突。这里我可以直接把JQuery作为参数传进去，这样arg.extend 就相当于$.extend了

plugin1.js

(function(arg){varstatus=1;arg.extend({'Hellow':function(){return'HOHOH';}});})(jQuery);

test.html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><scriptsrc="jquery-1.12.4.js"></script><scriptsrc="plugin2.js"></script><script>varv=$.Hellow();alert(v);</script></body></html>

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。