慕移动8825332的代码

慕移动8825332

男更多信息

127h 学习时长

5452 经验

6 积分

1 关注

0 粉丝

课程 \ jQuery基础(二)—DOM篇

jQuery基础(二)—DOM篇

代码 27 问答 0

按时间按章节

4-1 DOM节点删除之empty()的基本用法

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

    <style>

    div {

        background: #bbffaa;

        width: 300px;

    }

    </style>

</head>

<body>

    <h2>通过empty移除元素</h2>

    <div id="test">

        <p>p元素1</p>

        <p>p元素2</p>

    </div>

    <button>点击通过jQuery的empty移除元素</button>

    <script type="text/javascript">

    $("button").on('click', function() {

        //通过empty移除了当前div元素下的所有p元素

        //但是本身id=test的div元素没有被删除

        $("#test").empty()

    })

    </script>

</body>

</html>

2021-08-22 查看完整代码

3-4 DOM外部插入insertAfter()与insertBefore()

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

    <style>

    .test1 {

        background: #bbffaa;

    }

    .test2 {

        background: yellow;

    }

    </style>

</head>

<body>

    <h2>通过insertBefore与insertAfter添加元素</h2>

    <button id="bt1">点击通过jQuery的insertBefore添加元素</button>

    <button id="bt2">点击通过jQuery的insertAfter添加元素</button>

    <div class="aaron">

        <p class="test1">测试insertBefore,不支持多参数</p>

    </div>

    <div class="aaron">

        <p class="test2">测试insertAfter,不支持多参数</p>

    </div>

    <script type="text/javascript">

    $("#bt1").on('click', function() {

        //在test1元素前后插入集合中每个匹配的元素

        //不支持多参数

        $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))

    })

    </script>

    <script type="text/javascript">

    $("#bt2").on('click', function() {

        //在test2元素前后插入集合中每个匹配的元素

        //不支持多参数

        $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))

    })

    </script>

</body>

</html>

2021-08-22 查看完整代码

3-3 DOM内部插入prepend()与prependTo()

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

    <style>

    .aaron1{

        border: 1px solid red;

    }

    .aaron1 p {

        color: red;

    }

    .aaron2{

        border: 1px solid blue;

    }

    .aaron2 p {

        color: blue;

    }

    </style>

</head>

<body>

    <h2>通过prepend与prependTo添加元素</h2>

    <button id="bt1">点击通过jQuery的prepend添加元素</button>

    <button id="bt2">点击通过jQuery的prependTo添加元素</button>

    <div class="aaron1">

        <p>测试prepend</p>

    </div>

    <div class="aaron2">

        <p>测试prependTo</p>

    </div>

    <script type="text/javascript">

    $("#bt1").on('click', function() {

        //找到class="aaron1"的div节点

        //然后通过prepend在内部的首位置添加一个新的p节点

        $('.aaron1')

            .prepend('<p>prepend增加的p元素</p>')

    })

    </script>

    <script type="text/javascript">

    $("#bt2").on('click', function() {

        //找到class="aaron2"的div节点

        //然后通过prependTo内部的首位置添加一个新的p节点

        $('<p>prependTo增加的p元素</p>')

            .prependTo($('.aaron2'))

    })

    </script>

</body>

</html>

2021-08-22 查看完整代码

3-2 DOM外部插入after()与before()

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

    <style>

    .aaron{

        border: 1px solid red;

    }

    </style>

</head>

<body>

    <h2>通过before与after添加元素</h2>

    <button id="bt1">点击通过jQuery的before添加元素</button>

    <button id="bt2">点击通过jQuery的after添加元素</button>

    <div class="aaron">

        <p class="test1">测试before</p>

    </div>

    <div class="aaron">

        <p class="test2">测试after</p>

    </div>

    <script type="text/javascript">

    $("#bt1").on('click', function() {

        //在匹配test1元素集合中的每个元素前面插入p元素

        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')

    })

    </script>

    <script type="text/javascript">

    $("#bt2").on('click', function() {

        //在匹配test1元素集合中的每个元素后面插入p元素

        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')



    })

    </script>

</body>

2021-08-22 查看完整代码

3-1 DOM内部插入append()与appendTo()

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

    <style>

    .content {

        width: 300px;

    }

    .append{

        background-color: blue;

    }

    .appendTo{

        background-color: red;

    }

    </style>

</head>

<body>

    <h2>通过append与appendTo添加元素</h2>

    <button id="bt1">点击通过jQuery的append添加元素</button>

    <button id="bt2">点击通过jQuery的appendTo添加元素</button>

    <div class="content"></div>

    <script type="text/javascript">

        $("#bt1").on('click', function() {

    		//.append(), 内容在方法的后面，

    		//参数是将要插入的内容。

    		$(".content").append('<div class="append">通过append方法添加的元素</div>')

    	})

    </script>

    <script type="text/javascript">

    	$("#bt2").on('click', function() {

    		//.appendTo()刚好相反，内容在方法前面，

    		//无论是一个选择器表达式 或创建作为标记上的标记

    		//它都将被插入到目标容器的末尾。

    		$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))

    	})

    </script>

</body>

</html>

2021-08-22 查看完整代码

2-2 jQuery节点创建与属性的处理

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

    <style>

    .left,

    .right {

        width: 300px;

        height: 120px;

    }

    .left div,

    .right div {

        width: 100px;

        height: 90px;

        padding: 5px;

        margin: 5px;

        float: left;

        border: 1px solid #ccc;

    }

    .left div {

        background: #bbffaa;

    }

    .right div {

        background: yellow;

    }

    </style>

</head>

<body>

    <h2>动态创建元素节点</h2>

    <button>点击通过jQuery动态创建元素节点</button>

    <script type="text/javascript">

    var $body = $('body');

    $body.on('click', function() {

        //通过jQuery生成div元素节点

        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

        $body.append(div)

    })

    // 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)

    </script>

</body>

</html>

2021-08-22 查看完整代码

2-1 DOM创建节点及节点属性

<!DOCTYPE html>

<html>



<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

    .left,

    .right {

        width: 300px;

        height: 120px;

    }

    

    .left div,

    .right div {

        width: 100px;

        height: 90px;

        padding: 5px;

        margin: 5px;

        float: left;

        border: 1px solid #ccc;

    }

    

    .left div {

        background: #bbffaa;

    }

    

    .right div {

        background: yellow;

    }

    </style>

</head>



<body>

    <h2>动态创建元素节点</h2>

    <div class="left">

        <div class="aaron">点击body区域会动态创建元素节点</div>

    </div>

    <script type="text/javascript">

        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)









    </script>

</body>



</html>

2021-08-19 查看完整代码

热搜

最近搜索清空

慕移动8825332

jQuery基础(二)—DOM篇