#记录# Day10-jQuery的一些应用

Day10-jQuery的一些应用

---

• 1.使用jquery修改div元素的背景色(随意颜色)

<div id="div" style="height: 300px;width: 300px;">
</div>
<script>
    $('#div').css('background','red')
</script>

• 2.使用jquery修改div的子元素p的内容为"我是子元素"

<div id="div" style="height: 300px;width: 300px;">
    <p></p>
</div>
<script>
    $("#div p").html('我是子元素')
</script>

• 3.使用jquery修改第二个p元素的背景色为"orange"

<div id="div" style="height: 300px;width: 300px;">
    <p>111</p>
    <p>111</p>
</div>
<script>
    $('p:nth-child(2)').css('background','red')
</script>

• 4.删除列表元素中最后一个li元素

<div id="div" style="height: 300px;width: 300px;">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
<script>
    $('ul li:last').remove();
</script>

• 5.点击当前的p标签,弹出相对应的元素下标

    <p>点击出现下标</p>
    <p>点击出现下标</p>
    <p>点击出现下标</p>
    <p>点击出现下标</p>
    <p>点击出现下标</p>
<script>
    $('p').click(function () {
        alert($(this).index())
    })
</script>

• 6.利用jquery中的animate()方法.点击id为btn的按钮,实现类名为box的元素,向左移动500px

<div class="box" style="height: 300px;width: 300px;background: yellow;margin-left: 500px;position:relative"></div>
<button id="btn">点击左移</button>
<script>
    $('#btn').click(function () {
        $('.box').animate({left:'-500px'})
    })
</script>