jQuery操作元素属性的值
表单:
<body><input type="button" name="" id="but1" value="测试获得属性值" /><hr />账号：<input type="text" name="sxtzh" id="zhanghao" value="sxt123" /><br />密码：<input type="password" name="" id="mima" value="1234456" /><br />爱好：抽烟<input type="checkbox" />喝酒<input type="checkbox" id="fav2" />烫头<input type="checkbox" id="fav" checked="checked" /></body>操作项：
//获得元素对象var zh = $("#zhanghao");//获取属性的值var tp = zh.attr("type");var nm = zh.attr("name");//仅能获取到元素固有的属性值var valu = zh.attr("value");console.log(tp+"--"+nm+"--"+valu);//获得文本框中实时动态的值var val = zh.val();alert(val);//操作元素对象的属性//zh.attr("type","button");//zh.attr("value","测试属性");//支持json格式书写zh.attr({'type':'button','value':'测试属性'});//var ch = $("#fav").attr("checked");alert(ch);//判断是否被勾选var flag = $("#fav2").prop("checked");alert(flag);//为其设置默认勾选$("#fav2").prop("checked","checked");attr("value")仅能获得其固有的属性
val()可以获取文本框中实时动态的值
attr("checked")获得的是checked属性的属性值；prop("checked")返回的是true或false
表单：
<body><input type="button" name="inp" id="inp" value="操作元素的内容" /><hr /><div id="div1"><span>尚学堂学习</span></div><input type="button" name="inp1" id="inp1" value="单标签" /></body>操作项：
//获取的内容中含有HTML标签var ht = $("#div1").html();console.log(ht);//只获取文本内容 不含有HTML标签var tx = $("#div1").text();console.log(tx);//对于单标签【input select textarea】使用.val()方法进行获取值var inpVal = $("#inp1").val();console.log(inpVal);//操作元素对象的内容和值 html()和text()都会对原有的内容进行覆盖//识别HTML标签//$("#div1").html("<b>我们都是圣斗士</b>");//$("#div1").html($("#div1").html()+"<b>我们都是圣斗士</b>");//不识别HTML标签//$("#div1").text("<b>我们都是圣斗士</b>");$("#div1").text($("#div1").text()+"<b>我们都是圣斗士</b>");取值：
html()获取值时能够获得的内容可以带有HTML标签；text()获取的内容中不含有HTML标签
赋值：
html()和text()都会对原有的内容进行覆盖；html()方法赋值时能够识别HTML标签，而text()方法不行；并且html()和text()都会对原有的内容进行覆盖
jquery中操作元素对象的节点的添加
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作页面的元素(添加)</title><style type="text/css">#div1{height: 260px;border: 3px solid red;}p{border: 2px solid blueviolet;}</style><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//创建新的标签var p = $("<p>表达式i</p>")//(内部)添加到div内部元素的后面//$("#div1").append(p);//p.appendTo("#div1");//(内部)添加到div内部元素的前面//$("#div1").prepend(p);//p.prependTo("#div1");//(平级)添加div的兄弟节点(之前)//$("#div1").before(p);//p.insertBefore("#div1");//(平级)添加div的兄弟节点(之后)//$("#div1").after(p);p.insertAfter("#div1");});</script></head><body><div id="div1"><p>表达式1</p><p>表达式2</p><p>表达式3</p><p>表达式4</p></div></body>
</html>注意：四对儿方法两两之间的区别
jQuery中操作元素对象的节点的修改、删除、清除
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作页面的元素(添加)</title><style type="text/css">#div1{height: 260px;border: 3px solid red;}p{border: 2px solid blueviolet;}</style><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){var p = $("<p><b>替换表达式</b></p>")//替换指定的节点replaceWith(p);//p.replaceAll("div p:nth-child(2)");//p.replaceAll("#div1 p:nth-child(3)");//删除、清空指定的节点//删除指定的元素//$("#div1").remove();//清空指定的元素$("div p:nth-child(4)").empty();});</script></head><body><div id="div1"><p>表达式1</p><p>表达式2</p><p>表达式3</p><p style="height: 25px;">表达式4</p></div></body>
</html>示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作页面的节点实例</title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//创建性的节点添加$("#insert_btn").click(function(){var new_p = $('<p>照片: '+'<input type="file" name="" />'+'<input type="button" name="" value="删除" onclick="delete_p(this)" /></p>');$("#bottom").before(new_p);});});//注意方法的重名问题function delete_p(obj){//alert('aaa.');$(obj).parent().remove();};</script></head><body><div id="div1"><p>用户名: <input type="text" name="" id="" value="" /></p><p>照片: <input type="file" name="" id="" value="" /><input type="button" name="" id="insert_btn" value="添加" /></p><p id="bottom"><input type="button" name="" id="" value="提交" /><input type="button" name="" id="" value="清空" /></p></div></body>
</html>jQuery中的事件处理（基本绑定、bind、one）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>事件处理(trigger、事件解绑)</title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//事件的基础绑定$(function(){$("#but1").click(function(){alert("单击事件");})});//bind事件绑定$(function(){$("#but2").bind('click',function(){alert("bind单击件绑定1")});//json数据格式的bind事件绑定$("#but2").bind({'click':function(){alert("bind单击件绑定2");},blur:function(){}});});//one事件绑定$(function(){$("#but3").one("click",function(){alert("one事件的绑定")});});$(function(){//trigger事件绑定操作$("#but4").click(function(){$("#but1").trigger('click');$("#but3").trigger('click');});//事件的解绑$("#but5").click(function(){//当没有给定具体解绑的对象时，解绑指定对象上的所有事件$("#but1").unbind();//指定解绑的事件$("#but3").unbind("click");});});</script></head><body><div id="div1"><input type="button" name="" id="but1" value="基础事件绑定" /><input type="button" name="" id="but2" value="bind事件绑定" /><input type="button" name="" id="but3" value="one事件绑定" /><br /><hr /><input type="button" name="" id="but4" value="trigger事件操作" /><input type="button" name="" id="but5" value="事件解绑" /></div></body>
</html>jQuery中的动画效果
显示：
show(speed):以多长时间来完成这个显示效果
隐藏：
滑动：
淡入淡出：
jQuery插件
静态资源库：
Bootstrap 中文网开源项目免费 CDN 加速服务www.bootcdn.cn
jQuery封装原理
将一些方法（如dom获取对象、获取值等）进行概括，总结出共性，使其通过一个函数的调用即可实现的caozuuo
闭包的优点：
1、可以减少全局变量的对象，防止全局变量过去庞大，导致难以维护
2、防止可修改变量，因为内部的变量外部是无法访问的，并且也不可修改的。安全
3、读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
