jQuery中不同元素的作用

2021-10-08 15:15:28 浏览数 (1)

  • 删除元素 remove() - 删除被选元素(及其子元素)
代码语言:javascript复制
$("#div1").remove();

empty() - 从被选元素中删除子元素

  • 获取并设置 CSS 类 addClass() - 向被选元素添加一个或多个类
代码语言:javascript复制
$("button").click(function(){
  $("#div1").addClass("important blue");
});

removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性

代码语言:javascript复制
$("p").css("background-color");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
  • 尺寸 width()- 设置或返回元素的宽度(不包括内边距、边框或外边距)。 height()- 设置或返回元素的高度(不包括内边距、边框或外边距)。
代码语言:javascript复制
$("button").click(function(){
  var txt="";
  txt ="Width: "   $("#div1").width()   "</br>";
  txt ="Height: "   $("#div1").height();
  $("#div1").html(txt);
});

innerWidth()- 返回元素的宽度(包括内边距)。 innerHeight()- 返回元素的高度(包括内边距)。 outerWidth() outerHeight()

jQuery 遍历

jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

  • 向上遍历 DOM 树 parent() - 返回被选元素的直接父元素。
代码语言:javascript复制
$(document).ready(function(){
  $("span").parent();
});

parents()- 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。也可以使用可选参数来过滤对祖先元素的搜索。

代码语言:javascript复制
$(document).ready(function(){
  $("span").parents("ul");
});

parentsUntil()- 返回介于两个给定元素之间的所有祖先元素。

  • 向下遍历 DOM 树 children()- 返回被选元素的所有直接子元素。 find()- 返回被选元素的后代元素,一路向下直到最后一个后代。

noConflict() 方法

jQuery 使用 符号作为jQuery的简写。如果其他JavaScript框架也使用

符号作为简写怎么办? noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。当然,您仍然可以通过全名替代简写的方式来使用 jQuery:

代码语言:javascript复制
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行!");
  });
});

0 人点赞