jquery 属性 css样式 文档处理

一、属性

1. 属性

名称	含义
attr(name/pro/key,val/fn)	获取属性时：只能获取第一个元素的一个属性 ；设置属性时：可以给多个元素设置多个属性，且可以设置自定义属性 。若获取属性在标签内不存在返回undefined
removeAttr(name)	可以移除自带的属性 也可以移除自定义属性
pro(name/pro/key,val/fn)	用法和类似attr() ，在获取元素的属性值时，若标签中没有该属性，则返回空
removeProp(name)	移除的是属性值 但属性还在

// 设置多个属性
 $("input:text").attr({
                value: "你好",
                type: "button"
            });

2. 类

名称	含义
addClass(class/fn)	可添加多个类，添加多个类时可进行链式操作，也可用空格隔开
removeClass([class/fn])	可以一次删除多个类，用空格隔开。如果不写参数，表式删除所有的类
toggleClass(class/fn[,sw])	如果有这个类就删除，没有就添加

3. HTML代码/文本/值

名称	含义
html([val/fn])	获取或设置元素的html值，设置时自动解析标签
text([val/fn])	获取或设置元素的文本值，设置时不会自动解析标签
val([val/fn/arr])	获取或设置元素的值

二、CSS

1. CSS样式

名称	含义
css(“color”,“red”)	获取或设置属性，获取时只能获取一个样式，设置时可设置多个样式

// 设置多个样式
 $("button").css({
                color:"blue",
                backgroundColor:"red",
                borderWidth:"10px"
            });

2. 位置

名称	含义
offset([coordinates])	获取或者设置相对于当前视口偏移量，获取的值是对象，设置时自动添加相对定位。
position()	获取的是相对当前父元素的偏移量，获取的值是对象
scrollTop([val])	获取或设置滚动条的距离，可以的值， 网页刷新无效 ， 网页重新打开是有效的
scrollLeft([val])	获取或设置滚动条的距离，可以的值， 网页刷新无效 ， 网页重新打开是有效的

3. 尺寸

名称	含义
height([val/fn])	设置或者获取元素的内容高，获取的值没有像素单位，设置的值不带px，设置的样式诶行内样式
width([val/fn])
innerWidth()	获取或设置元素边框内的宽，不包含边框线，即内容+padding
innerHeight()
outerHeight([options])	获取或设置元素的高度，获取时可设置参数为布尔值（默认值为false），设置为true时，获取的宽度包含外边距，设置为false时，获取的宽度不包含外边距；设置的高度是包括边框线的高度
outerWidth([options]))

三、文档处理

1. 内部插入

名称	含义
$(".block").append(content/fn)	把后面的内容追加到前面元素内容之后
$(".small").appendTo($(".block"))	把前面的内容追加到后面元素内容之后
$(".block").prepend(content/fn)	把后面的内容追加到前面元素内容之前
$(".small").prependTo($(".block"))	把前面的内容追加到后面元素内容之前

jquery里面创建dom元素的方法

        //方法 1：innerHTML+=str   
        var str="<div class='child2'></div>";
        $(".block").html(function (index,old){
            return old+str;
        });
        
        //方法 2：jquery创建dom
        var ele=$("<div class='child2'></div>");
        var ele=$("<div></div>");
        //将创建创建的dom 追加到block
        $(".block").append(ele);

2. 外部插入

名称	含义
$(".block").after(content/fn)	把后面的内容追加到前面元素外面之后
$(".small").insertAfter($(".block"))	把前面的内容追加到后面元素外面之后
$(".block").before(content/fn)	把后面的内容追加到前面元素外面之前
$(".small").insertBefore($(".block"))	把前面的内容追加到后面元素外面之前

3. 包裹

名称	含义
$(".child").wrap(ele)	用后面的元素把前面的元素包裹起来，相当于把后面的元素复制了若干个去包裹前面的每个元素
$(".c").unwrap()	用后面的元素把前面的元素包裹起来，相当于把后面的元素复制了若干个去包裹前面的每个元素
$(".child").wrapAll($(".par"))	用后面的元素把前面的所有元素合在一起包裹成一个包裹，所有元素之间夹杂的其他元素会被挤到包裹元素的下面
$(“body”).wrapInner("< div >< /div >")	用后面的元素把前面元素的里面即内容包裹起来

4. 替换

名称	含义
$(".price").replaceWith(content)	用后面的把前面的元素替换，后面的如果是元素，则替换时按照索引一一替换，后面的元素不够时，前面对应的元素就删除了；后面如果是字符串，则前面所有元素都替换成该字符串
$("input[value=1]").replaceAll($(".price"))	和上面的方法一样，区别是替换的顺序不一样

5. 删除

名称	含义
$(“ul”).empty()	把元素的所有内容清空
$(“li”).remove(".box")	没有参数时，删除前面的所有元素；有参数时，删除前面元素中符合参数条件的
$(“li”).detach(".box")	没有参数时，删除前面的所有元素；有参数时，删除前面元素中符合参数条件的

后两个的区别是什么？

6. 克隆

名称	含义
$(".small").clone(false)	克隆前面的元素，参数是布尔值，false是浅度克隆，只克隆元素；true是深度克隆，事件之类的也被克隆，默认值是false