                        課程
                    
                        /前端開發
                        
                            /jQuery
                        
                        /jQuery基礎(二)—DOM篇

為什么.right的背景顏色這么大？代碼中已注釋問題地點

<!DOCTYPE?html>
<html>

<head>
????<meta?http-equiv="Content-type"?content="text/html;?charset=utf-8"?/>
????<title></title>
????<script?src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
????<style>
????.left,
????.right?{
????????width:?250px;
????????height:?130px;
????????background-color:red;//問題地點
????}
????
????.left?div,
????.right?div?{
????????width:?100px;
????????padding:?5px;
????????margin:?5px;
????????float:?left;
????????border:?1px?solid?#ccc;
????????background:?#bbffaa;
????}
????
????.right?div?{
????????background:?yellow;
????}
????p?{
????????border:?1px?solid?red;
????}
????
????a?{
????????border:?1px?solid?blue;
????}
????</style>
</head>


<body>
????<h2>DOM包裹wrapInner()方法</h2>
????<div?class="left">
????????<div?class="aaron1">點擊,通過wrapInner方法給所有P元素增加內部父容器div</div>
????????<div?class="aaron2">點擊,通過wrapInner的回調方法給每個a元素增加內部父容器div</div>
????</div>
????<div?class="right">
????????<p>p元素</p>
????????<p>p元素</p>
????</div>
????<div?class="left">
????????<a>a元素</a>
????????<a>a元素</a>
????</div>


????<script?type="text/javascript">
????$(".aaron1").on('click',?function()?{
????????//給所有p元素，增加內部包裹父容器div
???????$('p').wrapInner('<div></div>');
????})
????</script>
????<script?type="text/javascript">
????$(".aaron2").on('click',?function()?{
????????//wrapInner接受一個回調函數
????????//每一次遍歷this都指向了合集中每一個a元素
????????$('a').wrapInner(function()?{
????????????return?'<div></div>'
????????})
????})
????</script>
</body>

</html>