1. 程式人生 > >jQuery DOM元素的操作總結二

jQuery DOM元素的操作總結二

在頁面中操作DOM元素

修改元素樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    .box {
        width: 100px;
        height
: 100px; } .red { background-color: red; } .b10 { border: 10px solid #000; } .m10 { margin: 10px; } .p10 { padding: 10px; } .hide { display: none; }
</style> </head> <body> <div class
="box" id="demo">
div</div> <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> <
script
src="jquery-1.12.4.js">
</script> <script> $(function() { var element = $('#demo'); element.addClass('red'); //向匹配的元素新增指定的類名 element.removeClass('b10 m10 p10'); //從匹配的元素中刪除指定的類名 element.addClass(function (index, className) { console.log(index); console.log(className); return 'red'; }); element.removeClass(function (index, className) { console.log(index); console.log(className); return 'red'; }); if (element.hasClass('hide')) { //存在執行removeClass,反之執行addClass element.removeClass('hide'); } else { element.addClass('hide'); } element.toggleClass('hide'); //匹配到制定的元素就移除,反之就新增 $('li').each(function(index) { $(this).toggleClass('red', index % 3 === 0); }); element.css('width', 200); //修改css的樣式 element.css({ 'background-color': 'red', height: 200, border: '10px solid #000', marginTop: 100, mArGinLeft: 100, width: '+=200' }); element.css('height', function(index, value) { console.log(value); return parseInt(value, 10) + 50; }); console.log(element.width()); //內容的寬 console.log(element.height()); console.log(element.innerWidth()); //內容+內邊距 console.log(element.innerHeight()); console.log(element.outerWidth()); //內容+內邊距+邊框 console.log(element.outerHeight()); console.log(element.outerWidth(true)); //內容+內邊距+邊框+外邊距 console.log(element.outerHeight(true)); console.log(element.offset()); //返回距離文件的距離 console.log(element.position()); //返回距離最近的父元素的距離,沒有返回距離文件的距離 console.log(demo.scrollTop()); //獲取距離滾動條頂部的距離 console.log(demo.scrollLeft()); //獲取距離滾動條左側的距離 demo.scrollTop(300); //設定滾動條的距離 demo.scrollLeft(100); var elements = $('li'); console.log(elements.html()); //返回html中的內容 console.log(elements.text()); //返回匹配元素的內容 console.log(elements.html('<strong>123</strong>')); //設定html中的內容 console.log(elements.text('<strong>123</strong>')); //設定匹配元素的內容 }); </script> </body> </html>

移動和插入元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <h2>title</h2>
    <ul>
        <li class="item1">新聞標題-1</li>
        <li class="item2">新聞標題-2</li>
        <li class="item3">新聞標題-3</li>
        <li class="item4">新聞標題-4</li>
        <li class="item5">新聞標題-5</li>
        <li class="item6">新聞標題-6</li>
        <li class="item7">新聞標題-7</li>
        <li class="item8">新聞標題-8</li>
        <li class="item9">新聞標題-9</li>
    </ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
    var element = $('ul');

    element.append('<li>append</li>') //在ul中的最後面插入
    element.prepend('<li>prepend</li>') //在ul中的最前面插入
    element.after('<li>after</li>') //在ul的後面插入
    element.before('<li>before</li>') //在ul的前面插入    

	$('h2').appendTo(element); //將所選元素插入到指定元素的後面
});
</script>
</body>
</html>

包裹元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veritatis.</p>
    <div class="item"></div>
    <a href="#">link1</a>
    <a href="#">link2</a>
    <a href="#">link3</a>
    <a href="#">link4</a>
    <a href="#">link5</a>
    <a href="#">link6</a>
    <a href="#">link7</a>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
    var element = $('p');

    element.wrap($('.item')); //將item複製,包裹住p

    $('a').wrap('<p></p>'); //每個a外面包裹一個p
    $('a').wrapAll('<p></p>'); //所有的a被一個p包裹

    element.wrapInner('<div class="box"></div>'); //p包裹住新增的元素
    element.unwrap(); //開啟包裹
});
</script>
</body>
</html>

移除元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    p {
        font-size: 12px;
    }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veritatis.</p>
    <div class="item"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
    var element = $('p');

    element.on('click', function () {
        $(this).css('fontSize', '+=5')
    }).data('data', 'demo')
	
	element.remove(); //移除所有匹配元素(事件和資料刪除)
    element.detach(); //從DOM中移除(事件和數不刪除)
    element.empty(); //刪除匹配元素集合中的所有子節點(移出元素內容)
});
</script>
</body>
</html>

複製和替換元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <h2>title</h2>
    <div class="item">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <ul>
        <li class="item1">新聞標題-1</li>
        <li class="item2">新聞標題-2</li>
        <li class="item3">新聞標題-3</li>
        <li class="item4">新聞標題-4</li>
        <li class="item5">新聞標題-5</li>
        <li class="item6">新聞標題-6</li>
        <li class="item7">新聞標題-7</li>
        <li class="item8">新聞標題-8</li>
        <li class="item9">新聞標題-9</li>
    </ul>
<script src="/jquery-1.12.4.js"></script>
<script>
$(function() {
    var element = $('ul');
    $('h2').clone().appendTo(element) //建立匹配的元素集合的副本
    $('h2').replaceWith('<p>hello</p>');  //替換匹配到的元素
    $('<p>hello</p>').replaceAll($('li')); //替換所有的li
});
</script>
</body>
</html>

處理標段元素的值

<!DOCTYPE html>
<html lang="en">
<head