前端基础快速学习- 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按钮切换隐藏效果

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

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

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