jQuery节点操作-白红宇

jQuery节点操作

阅读量：5927 次

发布时间：2019-06-19

本文共 2811 字，大约阅读时间需要 9 分钟。

1.元素节点操作

（1）创建节点

（2）插入节点

append（）和appendTo（）：在现存元素的内部，从后面插入元素

prepend（）和prependTo（）：在现存元素内部，从前面插入元素

after（）和insertAfter()：在现存元素外部，从后面插入元素

before（）和insertBefore（）：在现存元素的外部，从前面插入元素

$(function(){

/通过HTML的字符串的方式添加节点性能最高，只写a页面就只有a/

/$('.div1').html($('.div1').html()+'<a href="#">123</a>')/

/*新建一个带有属性的a标签，并在后面添加*/    $a = $('123');    /*父元素内的后面放入子元素*/    /*$('.div1').append($a);*/    $a.appendTo($('.div1'));    /*新建立一个空标签*/    $a001 = $('');    $('.div1').append($a001);    /*父元素的前面放入子元素*/    $p = $('123
');    $('.div1').prepend($p);    /*在元素外部的后面插入，before前面*/    $d = $('
     
      466
     
');    $('.div1').after($d);})

（3）删除节点

$(function(){

/把P标签放到h2前面/

$('#no2').insertBefore($('#title'));

/把span标签放进p标签里面/

$('#no3').appendTo($('#no2'));

/删除标签/

$('#title').remove();

})

例子：TO do list

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>To do list</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$(function(){    var $txt = $('#txt1');    var $btn = $('#btn1');    var $ul = $('#list');    var $del = $('.del');    $btn.click(function(){        var $val = $txt.val();        if($val==''){            alert('请输入内容');            /*返回等待点击*/            return;        }        var $li = $(''+$val+'↑↓删除
');        $ul.append($li);        /*添加后清空输入框*/        $txt.val('');    })    $ul.delegate('a','click',function(){        /*prop: 获取属性值*/        $key = $(this).prop('class');        switch($key){            case 'del':                $(this).parent().remove();                break            case 'up':                if($(this).parent().prev().length==0){                    alert('已经是第一个');                    return;                }                /*选择器prev()同辈前一个元素*/                $(this).parent().insertBefore($(this).parent().prev());                break            case 'down':                /*next()同辈后一个元素*/                $(this).parent().insertAfter($(this).parent().next());                break        }    })})

<style type="text/css">

.list_con{    width: 500px;    height: 500px;    margin: 50px 300px 0;}.list_con .iptxt{    width: 400px;    height: 20px;}.list{    list-style: none;    position: relative;    padding: 0;}.list li{    height: 40px;    margin-top: 5px;    border-bottom: 1px solid #AAA7A7;    line-height: 40px;}.list a{    float: right;    text-decoration: none;    margin-left: 40px;}

</head>

<body>


        
     To Do List
    
         
         
             
                  学习HTML            
                   ↑            ↓            删除        
        
                  学习CSS            ↑            ↓            删除        
        
                  学习JavaScript            ↑            ↓            删除