HTML之jQuery自学笔记（六）

最新推荐文章于 2021-07-04 21:33:24 发布

小源丶同学

最新推荐文章于 2021-07-04 21:33:24 发布

阅读量168

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_38611556/article/details/79586683

版权

前端开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

添加新的HTML内容

有以下四个方法：

append()-在被选元素的结尾插入内容

prepend()-在被选元素的开头插入内容

after()-在被选元素之后插入内容

before()-在被选元素之前插入内容

那么这几个方法有什么不同呢？在结尾和之后插入内容又有什么不同。

append和prepend是在元素标签内插入内容，而after和before是在元素标签外插入内容

语法：

$(selector).append("something");
$(selector).append("something1","something2",...,"somethingn");//可以添加多个内容。

同理，prepend、after、before依然可用。

删除内容/元素

说到删除，我们一般都会想到remove()方法，除此之外，empty()也可以用于删除内容。

二者不同之处在于：remove删除被选元素及其子元素，empty方法删除被选元素的子元素。

remove()函数可以接受一个参数，允许您对被删除元素进行过滤

$("p").remove(selector);
//删除选择器selector中的p元素

获取并设置CSS类

通过jQuery，我们可以对CSS进行操作，jQuery有很多进行CSS操作的方法，我学习了下面这些：

addClass()-向被选元素添加一个或多个类

removeClass()-从被选元素删除一个或多个类

toggleClass()-对被选元素进行添加/删除类的切换操作

css()-在这个系列的第一个中学过，设置或返回样式属性

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button>向元素添加类</button>

</body>
</html>

与之前的使用方法类似，前面括号中填入标签名或选择器，后面括号中填的是类名。

功能如其名，只可以操控类选择器定义的CSS样式，即.selector{}这样的设置，如果是#selector{}，将不会起作用

其他的函数使用方法同上。

CSS方法

CSS方法可以返回属性值，也可以改变属性。

在之前我们举了一个改变属性的例子：

$(selector).css("background-color","blue");

而想要返回属性的值，只需要写属性名，如下：

$(selector).css("属性名");

css还可以设置多个属性值：

$("p").css({"background-color":"yellow","font-size":"200%"});

和前面的attr改变元素属性有异曲同工之妙

获取和设置尺寸

关于尺寸，有下面几种方法：

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

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

innerWidth()返回元素的宽度（包括内边距）

innerHeight()返回元素的高度（包括内边距）

outerWidth()返回元素的宽度（包括内边距和边框）

outerHeight()返回元素的高度（包括内边距和边框）

outerWidth(true)返回元素的宽度（包括内边距、边框和外边距）

outerHeight(true)返回元素的高度（包括内边距、边框和外边距）

width和height有参数，就可以指定元素的宽度和高度。

小源丶同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML之jQuery自学笔记（六）

添加新的HTML内容有以下四个方法：append()-在被选元素的结尾插入内容prepend()-在被选元素的开头插入内容after()-在被选元素之后插入内容before()-在被选元素之前插入内容那么这几个方法有什么不同呢？在结尾和之后插入内容又有什么不同。append和prepend是在元素标签内插入内容，而after和before是在元素标签外插入内容语法：$(selector).appe...
复制链接

扫一扫