JQUERY 操作

Posted 2020-11-23 xiren88

对内容的操作   

　　捕获  获得内容

                     text() - 设置或返回所选元素的文本内容
　　　　　　html() - 设置或返回所选元素的内容（包括 HTML 标记）
　　　　　　val() - 设置或返回表单字段的值

　　设置  添加新内容

　　　　　　text("新内容") - 设置所选元素的文本内容
　　　　　　html("新内容") - 设置所选元素的内容（包括 HTML 标记）
　　　　　　val("新内容") - 设置表单字段的值

　　　　  添加新内容的同时，通过回调函数，拿到旧的内容和当前元素的下标

对元素的操作    

　　添加元素    添加新的 HTML 内容     append() - 在被选元素的内部结尾插入内容  prepend() - 在被选元素的内部开头插入内容  after() - 在被选元素外部之后插入内容  before() - 在被选元素外部之前插入内容

　　　　　　　　　　　　　　　　　　　　　　$(".cun3").append("<div class =‘shouji‘><img src=‘"+dom+"‘/></div>");

　　删除元素　　remove() - 删除被选元素（及其子元素）     empty() - 从被选元素中删除其子元素

　　　　　　　　比如$("p").empty()和$("p").html("")，都是把<p>abcd</p>中的文本移除，留下 了<p></p>,仍保留其在dom中所占的位置。

　　　　　　但是html("")会造成内存泄漏,empty()会释放内存,感兴趣的朋友可以用html（""）,empty("")分别测试，用chrome的任务管理器检测内存使用。

　　　　　  　而$("p").remove()则是把其从dom中删除,什么都不留，既不会保留其所占的位置。 

属性操作　　

　　获取属性  attr() 方法用于获取属性值。  $("button").click(function(){alert($("#runoob").attr("href"));});　　　　

　　　　　　　　对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

 

　　　　　　　　对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法

　　       添加新属性的同时，通过回调函数，拿到旧的属性和当前元素的下边

　　删除属性   

　　　　 removeAttr()  从所有匹配的元素中移除指定的属性。$("img").removeAttr("src");

class类的操作　

　　addClass()  向匹配的元素添加指定的类名。
　　hasClass()  检查匹配的元素是否拥有指定的类。

　　removeClass()  从所有匹配的元素中删除全部或者指定的类。
　　toggleClass()  从匹配的元素中添加或删除一个类。

　　　　 addClass(“className”)方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；
.               removeClass(“className”)方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；
               .toggleClass(“className”)方法是用来给脂定的元素增加或移除类名（如果元素的类名存在就移除，如果不存在就增加），也就是说用来给指定的元素进行样式切换（如果元素存在样式则去掉，如果不存在则加上样式）。**

 

　　　　　　例子

　　　　　　　　$("selector").toggleClass("className");
                   　　　　　　  等同于
                    　　　　　　 if($("selector").hasClass("className")){
                         　　　　　　$(this).removeClass("className");
                    　　　　　　 } else {
                       　　　　  $(this).addClass("className");
                  　　　　   }
                   　　　  也等同于
                    　　$("selector").hasClass(‘className‘) ? $("selector").removeClass(‘className‘) : $("selector").addClass(‘className‘);

尺寸　　height()设置或返回元素的高度（不包括内边距、边框或外边距）     width()设置或返回元素的宽度（不包括内边距、边框或外边距）

　　　　　　 $("#box").height("500px").width("500px"); 

　　　　innerHeight()获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
　　　　nnerWidth()获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效
　　　　outerHeight([options]) 获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。 options设置为 true 时，计算边距在内。
　　　　outerWidth([options])获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。options设置为 true 时，计算边距在内。

 

css操作

　　设置样式   单个样式 $("p").css("background-color","yellow");    多个样式$("p").css({"background-color":"yellow","font-size":"200%"});

　　offset([coordinates])  获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

　　position()  获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

　　scrollTop([val])获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。val设定垂直滚动条值 设置相对滚动条顶部的偏移

　　scrollLeft([val])获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。val设定水平滚动条值 设置相对滚动条左侧的偏移

　　innerHeight()获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。

　　innerWidth()获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效