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、讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中。
 Ubuntu編譯)
)
