jQuery-文档处理

最新推荐文章于 2024-09-20 20:00:36 发布

赵剑华

最新推荐文章于 2024-09-20 20:00:36 发布

阅读量76

点赞数

本文链接：https://blog.csdn.net/zhaojianhua1997/article/details/104313979

版权

尺寸：

	height  width    参数分别可以是  val   fn；
	设置或者获取元素的宽和高   $(".block").height() // $(".block").width()
	获取出来是没有像素单位的 ；
	设置的值不带px   设置的样式是行内样式；
	$(".block").height(300);$(".block").width(300);

 	innerHeight()
    innerWidth()
 	是不包括边框  包括补白   padding  之内的属性也算
 	$(".block").innerWidth();
    $(".block").innerHeight();
    包含边框  获取的是宽和高度的问题
    outerHeight([options])
    outerWidth([options])
    $(".block").outerWidth());
    $(".block").outerHeight();
    参数    options    设置为true  计算的时候包含边距
    根据合资模型去计算元素整体宽和高
    $(".block").outerHeight(true);
    $(".block").outerWidth(true);

内部插入

	append  追加当前元素的内容之后
    $(".block").append($(".small"));
    fn回调函数问题   参数是index  索引   html  当前元素的html内容
    $(".block").append(function (index, html) {   
        return $(".small");
    });
    appendTo 追加当前元素的内容之后
    区别：两个方法  前后位置颠倒
    $(".small").appendTo($(".block"));
     prepend  追加到当前元素的内容之前
    $(".block").prepend($(".small"));
    prependTo  追加到当前元素的内容之前
    区别：前后位置颠倒
    $(".small").prependTo($(".block"));

jquery里面创建dom元素

    var str="<div class='child2'></div>";
    $(".block").html(function (index,old){
        return old+str;
    });

jquery 创建dom

    var ele=$("<div class='child2'></div>");
    给创建的jquery对象添加类   直接在标签上去书写
    ele.addClass("child2");
    将创建创建的dom 追加到block
    $(".block").append(ele);

外部插入

after 插入元素之后

    $(".child").after($(".small"));
    fn  回调函数  index  索引
    $(".child").after(function (index){
        return "<div class='child2'></div>"
    });

before 插入到元素之前

    $(".child1").before($(".small"));
    fn 回调函数  index 索引
    $(".child1").before(function(index){
        return $(".small"+index)
    });
    insertAfter  追加到元素之后   和after 区别前后位置颠倒
    $(".small0").insertAfter($(".child1"));
    insertBefore 追加到元素之前   和before 区别前后位置颠倒
    $(".small0").insertBefore($(".child1"));

包裹元素

wrap 包裹

    $(".child").wrap(ele);
    $(".child").wrap("<div class='par'></div>");
    fn回调函数  index   索引
    $(".child").wrap(function (index){  
        return "<div class='par'></div>"
    });

unwrap 移除指定元素的父元素

    $(".c").unwrap();
    wrap  一对一进行包含
    $("p").wrap("<div></div>");
    wrapAll  将匹配的元素全部包起来
    $("p").wrapAll("<div></div>");

wrapInner 将元素的内容包裹起来

    $("body").wrapInner("<div></div>");
    fn回调函数  index   索引
    $("body").wrapInner(function (index){
        return "<div></div>";
    });

元素的替换

强div替换为文本框
创建一个文本框
var ipt = $(" < i n p u t t y p e =^{'} t e x t^{'} c l a s s =^{'} p r i c e^{'} / > "); i p t . v a l ($ (".price").html())；
$(".price").replaceWith(ipt);
fn回调函数 index 索引 html 当前元素的html内容
$(".price").replaceWith(function (index, html) {
ipt.val(html);
return ipt;
});

replaceAll 前替换后

    ipt.replaceAll($(".price"));
    $(".price").each(function (){
        var ipt = $("<input type='text' class='price'/>");
        ipt.val($(this).html());
        $(this).replaceWith(ipt)
        ipt.replaceAll($(this));
    });

删除

empty 删除匹配元素所有的子节点

    $("ul").empty();

remove 移除当前的匹配元素

    $("ul>li").remove();
    remove   参数
    $("ul>li").remove(".box");//等价
    $(".box").remove();

detach 删除只是从jquery对象中删除

    $(".box").detach();
    detach  删除元素之后    jquery 对象里面的没有删除   只是界面没有了   数据和事件之类的还在
    这个方法在使用的时候不能直接用匹配元素删除  得按照父元素找子元素的方式删除  这样的话 jquery对象里面的删除元素还在
    $(".box").detach();

复制

clone

	$(".small").appendTo($(".block"));
    $(".small").clone(true).appendTo($(".block"));
    clone  参数   true(深度克隆  克隆dom元素以外  事件 之类)  false(浅克隆  只是克隆了dom元素)