添加标签:  $(‘.c1‘).html(‘百度‘); 但是这个属于替换内容,将标签内原来的内容全部替换掉.

js
    var a = document.createElement(‘a‘);
    
jquery:
    $(‘‘,{
            text:‘这还是个链接‘,
            href:‘http://www.baidu.com‘,
            class:‘link‘,
            id:‘baidu‘,
            name:‘baidu‘
    })

1 标签内部的后面插入内容 append
    html代码:
        

            
xx

        
    方式1:
        1. var a = document.createElement(‘a‘); 创建标签
        2. a.href = ‘http://www.jd.com‘;  添加属性
        3. a.innerText = ‘京东‘; 添加文本
        $(‘.c1‘).append(a);
    方式2: 常用
        $(‘.c1‘).append(‘百度‘);
2 标签内部的上面插入内容 prepend
    $(‘.c1‘).prepend(‘百度‘);
    $(‘.c1‘).prepend(‘
亚洲
‘);

3 标签外部的下面插入内容 after
    $(‘.c1‘).after(‘
兄弟
‘);
4 标签外部的上面插入内容 before
    $(‘.c1‘).before(‘
兄弟
‘);

简单示例:
    var s = $(‘
‘,{‘class‘:‘c2‘,‘text‘:‘彭于晏‘});
    $(‘.c1‘).after(s);

 
empty清空标签

方式1:$(‘.c1‘).empty();
方式2:$(‘.c1‘).html(‘‘); .text(‘‘)

 
remove删除标签

$(‘.c1‘).remove();

 
字符占位符${变量名}

模板字符串，也叫做多行字符串
var username = ‘bob‘;
var aStr = `my name is ${username}`;  -- f‘{name}xxx‘;
结果：
"my name is bob"

 
attr属性操作

原生js属性操作
获取属性对应的值：dEle.getAttribute(‘placeholder‘);  
添加属性或修改属性 : dEle.setAttribute(‘xx‘,‘oo‘);
删除属性：dEle.removeAttribute(‘xx‘);

jquery属性操作 
attr方法
添加或修改属性：
    单个属性：$(‘#username‘).attr(‘xx‘,‘oo‘);
    多个属性：$(‘#username‘).attr({‘xx1‘:‘oo1‘,‘xx2‘:‘oo2‘});  记住这个就行了
查看属性
    $(‘#username‘).attr(‘xx‘);
删除属性：
    $(‘#username‘).removeAttr(‘placeholder‘);

这些属性操作针对的是自定义属性和标签自带属性，都可以通过attr来进行操作，
但是有些特殊属性，通过attr来进行操作的时候，会导致操作失效，selected checked disabled enabled

 
prop属性操作

selected checked disabled enabled
设置属性
    $(‘#d1‘).prop(‘checked‘,true);    选中
    $(‘#d1‘).prop(‘checked‘,false);   取消选中
查看属性
    $(‘#d1‘).prop(‘checked‘); true表示选中了,false表示未选中

逻辑运算符

and  &&
or   ||
not  !

示例：
true && false;
true || false;
!true;

克隆

clone  克隆标签
clone(true)  克隆标签，包含事件
示例
$(‘#d1‘).clone()
$(‘#d1‘).clone(true)

 
事件的两种绑定方式

方式1：
$(‘.btn‘).click(function () {
        var btn = $(this).clone(true);
        $(this).after(btn);
    })

方式2： on关键字进行绑定，第一个参数为事件名称，第二个参数是函数，事件要做的事情
    $(‘.btn‘).on(‘click‘,function () {
        var btn = $(this).clone(true);
        $(this).after(btn);
    })

 
事件冒泡

html代码
    

        

    
css代码
       .c1{
            border: 1px solid red;
            height: 100px;
        }
        .c2{
            border: 1px solid green;
            height: 50px;
            width: 50px;
        }

jquery代码
    $(‘.c1‘).click(function () {
        alert(‘父级标签c1‘);
    });
    $(‘.c2‘).click(function () {
        alert(‘儿子标签c2‘);
        return false; // 阻止后续事件发生
      
    });

        $(‘.c2‘).click(function (e) {
        alert(‘这是子标签‘);
        // return false;  常用
        return e.stopPropagation();
    });

 
事件委托

// 事件委托
    $(‘tbody‘).on(‘click‘,‘.delete‘,function () {
        // $(this) 还是你点击的那个按钮标签
        $(this).parent().parent().remove(); // tr
        
    });





    


‘.c1‘).on(‘click‘,‘.btn‘,function(){
        var new_btn = ``;
        $(this).after(new_btn);
    })

html代码:

    


css代码:
        .c1{
            background-color: red;
            height: 200px;
            width: 200px;
        }
        .c2{
            background-color: green;
        }

    // focus获取光标时触发的事件
    $(‘#username‘).focus(function () {
        $(this).css({‘background-color‘:‘yellow‘});
        $(‘.c1‘).addClass(‘c2‘);

    });
    // blur失去光标时触发的事件
    $(‘#username‘).blur(function () {
        $(this).css({‘background-color‘:‘white‘});
        $(‘.c1‘).removeClass(‘c2‘);

    });

示例



-color: red;
            height: 200px;
            width: 200px;
        }