JQUERY 操作

丶灬走出姿态 提交于 2019-12-04 17:38:42

对内容的操作   

  捕获  获得内容

                     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()获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效

   

 

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!