-
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="https://www.imooc.com/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结构
查看全部
举报