jquery_操作dom
阿新 • • 發佈:2018-05-18
賦值 hide asc 操作 def 代碼 attr red hello
// jquery_操作dom //代碼1: $(‘#test-ul li[name=book]‘).text(); $(‘#test-ul li[name=book]‘).html(); j1.html(‘<span style="color: red">JavaScript</span>‘); j2.text(‘JavaScript & ECMAScript‘); // 代碼解說: // 1. .html()方法和.text()方法用於操作dom //代碼2: $(‘#test-css li.dy>span‘).css(‘background-color‘, ‘#ffd351‘).css(‘color‘, ‘red‘); // 代碼解說: // 1.css()方法用於操作css,這裏進行了鏈式調用 //代碼3: var a = $(‘a[target=_blank]‘); a.hide(); // 隱藏 a.show(); // 顯示 // 代碼解說: // 1.顯示和隱藏dom //代碼4: // 瀏覽器可視窗口大小: $(window).width(); // 800 $(window).height(); // 600 // HTML文檔大小: $(document).width(); // 800 $(document).height(); // 3500 // 某個div的大小: var div = $(‘#test-div‘); div.width(); // 600 div.height(); // 300 div.width(400); // 設置CSS屬性 width: 400px,是否生效要看CSS是否有效 div.height(‘200px‘); // 設置CSS屬性 height: 200px,是否生效要看CSS是否有效 // 代碼解說: // 1.獲取dom信息 //代碼5: // <div id="test-div" name="Test" start="1">...</div> var div = $(‘#test-div‘); div.attr(‘data‘); // undefined, 屬性不存在 div.attr(‘name‘); // ‘Test‘ div.attr(‘name‘, ‘Hello‘); // div的name屬性變為‘Hello‘ div.removeAttr(‘name‘); // 刪除name屬性 div.attr(‘name‘); // undefined // 代碼解說: // 1.attr()和removeAttr()方法用於操作DOM節點的屬性: //代碼6: /* <input id="test-input" name="email" value=""> <select id="test-select" name="city"> <option value="BJ" selected>Beijing</option> <option value="SH">Shanghai</option> <option value="SZ">Shenzhen</option> </select> <textarea id="test-textarea">Hello</textarea> */ var input = $(‘#test-input‘), select = $(‘#test-select‘), textarea = $(‘#test-textarea‘); input.val(); // ‘test‘ input.val(‘[email protected]‘); // 文本框的內容已變為[email protected] select.val(); // ‘BJ‘ select.val(‘SH‘); // 選擇框已變為Shanghai textarea.val(); // ‘Hello‘ textarea.val(‘Hi‘); // 文本區域已更新為‘Hi‘ // 代碼解說: // 1.val()方法用於各種輸入框的取值和賦值
jquery_操作dom