jQuery元素操作
阿新 • • 發佈：2019-03-24
lan 全選和反選 att true for 建表 .cn int 添加元素
jQuery中創建元素及追加元素
DOM中可以動態創建元素:document.createElement(“標簽的名字”);
jQuery中同樣可以創建元素標簽,並且返回的就是jQuery對象,可以直接調用方法
進行使用
1.append 方法用來在元素的末尾追加元素（最後一個子節點）。增加元素末尾
2.prepend ，在元素的開始添加元素（第一個子節點）。增加元素開始
3.after ，在元素之後添加元素（添加兄弟）增加元素後面
4.before ：在元素之前添加元素（添加兄弟）增加元素前面
案例：
權限選擇
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.12.2.js"></script> <script> $(function () { //第一個按鈕:獲取按鈕添加點擊事件,獲取第一個下拉框中被選中的option添加到第二個下拉框 $("#toRight").click(function() { $("#se2").append($("#se1>option:selected")); }); //第二個按鈕 $("#toLeft").click(function () { $("#se1").append($("#se2>option:selected")); }); //第三個按鈕 $("#toAllRight").click(function() { $("#se2").append($("#se1>option")); }); //第四個按鈕 $("#toAllLeft").click(function () { $("#se1").append($("#se2>option")); }); }); </script> </head> <body> <div style="margin-left: 500px; margin-top: 20px; background-color: #999999"> <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se1"> <option>添加</option> <option>刪除</option> <option>修改</option> <option>查詢</option> <option>打印</option> </select> <div style="width: 50px; float: left;"> <input type="button" name="name" value=">" style="width: 50px;" id="toRight" /> <input type="button" name="name" value="<" style="width: 50px;" id="toLeft" /> <input type="button" name="name" value=">>" style="width: 50px;" id="toAllRight" /> <input type="button" name="name" value="<<" style="width: 50px;" id="toAllLeft" /> </div> <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se2"> </select> </div> </body> </html>
創建元素的方式:
1.html方法設置內容,返回的是當前的對象,如果不傳入參數,獲取的是標簽中的內容
2.html 方法可以創建元素
3.$(“html 標簽”) 可以創建元素
案例：點擊按鈕動態創建表格
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } div { margin-left: 300px; margin-top: 100px; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微軟雅黑"; color: #fff; } td { font: 14px "微軟雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> <script src="jquery-1.12.2.js"></script> <script> // 模擬從後臺拿到的數據 var datas = [ { name: "傳智播客", url: "http://www.itcast.cn", type: "IT最強培訓機構" }, { name: "黑馬程序員", url: "http://www.itheima.com", type: "大學生IT培訓機構" }, { name: "傳智前端學院", url: "http://web.itcast.cn", type: "前端的黃埔軍校" }]; $(function () { $("#btnCreate").click(function () { var arr=[]; //遍歷數組 for(var i=0;i<datas.length;i++){ var obj=datas[i];//數組中的每一個對象 //創建行和列,加入到tbody中 arr.push("<tr><td><a href="+obj.url+">"+obj.name+"</a></td> <td>"+obj.type+"</td></tr>"); } $("#tbd").html(arr); }); }); </script> </head> <body> <input type="button" value="獲取數據" id="btnCreate"/> <div> <table> <thead> <tr> <th>名稱</th> <th>說明</th> </tr> </thead> <tbody id="tbd"> </tbody> </table> </div> </body> </html>
設置和獲取表單的value
input標簽:文本框,radio,select,textarea(文本域),checkbox….常見的表單標簽都可以通過val方法獲取和設置value值
例如：
$("#txt1").val("admin");
$("#txt2").val("123456");
$("#txt3").val(" 這是一個條款");
$("#s1").val(2);// 設置 value 為 2 的選中
案例:設置和獲取系統屬性值或者自定義屬性
$("#btn1").click(function () {
$("a").attr("title"," 傳智播客")
$("a").attr("href","http://www.itcast.cn");
});
$("#btn2").click(function () {
// 獲取屬性值
console.log($("a").attr("title"));
});
attr()方法:可以設置屬性值,兩個參數:1.屬性名字,2,屬性值
attr()方法:可以獲取屬性值,一個參數:1.屬性名字
案例:全選和反選案例
設置復選框選中:(attr設置checkbox的選中有問題)prop
prop用法和attr一樣
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.2.js"></script> <script> //兩個按鈕:1按鈕全選,2全不選 $(function () { //獲取第一個按鈕,點擊---全選 $("#btnAll").click(function () { $("#dv :checkbox").prop("checked",true); }); //獲取第二個按鈕,點擊---全不選 $("#btnNoAll").click(function () { $("#dv :checkbox").prop("checked",false); }); }); </script> </head> <body> <input type="button" value="全選" id="btnAll"/> <input type="button" value="全不選" id="btnNoAll"/> <div id="dv"> <input type="checkbox" value="1"/>吃飯 <input type="checkbox" value="2"/>睡覺 <input type="checkbox" value="3"/>打豆豆 <input type="checkbox" value="4"/>打籃球 <input type="checkbox" value="5"/>打足球 <input type="checkbox" value="6"/>打鉛球 <input type="checkbox" value="7"/>打桌球 </div> </body> </html>
設置和獲取元素的寬和高
通過.css()方法寫一個屬性可以獲取寬或者高,是字符串類型如果獲取後重新設置需要轉換,麻煩
1.width()方法獲取寬度
2.height()方法獲取高度
獲取的時候直接就是數字類型
例如：
console.log($("div").width());
console.log($("div").height());
位置操作
Offset()方法返回的是對象,並且,對象中有一個left和一個top,並且值是數字類型，設置的時候也可以沒有px，設置的時候元素在設置前如果沒有脫離文檔流,設置的時候會自動進行脫離文檔流,默認為relative，如果設置前有脫離文檔流,那麽設置的時候直接改變位置
例如：
// 獲取的是對象 , 並且沒有 px console.log($("div").offset()); console.log($("div").offset().left); console.log($("div").offset().top);
註意:如果層和層中的標簽同時定位,並且,標簽距離左上角50px.通過按鈕設置層距離左上角100px,那麽標簽此時距離左上角為150px。
特此聲明：如需轉載請註明出處，如有疑問請及時提出以便於改正，如有侵權，聯系刪除，謝謝
jQuery元素操作