本篇接上篇继续介绍jQuery的一些用法：

5、文档处理:对HTML页面的内容进行一些增删改改的操作。

涉及到的知识点：

appendTo:把匹配的元素追加到另一个指定的元素集合中

prepend :向每个匹配的元素内容之前插入内容

clone :复制匹配的元素

remove :删除匹配的元素

empty :清空匹配的元素的所有子元素

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><divid="d1"><div><aonclick="Addto(this,'#d1');">+</a><!--点击此加号会自动添加--><inputtype="text"/></div></div><div></div><divid="d2"><textarea>文本一</textarea><inputtype="button"value="左移到右"onclick="Move(this);"/><textarea>文本二</textarea><inputtype="button"value="清空文本"onclick="Empty();"/></div><scriptsrc="/jquery-2.2.0.js"></script><script>functionAddto(ths,con){varcp=$(ths).parent().clone();//找到当前元素的父标签并复制其所有内容//修改获取到的内容：//首先把第一个子元素的文本改成‘—’//然后再把里面的onclick属性值改成Remove(this')cp.children(':first').text('-').attr("onclick","Remove(this)");cp.appendTo(con);//把修改后的内容追加到传入的ID所在元素的最后面}functionRemove(ths){$(ths).parent().remove();//找到当前元素的父元素并将其删除，也就是删除自己。}functionMove(ths){varcp=$(ths).prev().text();//获取文本一的内容$(ths).prev().text('');//获取完成后清空文本一cp=cp+'\n'//增加换行符$(ths).next().prepend(cp);//查找到文本二所在元素位置并在文本二之前插入文本一内容}functionEmpty(){$('textarea').empty();//清空所有的textarea元素的内容}</script></body></html>

6、事件

涉及到知识点：

ready：当页面DOM加载完成后执行包含的代码

focus：设置页面某元素获取焦点，也可设置获取焦点后执行代码

blur：当元素失去焦点时触发并执行代码

change：当元素内容发生改变时触发

bind：为某元素绑定一个事件

click：单击事件

hover：鼠标悬停事件（鼠标移动到一个对象上及移出这个对象时）的方法


例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>.change_color{background-color:deepskyblue;}.bk{border:solid2pxgreen;}</style></head><body><inputid="d1"type="text"><inputid="d2"type="button"value="隐藏输入框"><scriptsrc="/jquery-2.2.0.js"></script><script>$(function(){//当页面DOM加载完成后执行，$(document).ready(function(){的简写方式$('#d1').focus();//自动把焦点设置到ID为d1的元素上$('#d1').blur(function(){//当元素失去焦点时执行$(this).change(function(){//如果元素内容发生改变时执行$(this).addClass('bk');//修改元素边框样式});});$('#d2').bind("click",function(){//为ID为d2的元素绑定一个click事件$('#d1').hide();//隐藏ID为d1的元素});$('#d2').hover(//当ID为d2的元素发生鼠标悬停事件时执行function(){$(this).addClass('change_color');//鼠标悬停时添加样式},function(){$(this).removeClass('change_color');//鼠标移走时去除样式});});</script></body></html>

7、自定义插件

说明：jQuery虽然已经提供了很多方法，但是总会有某些时候我们想自定义一些方法。jQuery提供了一个插件机制来满足此类需求。

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><scriptsrc="/jquery-2.2.0.js"></script><script>(function(arg){//自执行函数，这里的arg是一个形参，值是最后的括号中传入的jQueryarg.extend({//jquery扩展方法的语法：等于jQuery.extend"login":function(){//格式为“方法名称”：方法主体代码return123;//执行的代码}});})(jQuery);//传入参数值varret=$.login();//执行自定义的jQuery方法console.log(ret);//查看结果</script></body></html>