标签：jQuery 返回 遍历 添加 元素 JS Day17 方法
（本文参考菜鸟教程，感谢菜鸟教程）
一、添加元素
二、删除元素
三、获取并设置 CSS 类
四、css() 方法
五、jQuery 尺寸
六、遍历
七、Ajax
八、其他
一、添加元素
我们将学习用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
案例一：用append 添加多个元素内容
function appendText(){
var txt1 = "<p>文本。</p>";
var txt2 = $("<p></p>").text("文本。");
var txt3 = document.createElement("p");
txt3.innerHTML = "文本。";
$("body").append(txt1 , txt2 ,txt3);
}
多种创建txt的形式
二、删除元素
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
当使用 remove 的时候
$("#div1").remove();
效果图：（直接把div包括里面的东西全部都清空了）
使用empty的时候
$("#div1").empty();
只是把里面的东西搞死了，而外部的div的结构和样式都是还存在的
remove（）可以接受参数，该参数可以是任何 jQuery 选择器的语法。下面就是把class="italic" 的所有 <p> 元素全部删掉了
$("p").remove(".italic");
三、获取并设置 CSS 类
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
①案例一：addClass方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.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>为元素添加 class</button>
<script src="../js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
</body>
</html>
View Code
removeClass方法
其实都是一样的套路的
四、css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
设置 CSS 属性
五、jQuery 尺寸
通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
jQuery 提供多个处理尺寸的重要方法：
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
这几个元素都是可以直接返回值的
其中一个注意点：
六、遍历
①祖先（向上遍历DOM树）
- parent() ： parent() 方法返回被选元素的直接父元素
- parents() ：parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
- 也可以通过对parents添加参数，比如“ul”也就是向上找所有ul标签的祖先
- parentsUntil() ： parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
②后代 （向下遍历DOM树）
- children() ：该方法只会向下一级对 DOM 树进行遍历。
- find() ：一路向下直到最后一个后代。
③同胞（在DOM树种遍历有和这个元素相同父元素的元素）
==也就是进行水平遍历
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
④过滤
缩小搜索元素的范围
三个最基本的过滤方法是：first(), last() 和 eq()
1、first() 方法返回被选元素的首个元素。
2、last() 方法返回被选元素的最后一个元素。
3、eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）
4、
5、not（）方法刚号和filter是相反的
小的案例：
七、Ajax
1、load方法
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
标签：jQuery,返回,遍历,添加,元素,JS,Day17,方法 来源： https://www.cnblogs.com/SCAU-gogocj/p/13246067.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。