jQuery自学笔记（31-40)

最新推荐文章于 2024-07-23 12:35:43 发布

陈同学在努力_

最新推荐文章于 2024-07-23 12:35:43 发布

阅读量129

点赞数

分类专栏： jQuery自学笔记文章标签： jquery js javascript css3 html5

本文链接：https://blog.csdn.net/weixin_43614380/article/details/109769298

版权

jQuery自学笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

31-动态创建元素-html()和$()
32-生成表格案例
33-jQuery中添加节点的几种方式
34-城市选择案例
35-清空节点empty()与移除节点remove()
- 1.清空节点empty()
- 2.移除节点remove()
36-表格删除
37-38 clone()与val()
- 1.clone()
- 2.val()获取或者设置表单元素内容
39-动态数据的添加与删除
40-jQuery操作属性

31-动态创建元素-html()和$()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态创建元素</title>
    <style>
        div {
          width: 400px;
          height: 400px;
          background-color: pink;
        }
      </style>
</head>
<body>
    <input type="button" value="html()" id="btnHtml1">
    <input type="button" value="$()" id="btn1"><br><br>
    <div id="div1">
        <p>p1
            <span> span1</span>
        </p>
    </div>
</body>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>     
<script>
    $(function name(params) {
        //原生js中创建节点：document.write();  innerHTML; document.createElement();

        //jQuery中如何创建节点呢？
        //html();  $();

        //1.html();
        //设置或者获取内容的
        $('#btnHtml1').click(function name(params) {
            // 1.1获取内容：html()方法不给参数 => 获取到元素的所有内容
            // console.log($('#div1').html());
            // <p>p1
            // <span> span1</span>
            // </p>
                
            //1.2 设置内容：html()方法给参数
            //会把原来的内容给覆盖
            //如果设置的内容中包含了标签，是会被解析出来的
            $('#div1').html('我是设置的内容<a href = "https://www.baidu.com">百度一下</a>');
        })

        //2. $();
        //确实能创建元素，但创建的元素只存在于内存中，如果要在页面上显示，就要追加
        $('#btn1').click(function name(params) {
            var $link = $('<a href = "http://news.baidu.com/">我是新闻</a>');
            console.log($link);
            //追加节点
            $('#div1').append($link);
        })
    })
</script>
</html>

32-生成表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成表格</title>
    <style>
    .mask {
    	width:100%;
    	height:1200px;
	    background:gray;
    	position:fixed;
    	top:0;
    	left:0;
    	z-index:100;
    	opacity:0.6;
    	display:none;
    	
}
    </style>
</head>
<body>
    <!--遮罩层-->
    <div class="mask"></div>
    <!-- 添加数据的表单 -->
    <div id ="add">
        <input type="text" id = "in1" placeholder="标题"><br>
        <input type="text" id = "in2" placeholder="地址"><br>
        <input type="text" id = "in3" placeholder="标题">
    </div>
    <input type="button" value="获取数据" id = "getData">
    <input type="button" value="添加数据" id = "addData">

    <table>
        <thead>
            <tr>
                <th>标题</th>
                <th>地址</th>
                <th>说明</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id = "tbData">
            
        </tbody>
    </table>
</body>

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>     
<script>
    $(function name(params) {
        //模拟从后台拿到的数据
        //data数组的每一个元素其实就是一个tr
        var data = [{
            name:"传智播客",
            url:"http://www.itcast.cn",
            type:"IT最强培训机构",
            operate:"delete"
        },{
            name:"黑马程序员",
            url:"http://www.itheima.com",
            type:"大学生IT培训机构",
            operate:"delete"
        },{
            name:"传智前端学院",
            url:"http://web.itcast.cn",
            type:"前端的黄埔军校",
            operate:"delete"
        }];

        //需求：点击获取数据按钮，根据data这个数组里面的数据来给tbody追加tr
        //data这个数组，有多少元素，就生成多少个tr，每一个元素又是一个对象，所以对象有多少个键值对就有多少个td

        //给获取数据按钮设置一个点击事件
        $('#getData').click(function name(params) {
            // 1.html();
            // var list = [];
            // for(var i = 0;i<data.length;i++){
            //     //生成tr
            //     list.push("<tr>");
            //     //生成td
            //     for (const key in data[i]) {
            //         if(i==3){
            //             list.push('<td class = "delete">');
            //             list.push('<a href="#" class = "delete">');
            //             list.push(data[i][key]);
            //             list.push('</a>');
            //             list.push('</>');
            //         }else{
            //             list.push('<td>');
            //             list.push(data[i][key]);
            //             list.push('</td>');
            //         }
                        
            //     }
            //     list.push("</tr>");
            // }
            // //join() 方法用于把数组中的所有元素放入一个字符串。
            // //括号内的参数：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
            // $('#tbData').html(list.join(""));


            // 2.$();
            for(var i = 0; i<data.length;i++){
                var $tr = $("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['url']+"</td><td>"+data[i]['type']+"</td><td><a href = '#' , class='delete'>"+data[i]['operate']+"</a></td></tr>");
                //把创建出来的$tr追加到tbody中去
                $('#tbData').append($tr);
            }

            //这一行不能写在“获取数据”按钮事件外，因为未点击该按钮时,delete未创建，则无法给delete按钮绑定事件
            $('.delete').click(function name(params) {
            $(this).parent().parent().remove();
             })
        })
        $('#addData').click(function name(params) {
            // $('.mask').show();
            var txt1 = $('#in1').val();//标题
            var txt2 = $('#in2').val();//地址
            var txt3 = $('#in3').val();//说明

            //创建出一个tr
            var $trNew = $('<tr>'+ 
                        '<td>'+txt1+'</td>'+
                        '<td>'+txt2+'</td>'+
                        '<td>'+txt3+'</td>'+
                        "</td><td><a href = '#' , class='delete'>"+"delete"+"</a></td>"
                        +'</tr>')

            //把tr添加到tbody中
            $('#tbData').append($trNew);
            // $('.delete').click(function name(params) {
            // // $(this).parent().parent().remove();
            // //或者
            // $($trNew).remove();
            //  })
             //或者p50 使用on委托事件注册
             $('#tbData').on('click','.delete',function name(params) {
                 $(this).parent().parent().remove();
             })
        })
    })
</script>
</html>

33-jQuery中添加节点的几种方式

1.append()

父元素.append(子元素)作为最后一个元素添加

1.1 新建一个li标签，添加到ul1中去

    var $liNew = $("<li>我是新创建的li标签</li>");
    $('#ul1').append($liNew);

1.2 把ul1中已经存在的li标签添加到ul中去，剪切后作为最后一个子元素添加

    var #li3 = $('#li3');
    $('#ul1').append($li3);

1.3 把ul2中已经存在的li标签添加到ul1中去，剪切后作为最后一个子元素添加

    var #li32 = $('#li32');
    $('#ul1').append($li32);

2.prepend()

父元素.prepend(子元素)作为第一个元素添加

2.1新建一个li标签，添加到ul1中去

    var $liNew = $("<li>我是新创建的li标签</li>");
    $('#ul1').prepend($liNew);

3.before()

元素A.before(元素B) 把元素B插入到元素A的前面，作为兄弟元素添加

4.after()

元素A.before(元素B) 把元素B插入到元素A的后面，作为兄弟元素添加

5.appendTo()

子元素.appendTo(父元素) 把子元素作为父元素的最后一个子元素添加

34-城市选择案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市选择</title>
    <style>
        select {
          width: 200px;
          background-color: teal;
          height: 200px;
          font-size: 20px;
        }
        
        .btn-box {
          width: 30px;
          display: inline-block;
          vertical-align: top;
        }
      </style>
</head>

<body>
    <h1>城市选择：</h1>
    <select id="src-city" name="src-city" multiple>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option value="4">广州</option>
        <option value="5">西红柿</option>
    </select>
    <div class="btn-box">
  <!--实体字符-->
        <button id="btn1"> &gt;&gt; </button>
        <button id="btn2"> &lt;&lt; </button>
        <button id="btn3"> &gt;</button>
        <button id="btn4"> &lt; </button>
    </div>
    <select id="tar-city" name="tar-city" multiple>
    </select>
</body>

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>     
<script>
    $(function name(params) {
        // 全部到右边
        $('#btn1').click(function name(params) {
            //找到左边select下拉菜单的所有option项，把这些option项都添加到右边的select下拉菜单中去
            $('#src-city > option').appendTo($('#tar-city'));
        })

        // 全部到左边
        $('#btn2').click(function name(params) {
            //找到右边select下拉菜单的所有option项，把这些option项都添加到左边的select下拉菜单中去
            $('#tar-city > option').appendTo($('#src-city'));
        })

        // 选中的到右边
        $('#btn3').click(function name(params) {
            //找到左边select下拉菜单选中的option项，把这个option项都添加到右边的select下拉菜单中去
            $('#src-city > option:selected').appendTo($('#tar-city'));
        })

        // 选中的到左边
        $('#btn4').click(function name(params) {
            //找到右边select下拉菜单选中的option项，把这个option项都添加到左边的select下拉菜单中去
            $('#tar-city > option:selected').appendTo($('#src-city'));
        })
    })
</script>
</html>

35-清空节点empty()与移除节点remove()

1.清空节点empty()

    //1.清空ul (ul还在)
    $('#ul1').html(""); //不推荐使用，因为如果节点已经绑定了事件的话可能会造成内存泄漏，不安全
    $('#ul1').empty(); //推荐使用

2.移除节点remove()

    //2.移除某个节点
    $('#li3').remove();  //自杀

    //3.移除ul，但是只能获取li3这个标签(ul不在)
    $('#li3').parent().remove();

36-表格删除

该案例已经写到32-生成表格案例中

37-38 clone()与val()

1.clone()

克隆出来的节点只存在内存中，如果在页面上显示，就应该追加到页面上

    $('#clone').click(function(){
        var $cloneDiv = $('#div1').clone();
        //修改克隆节点的id(因为id也会被复制成一样的)
        $cloneDiv.attr('id','div2');//设置id属性为div2
        //把克隆的节点追加到body中
        $('body').append($cloneDiv);
    })

clone()方法参数不管是true还是false，都是会克隆后代节点的
clone()方法参数是true表示会把事件一起克隆，参数是false则不会，不给参数默认是false

2.val()获取或者设置表单元素内容

不给参数就是获取
给参数就是设置

39-动态数据的添加与删除

该案例也已经写到32-生成表格案例中

40-jQuery操作属性

详见.attr()函数

陈同学在努力_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery自学笔记（31-40)

目录31-动态创建元素-html()和$()32-生成表格案例33-jQuery中添加节点的几种方式1.append()2.prepend()3.before()4.after()5.appendTo()34-城市选择案例35-清空节点empty()与移除节点remove()1.清空节点empty()2.移除节点remove()36-表格删除37-38 clone()与val()1.clone()2.val()获取或者设置表单元素内容39-动态数据的添加与删除40-jQuery操作属性31-动态创建元素-
复制链接

扫一扫

专栏目录