-
DOM外部插入after()與before()
before與after都是用來對相對選中元素外部增加相鄰的兄弟節點
用來插入到集合中每個匹配元素的前面或者后面
查看全部 -
jQuery節點創建與屬性的處理
eg: jq
? var $body = $('body');
? ? $body.on('click', function() {
? ? ? ? //通過jQuery生成div元素節點
? ? ? ? var div = $("<div class='right'><div class='aaron'>動態創建DIV元素節點</div></div>")
? ? ? ? $body.append(div)
? ? })
eg:dom
var body = document.querySelector('body');
? ? document.addEventListener('click',function(){
????????????//向文檔添加事件句柄
? ? ?//創建2個div元素
? ? ?var rightdiv = document.createElement('div')
? ? ?var rightaaron = document.createElement("div");
? ? ?//給2個div設置不同的屬性
? ? ?rightdiv.setAttribute('class', 'right')
? ? ?rightaaron.className = 'aaron'
? ? ?rightaaron.innerHTML = "動態創建DIV元素節點";
? ? ?//2個div合并成包含關系
? ? ?rightdiv.appendChild(rightaaron)
? ? ?//繪制到頁面body
? ? ?body.appendChild(rightdiv)
? ? },false)
查看全部 -
向 <p> 元素添加 click 事件處理程序：
$(document).ready(function(){ ?$("p").on("click",function(){ ? ?alert("段落被點擊了。"); ?});});
查看全部 -
1.after與append區別
after在外部
<div> <p>a</p> </div> <p>b</p>
append在內部
<div> <p>a</p> <p>b</p> </div>
2.append與appendTo區別
給和拿的區別
append拿別人添加到自己后面
appendTo把自己給別人
append：向每個匹配的元bai素內部追加內容。
如：
????<p>I?would?like?to?say:?</p> $("p").append("<b>Hello</b>");結果：
<p>I?would?like?to?say:?<b>Hello</b></p>，
ps: 就是向 匹配的元素zhi P 標簽內部內容的末尾dao追加內容 "<b>Hello</b>"
appendTo：把所有匹配的元素追加到另一個指定的元素元素集合中。
如：
<p>I?would?like?to?say:?</p> <div></div><div></div> $("p").appendTo("div");結果：
<div><p>I?would?like?to?say:?</p></div> <div><p>I?would?like?to?say:?</p></div>
ps: 就是把 匹配的元素 P 標簽(內容) 追加到 所有的 DIV 中
查看全部 -
if (!$("p").length) return;?
if語句接收一個布爾值，如果布爾值為true則執行接下來的語句，布爾值為false則執行else關鍵詞后的語句。
JavaScript語言有個特點”隱式轉換”：在需要布爾值會將其他類型自動往布爾值轉換$("p").length本來返回的是number類型的0，但被自動轉化為布爾值false了。前面也說了，如果IF語句接收到布爾值false就會執行else關鍵詞后的語句，這里沒有寫else后的語句。所老師把在前面加了個！，這個東西時一個叫“邏輯非”的操作符，作用就是將布爾值取反，true變成false，false變成true。
所以if (!$("p").length) return;可以翻譯成 ?if（p的長度為零的話~）就直接返回。不執行下一條的detach命令
查看全部 -
:nth-child(index)? 中的索引index 是從1開始計數的， 與eq(index) 要區分開
查看全部 -
wrapInner()是指將其內部的每個元素包裹（元素內部包裹）
<p>
????<div>p1</div>
</p>
<p>
????<div>p2</div>
</p>
wrap()指將其匹配的元素集合中的每個元素包裹(元素外部包裹)
<div>
????<p>p1</p>
</div>
</div>
????<p>p2</p>
</div>
wrapAll()指將其匹配的元素集合中的所有元素包裹（元素外部包裹）
<div>
????<p>p1</p>
????<p>p2</p>
</div>
查看全部 -
$("p:eq(1)").replaceWith('<a?>替換第二段的內容</a>')$('<a?>替換第二段的內容</a>').replaceAll('p:eq(1)')查看全部 -
? ? remove會將元素自身移除，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery數據。
? ? 我們可以通過$()選擇一組相同的元素，然后通過remove()傳遞篩選的規則，達到刪除指定節點的目的。
查看全部 -
empty只是把里面的子標簽刪除了，不會刪除它本身的標簽
查看全部 -
創建元素：document.createElement
設置屬性：setAttribute
添加文本：innerHTML
加入文檔：appendChild
查看全部 -
這個代碼更好理解一些，第二個button 只是將 li 再加上新增加的元素一起放在了 right DIV 的后面
<!DOCTYPE html>
<html>
<head>
??? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
??? <title></title>
??? <style>
??? .left {
??????? width: auto;
??????? height: 150px;
??? }
?? ?
??? .left div {
??????? width: 150px;
??????? height: 120px;
??????? padding: 5px;
??????? margin: 5px;
??????? float: left;
??????? background: #bbffaa;
??????? border: 1px solid #ccc;
??? }
??? </style>
??? <script src="http://www.xianlaiwan.cn/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
??? <h2>add方法()</h2>
??? <div class="left first-div">
??????? <div class="div">
??????????? <ul>
??????????????? <li>list item 1</li>
??????????????? <li>list item 2</li>
??????????????? <li>list item 3</li>
??????????? </ul>
??????????? <p>老的p元素</p>
??????? </div>
??? </div>
??? <div class="right"></div>
??? <br/>
??? <button>點擊：add傳遞元素標簽</button>
??? <button>點擊：add傳遞html結構</button>
??? <script type="text/javascript">
??? var i = 0 ;
?? ?
??? $("button:first").click(function() {
???????? //把p元素添加到li的合集中
????????? $('li').add('p').css('background', 'red')
?? ?
??? })
??? </script>
??? <script type="text/javascript">
??? $("button:last").click(function() {
???????? //把html結構'<p>新的p元素</p>'
???????? //加入到li的合集中，為了能夠在頁面上顯示
???????? //需要再重新appendTo到指定的節點處
???????? //值得注意：整個結構位置都改變了
???????? i++
???????? $('li').add('<p>第' + i + '個P元素+</p>').appendTo($('.right'))
???????? ?
??? })
??? </script>
</body>
</html>查看全部 -
.wrap()函數可以接受任何字符串或對象，可以傳遞給$()工廠函數來指定一個DOM結構。這種結構可以嵌套了好幾層深，但應該只包含一個核心的元素。每個匹配的元素都會被這種結構包裹。該方法返回原始的元素集，以便之后使用鏈式方法。
查看全部 -
.wrap( function )?：一個回調函數，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象
使用后的效果與直接傳遞參數是一樣，只不過可以把代碼寫在函數體內部，寫法不同而已
查看全部 -
wrap( wrappingElement )：在集合中匹配的每個元素周圍包裹一個HTML結構
查看全部
舉報