(本文参考菜鸟教程,感谢菜鸟教程)
一、添加元素
二、删除元素
三、获取并设置 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>
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() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法: