• 总结5.8 jquery操作


    <script>
        //js寻找节点
        document.getElementById('id').parentNode;//父级节点
        document.getElementById('id').childNodes;//子集节点集
        document.getElementById('id').firstChild;//第一个子节点
        document.getElementById('id').lastChild;//最后一个子节点
        document.getElementById('id').nextSibling;//下一个同级节点
        document.getElementById('id').previousSibling;//上一个同级节点

        document.getElementById('id1').onclick = function () {
            alert('a');
            e.stoppropagation();//不再派发事件,使事件id1触发后分配到其他节点
            return false;//js中只阻止默认行为(如链接),jq还会防止冒泡
            e.preventdefault();//取消默认行为
        }
        document.getElementById('id2').onclick = function () {
            alert('b');
        }//当id1为id2的子元素时,点击id1触发事件后会派发父级id2的事件
        
        $('ul li').hover(function () {
            $(this).css('color','red');//$(this)指当前元素   
        },function () {
            $(this).css('color','green');
        });//jq中有hover事件,第一个function指鼠标移上去触发的事件,第二个指鼠标移走触发的事件

        $('ul li').hasClass('a');//判断是否有'a'class名
        $('ul li').toggleClass();

        $('x').width();//获取宽度(只包含内容)
        $('x').innerWidth();//获取内容和内边距的宽度
        $('x').outerWidth();//获取内容、内边距和边框得宽度
        $('x').height();//获取高度(只包含内容)
        $('x').innerHeight();//获取内容和内边距的高度
        $('x').outerHeight();//获取内容、内边距和边框得高度

        $('y').append('a');//被选中元素中的末端插入'a'
        $('y').prepend('a');//被选中元素中的首端插入'a'
        $('y').after('a');//被选中元素之后插入'a'
        $('y').before('a');//被选中元素之前插入'a'
        $('y').remove();//删除被选中元素及其子元素
        $('y').empty();//删除被选中元素的子元素,保留被选中元素

        $(div).parent();//查找父级元素
        $(div).parents();//查找所有祖先元素
        $(div).children();//查找子集元素
        $(div).find();//查找所有后代元素
        $(div).siblings();//查找同级元素
        $(div).eq();//索引号元素
    </script>
  • 相关阅读:
    HDU-ACM“菜鸟先飞”冬训系列赛——第9场
    HDU3092:Least common multiple(素数筛选+完全背包)
    HDU1452:Happy 2004(积性函数)(因子和)
    HDU-ACM“菜鸟先飞”冬训系列赛——第8场(1004)
    Codeforces Round #395 (Div. 2)
    一些算法技巧整理(添加中)
    poj 1852 Ants
    hdu 1587 Flowers
    hdu 1563 Find your present!
    hdu 1570 AC
  • 原文地址:https://www.cnblogs.com/HighKK/p/12851504.html
Copyright © 2020-2023  润新知