jQuery操作

 //js节点寻找

    // var a = document.getElementById('ip').parentNode;

    // console.log(a);

    //  var a = document.getElementById('jd').childNodes;

    // console.log(a);

    // var a = document.getElementById('jd').lastChild;

    // console.log(a);

    

    // 事件冒泡

    // document.getElementById('bd').onclick= function(e){

    //     alert('子')

        //阻止父级冒泡

        // e.stopPropagation();

        //只会阻止标签自身默认动作事件,如果是在jq中是阻止冒泡和默认事件

        // return false;

        //取消标签的默认动作

        // e.preventDefault();

    //}

    // document.getElementById('d').onclick=function(){

    //     alert('父级');

    // }

    // jq遍历

    $('.p').parent();//找到父级元素

    $('.p').parents();//可以一直找到最上级的元素

    $('#bl').children();//只能找到他的儿子

    $('#bl').find('a');//可以找到他的孙子

    $('#bl').siblings();//可以找到他的同胞但是不包括自己

    // jQuery hover事件修改样式

    $('ul li').hover(function(){

        // 修改CSS样式 $(this)是鼠标放的当前元素

        $(this).css('color','red')

    },function(){

        $(this).css('color','yellow')

    })

    // jQuery点击事件

    $('#jj').click(function(){

        // $('#tj').html('这是添加的内容')

        // $('#tj').append('这是后添加的内容')

        $('#bd').attr('href','http//:www.w3school.com.')   

    })

    //jq阻止事件冒泡

    $('#bd').click(function(e){

        alert('子')

        // return false;

        e.stopPropagation();

    })

    $('#d').click(function(){

        alert('父级')

    })

    // Class

    // 删除Class名

    $('#aa').removeClass('a');

    // 添加Class名

    $('#aa').addClass('cur');

    // 判断是否有了Class名返回值的布尔类型

    $('#aa').hasClass('cur');

    // 如果有了Class就删除没有就添加

    $('#aa').toggleClass('cur');

    

    // 获取内容的宽高

    $('#aa').height();

    $('#aa').width();

    //获取内容和内边距的宽高

    $('#aa').innerWidth();

    $('#aa').innerHeight();

    //获取内容和内边距和边框的宽高

    $('#aa').outerWidth();

    $('#aa').outerHeight();

    //添加元素

    $('#jd').append('<p class="m">在元素最后位置添加</p>')

    $('#jd').prepend('<b>在元素第一个位置添加</b>')

    $('#jd').after('在被选元素外的最后添加')

    $('#jd').before('在被选元素外的前面添加')

    //$('#jd').remove()//删除被选元素

    //$('#jd').empty();//删除被选的子元素

    // 添加元素后绑定jq事件 body是固定的 on后面第一个是什么事件,然后是新增的类名 用在点击事件添加class后用这个来绑定新添加的元素

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

        alert('绑定')

    })

 

这是点击按钮执行里面的内容

 $('#bt').click(function(){

        $('#m').append('<p class="k">这是添加在后面的段落</p>');

        $('#m').prepend('<p>这是添加在前面的段落</p>')

        $('#m').after('在被选元素外的后面添加')

        $('#m').before('在被选元素的前面添加')

    })

这是给后来新添加的元素设置属性

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

        $('.k').empty();

    })