文档操作

方法 例句 描述 性质
after()
$("button").click(function(){
  $("p").after("<p>Hello world!</p>");
});
  • 在匹配的元素之后插入内容
  • 可包含HTML标签
增加
append()
$("button").click(function(){
  $("p").append(" <b>Hello world!</b>");
});
//添加到p标签内,相当于增加儿子
  • 匹配元素向下添加指定HTML元素
  • 向匹配元素集合中的每个元素结尾插入由参数指定的内容。
  • appendTo方法执行任务相同,不同之处在于,内容的位置和选择器
增加
before()
$("button").click(function(){
  $("p").before("<p>Hello world!</p>");
});
  • 在每个匹配的元素之前插入内容。
增加
clone()
$("button").click(function(){
  $("body").append($("p").clone());
});
  • 生成被选元素的副本,包含子节点、文本和属性
  • 横向进行副本创建
增加
detach()
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").detach());
  });
//当点击button事件发生后,先是删除body中的p标签
//然后再body后增加一个原来的p元素。
  • 移除被选元素,包括所有文本和子节点
  • 会保留jQuery对象中的匹配的元素,因而可以在将来再使用这些匹配的元素
  • 会保留所有绑定的事件、附加的事件,这点与remove不同,remove会将节点和事件一并删除。
  • 可用于将元素从一端删除后,在另一端重新添加。
删除
empty()
$(".btn1").click(function(){
  $("p").empty();
});
  • 删除被选元素的所有内容,包括所有文本和子节点
删除
insertAfter()
$(document).ready(function(){
  $("button").click(function(){
    $("h1").insertAfter("p");
  });
//在匹配的元素横向进行添加,就相当于找哥们
  • 对匹配所有元素的横向后进行添加
  • 如果需要添加一个空标签,并且该标签已经存在时,将会把已有标签和内容移走至匹配元素后再进行添加。
添加
prepend()
$(".btn1").click(function(){
  $("p").prepend("<b>Hello world!</b>");
});
  • 向匹配元素集合中的每个元素开头插入由参数指定的内容。
添加
replaceAll()
$(".btn1").click(function(){
   $("p").replaceAll("<b>Hello world!</b>");
});
  • 用匹配的元素替换所有匹配到的元素。
  • replaceWith可以使用函数进行替换。
替换
text()
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").text("Hello world!");
  });
});
  • 替换或增加匹配元素的内容
  • 空元素匹配后,也可进行添加
替换
unwrap()
$("button").click(function(){
  $("p").unwrap();
});
  • 移除并替换指定元素的父元素。
删除 
wrap()
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrap("<div></div>");
  });
});
  • 把匹配的元素用指定的内容或元素包裹起来。
  • 进行逐一包裹
添加 
wrapinner()
$(".btn1").click(function(){
   $("p").wrapInner("<b></b>");
});
//查找p标签,在p标签内加入b标签。
  • 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。
添加 

属性操作

方法 例句 描述 性质
addClass()
$("button").click(function(){
  $("p:first").addClass("intro");
});
  • 向匹配后的元素添加一个或多个类
  • 不会移除已存在的class属性
  • 如果添加多个类,请用空格分隔类名
添加
attr()
$("button").click(function(){
  $("img").attr("width","180");
    //添加一个
  $("img").attr({"a":1,"b":2});
   //添加多个
});
//如果想要获取值,那么只写width即可。
  • 设置或返回匹配元素的属性和值。
添加
hasClass()
$("button").click(function(){
  alert($("p:first").hasClass("intro"));
});
  • 检查匹配的元素是否拥有指定的类。
  • 返回true或false
判断
html()
$(".btn1").click(function(){
  $("p").html();
});
//获取p元素下的内容信息
  • 设置或返回匹配的元素集合中的 HTML 内容。(inner HTML)
  • 当使用该方法设置一个值时,它会覆盖所有匹配元素的内容
查询
removeAttr()
$("button").click(function(){
  $("p").removeAttr("id");
});
  • 从所有匹配的元素中移除指定的属性。
删除
removeClass()
$("button").click(function(){
  $("p").removeAttr("id");
});
  • 从所有匹配的元素中删除全部或者指定的类。
删除
toggleClass()
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("main",switch);
  });
});
//switch参数可以规定只添加或只移除class
  • 添加和删除一体的对属性更改
  • 通过
添加、删除
val()
$("button").click(function(){
  $(":text").val("Hello World");
});
  • 设置或返回文value属性设置的值
  • 大多用于input元素
  • 如果未设置,则返回被选元素的当前值
查询、更改

CSS操作

方法 例句 描述
css()
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color",function(){
    return "red";
    });
  });
//不需要用到函数时,可直接在color后写颜色。
//如果想获取p标签内的颜色属性,就只写color即可。
//如果需要设置多个CSS属性.
//使用css({'color':'white','font-size':'20px'})
  • 设置或返回匹配元素的样式属性。
height()
$(".btn1").click(function(){
  $("p").height(50);
});
  • 设置或返回匹配元素的高度。
offset()
$(".btn1").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});
  • 返回第一个匹配元素相对于文档的位置。
offsetParent()
$("button").click(function(){
  $("p").offsetParent()
      .css("background-color","red");
});
  • 返回最近的向上两级的定位元素
position()
$(".btn1").click(function(){
  x=$("p").position();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});
  • 返回第一个匹配元素相对于父元素的位置。
  • 该方法返回的对象包含两个整形属性top和left,以像素计
  • 此方法只对可见元素有效
scrollLeft()
$(".btn1").click(function(){
  $("div").scrollLeft(100);
});
  • 设置或返回匹配元素的滚动条的水平位置
  • 当滚动条在最左侧时,位置是0
scrollTop()
$(".btn1").click(function(){
  $("div").scrollLeft(100);
});
  • 设置或返回匹配元素的滚动条的垂直位置
  • 如果未设置参数,则返回以像素计的相对滚动条顶部的偏移
  • 该方法对可见元素和不可见元素均有效
  • 获取值时,该方法只返回第一个匹配元素的scroll top offcet 
  • 设置时,该方法设置所有匹配元素的scroll top offset
width()
$(".btn1").click(function(){
  $("p").width(200);
});
  • 设置或返回匹配元素的宽度。
  • 如果不设置参数,则返回以像素的匹配元素的宽度
版权声明:本文为新兵蛋子原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/xinbing/p/17022965.html