前端基础快速学习- JQuery

作者:杭州车成汽车事务代理服务部 来源:www.guohuicar.com 发布时间:2017-09-03 12:32:56
前端基础快速学习- JQuery

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

例1.添加,删除class

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

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

addclass(‘hide’)直接给找到的标签添加一个样式class,无需使用classlist了

123 百度 <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>

点击hide按钮切换隐藏效果

wKioL1iBkNfxsfPdAAAvIfwpYIw978.jpg

例2 隐藏菜单

注意事项:

showmenu(this),这里$(this)就表示事件发生的jquery对象,然后可以通过parent和sibling来寻找其他标签

菜单一

内容一

内容一

内容一

内容一

内容一

菜单二

内容二

内容二

内容二

内容二

内容二

内容二

菜单三

内容三

内容三

内容三

内容三

内容三

内容三

<scriptsrc="jquery-1.12.4.js"></script><script> functionShowMenu(ths){ //console.log(ths);//Dom中的标签对象 //$(ths)//Dom标签对象转换成jQuery标签对象(便利) //$(ths)[0]//jQuery标签对象转换成Dom标签对象 $(ths).next().removeClass('hide'); $(ths).parent().siblings().find('.body').addClass('hide'); } </script>

例3. 复制,删除文本框

clone()克隆标签

find()查找标签

attr()添加一个事件

+

<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>

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

wKiom1iBmSChF11VAAAz9XaAPak887.jpg

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

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

$(function){

....

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

菜单一

内容一

内容一

内容一

内容一

内容一

菜单二

内容二

内容二

内容二

内容二

内容二

内容二

菜单三

内容三

内容三

内容三

内容三

内容三

内容三

<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>

例5 延迟绑定

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

123

456

789

<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>

wKiom1iBnjai7SkjAABq2g43m9Y056.jpg

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:黄石SEO http://huangshi.raoyu.net

  • 上一篇:python -lambda表达式的用法
  • 下一篇:最后一页
  • 
    COPYRIGHT © 2015 杭州车成汽车事务代理服务部 ALL RIGHTS RESERVED.
    本站所有原创信息,未经许可请勿任意转载或复制使用 网站地图 技术支持:肥猫科技
    精彩专题:网站建设
    购买本站友情链接、项目合作请联系客服QQ:2500-38-100