jQuery--jQuery创建元素、包装集的处理

小咪咪 2022-09-22 04:55 190阅读 0赞

1.jquery创建元素（三种方法）  
多个css样式：$('获取元素').css(\{'属性名':'属性值','属性名':'属性值'\});  
例子：

<body>
    <button id="btn1">添加一</button>
    <button id="btn2">添加二</button>
    <button id="btn3">添加三</button>
    <div id="content"></div>
    <script>
        $(function(){
            //方法一
            $("#btn1").click(function(){
                $("<p>添加标签方法一</p>").appendTo($("#content"));
            });
            //方法二appendTo:向所有匹配的元素追加到指定元素的集合中
            $("#btn2").click(function(){
                $("<p>").html("添加标签方法二").appendTo($("#content"));
            });
            //before在content之前创建p标签
            $("#btn3").click(function(){
                $("#content").before($("<p>")).html("添加标签方法三");
            });
        });
    </script>

2.管理jquery包装集元素

*  过滤

（1）.eq();获取第N个元素；例：$('li').eq(5).css('color',"\#eee");  
（2）.filter();筛选与指定表达式匹配的元素集合；例：$('li').filter('.active').css('font-size','50px');  
（3）.not();删除与指定表达式匹配的元素；例：$("p").not("\#selected")\[0\]  
（4）.map();将取出对象全部执行map后面的函数；例：

$('li').map(function(){
       return $(this).html('H5EDU');
    });

（5）slice(start,end);选中匹配的子集 从第几个开始，到第几个结束；例：$('li').slice(2,5).remove();

*  查找

（1）.find();搜索所有与指定表达式匹配的元素；例：$("p").find("span")或者$('li').find('p').html('hahahahah');  
（2）.children();获取一个元素当中的直接子节点,然后再从所有子集当中进行筛选；例：$("div").children()  
（3）.contents();查找匹配元素内部所有的子元素；例：$("p").contents();  
（4）.closest();获取一个元素符合条件的最近的父元素；例：$('\#u2').closest('li').css('color','blue');  
（10）.next();选中当前元素中所有同级元素的下一个同级节点；例：$('li').next().css('border','2px solid \#ff0');  
（11）.prev();选中当前元素中所有同级元素的上一个同级节点；例：$('li').prev().css('border','2px solid \#ff0');