element.append(‘内容’); 把内容放入匹配元素内部最后面，类似原生appendChild（父元素调用） 参数：子元素 参数类型：jQuery对象、原生对象、html标签字符串
element.appendTo(‘内容’); 子元素调用，参数是父元素
element.prepend(‘内容’); 把内容放入匹配元素内部最前面
element.prependTo(‘内容’); 子元素调用，参数是父元素
element.after(‘内容’); 把内容放入目标元素后面
element.before(‘内容’); 把内容放入目标元素前面
<body> <ul> <li>原先的li</li> </ul> <script> $(function () { // 创建元素 var li = $('<li>添加的li</li>'); // 内部添加 // 内部添加元素，生成之后，它们是父子关系 $('ul').append(li); $('ul').prepend(li); // 外部添加 // 外部添加元素，生成之后，它们是兄弟关系 $('ul').after(li); $('ul').before(li); }) </script> </body>创建元素 $(’<li></li>’); 动态的创建一个<li>
删除元素
element.remove(); 删除匹配的元素(本身) element.empty(); 删除匹配的元素集合中所有的子节点 element.html(''); 清空匹配的元素内容 empty()和html('')作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容1.参数只写属性名,则是返回属性值 $(this),css(“color”);
2.参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号 $(this).css(“color”, “red”);
3.参数可以是对象形式,方便设置多组样式。属性名和属性值用置号隔开，属性可以不用加引号, $(this,css( {“color”: “white”, “font size”: " 20px"});
注意：如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
<script> //操作样式之css方法 $( function() { console.1og($("div").css( "width")); //$("div").css("width", "300px"); //当属性值为数值时可以不带单位且可以省略引号; 但是属性名一定得加引号 //$("div").css("width", 300); //可以是对象形式 $("div").css({ width: 400, height: 400, background: "red" }) }); </script>设置类名样式方法 注意：操作类里面的参数不要加点。 1、添加类 $(“div”).addClass(“active”);
2、移除类 $(“div”).removeClass(“active”);
<body> <div class="demo active"></div> <div class="demo"></div> <div class="demo"></div> <script src="../resource/js/jquery.min.js"></script> <script> $('.demo').click(function(){ $('.demo').removeClass('active'); $(this).addClass('active'); }) </script> </body>3、切换类 $(“div”).toggleClass(“active”);
<script> $(function(){ //1、添加类 //$("div").addClass("active"); //2、移除类 // $("div").removeClass("active"); //3、切换类 $("div").click(function(){ $(this).toggleClass("active"); }); }) </script>类操作与className区别 原生JS中className会覆盖元素原先里面的类名。 jQuery里面类操作只是对指定类进行操作,不影响原先的类名。
<script> var one = document.querySelector(".one"); // one.className = "two" ; // $(".one").addClass("tow");//这个addClass相当于追加类名 不影响以前的类名 $(".one").removeClass("two") </script>所谓元素固有属性就是元素本身自带的属性,比如<a>元素里面的href , 比如<input>元素里面的type
当该方法用于返回属性值时，则返回第一个匹配元素的值。 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
1.获取属性语法 $(“选择器”).prop(“属性名”)；
2.设置属性语法 $(“选择器”).prop(“属性名”, “属性值”)； $(“选择器”).prop({“属性名”: “属性值”, “属性名”: “属性值”})； $(“选择器”).prop(“属性名”,function(index,currentvalue){})；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素操作</title> </head> <body> <input type="checkbox" id="ck" />全选 <br /><br /> <input type="checkbox" class="ck" /> <input type="checkbox" class="ck" /> <input type="checkbox" class="ck" /> <input type="checkbox" class="ck" /> <input type="checkbox" class="ck" /> <script type="text/javascript" src="jquery.min.js" ></script> <script> //添加事件的方法： $("#ck").click(function(){ //找到自身的选种状态 //$(this)筛选本身，自身 $(".ck").prop("checked",$(this).prop("checked")); //找到所有的$(".ck"),设置属性：.prop("checked",属性既是上面的自身状态)！ }) $(".ck").click(function(){ //所有按钮被选中你的时候，全选按钮才被选中 if($(".ck").length === $(".ck:checked").length){ $("#ck").prop("checked",true); }else { $("#ck").prop("checked",false); } }); </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../resource/css/bootstrap.min.css"> <style> .wrap { width: 500px; height: 300px; margin: 50px auto; } th { text-align: center; } </style> </head> <body> <div class="wrap"> <table class="table table-striped table-bordered table-hover text-center"> <thead> <tr class="success"> <th><input type="checkbox" id="all_check"></th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> </thead> <tbody id="t_body"> <tr> <td><input type="checkbox" class="inp"></td> <td>55</td> <td>66</td> <td>61</td> </tr> <tr> <td><input type="checkbox" class="inp"></td> <td>68</td> <td>23</td> <td>58</td> </tr> <tr> <td><input type="checkbox" class="inp"></td> <td>35</td> <td>35</td> <td>88</td> </tr> <tr> <td><input type="checkbox" class="inp"></td> <td>36</td> <td>58</td> <td>21</td> </tr> </tbody> </table> </div> <script src="../resource/js/jquery.min.js"></script> <script> $(function(){ // 需求1：当点击全选按钮的时候，下面的四个按钮也被选中 $("#all_check").click(function(){ $(".inp").prop("checked",$(this).prop("checked")); }); //需求2：当下面按钮有一个没被选中，上面的全选按钮也取消选中状态 $(".inp").click(function(){ if($(".inp").length === $(".inp:checked").length){ $("#all_check").prop("checked",true); }else { $("#all_check").prop("checked",false); } }); }); </script> </body> </html>1.获取属性语法 $(“选择器”).attr(“属性名”)；// 类似原生getAttribute() 2.设置属性语法 $(“选择器”).attr(“属性名”, “属性值”)；// 类似原生setAttribute() $(“选择器”).attr({“属性名”: “属性值”, “属性名”: “属性值”})； $(“选择器”).attr(“属性名”,function(index,currentvalue){})； 注：该方法也可以获取H5自定义属性
<input id="chke1" type="checkbox" />记住密码 <input id="chke2" type="checkbox" checked="checked" />记住密码 $("#chke1").prop("checked");// false $("#chke2").prop("checked");// true $("#chke1").attr("checked"); //undefined $("#chke2").attr("checked"); //"checked" <body> <img src="../resource/images/10.jpg" alt="Pulpit Rock" width="284" height="213"> <button class="btn1">图像宽度减少50 px</button> <script src="../resource/js/jquery.min.js"></script> <script> // 初始化. $(function(){ // button按钮事件. $(".btn1").click(function(){ /* 使用attr函数设置指定属性的值. 其中: n表示选择器选中DOM的下标位. v表示指定属性当前的值. */ $("img").attr("width",function(n,v){ return v-50; }); }); }); </script> </body>注意： property 是 DOM 中的属性，是 JavaScript 里的对象； attribute 是 HTML 标签上的特性（属性），它的值只能够是字符串；
数据缓存data() data()：方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。 1.附加数据语法 data(“name”, “value”) ; //向被选元素附加数据 2.获取数据语法 date(“name”); //向被选元素获取数据
html()：普通元素内容 (相当于原生inner HTML) html() //获取元素的内容 html(“内容”) // 设置元素的内容
text()：普通元素文本内容 (相当与原生 innerText) text() //获取元素的文本内容 text(“文本内容”) // 设置元素的文本内容
<script> //jQuery获取文本内容 console.log($("div").html()); //<sapn>我是内容</span> console.log($("div").text()); //我是内容 //设置内容 $("div").html("<span>我是内容</span>"); //我是内容 $("div").text("<span>我是内容</span>"); //<span>我是内容</span> //JS获取文本内容 var dv = document.getElementById("box"); //获取文本内容 var dv = document.getElementById("box").innerHTML; //我是内容 var dv = document.getElementById("box").innerText; //<sapn>我是内容</span> console.log(dv); //设置内容 var dv = document.getElementById("box").innerHTML = "<span>我是内容</span>"; //我是内容 var dv = document.getElementById("box").innerText = "<span>我是内容</span>"; //<span>我是内容</span> </script>val()：表单的值 (相当于原生value)
//获取表单内容 console.log($("input").val()); //修改表单内容 $("input").val("aaa");操作节点常用方法 children()：父找子 find() ：父找后代 parent()：子找父 parents()：子找父辈 siblings()：找兄弟 next()、prev()、nextAll()和prevAll()方法
操作DOM的时候不是在操作字符串，而是在操作一个有体系、有关系、有树状结构的东西。
children() 作用：本属性选中某一个元素的所有直接儿子元素。 语法：$ (‘selector’).children()；
$ ("#box").children().css( “background-color”,“red” );参数：可选-参数是选择器,表示既是这个元素的子元素，又满足参数选择器的元素; $("#box").children(".teshu").css( “background-color”,“red” );
find() 作用：由于children()只能查找子元素，如果是孙子元素是找不到的，所以jQuery提供了find()“寻找"的方法。 语法：$ (‘selector’).find()；
$ (”#box").find().css( “background-color”,“red” );参数：同样的find()里面也可以加选择器。
parent() 作用：表示查找当前节点的直属父节点 语法：$ (‘selector’).parent()；
$ ("#box").parent().css( “background-color”,“red” );解释：把 id=box 的标签的父级元素背景改成红色；
parents() 作用：表示查找当前节点的所有祖先节点，直到html节点为止。 语法：$ (‘selector’).parents()；
$ ("#box").parents().css( “background-color”,“red” );解释：把 id=box 的标签的所有祖先节点背景改成红色；
siblings() 作用：访问当前节点的所有兄弟节点（除本身之外); 例子： $(this).addClass(‘selected’).siblings().removeClass(“selected”);
解释：可以通过addClass()和removeClass()来进行排他操作，排他操作的意思就是当前节点的class可能其他地方也用到，就可以通过增加减少class来选中当前节点的兄弟元素（除本身之）；
next()、prev()、nextAll()和prevAll()方法 语法： next() 后一个亲兄弟 prev() 前一个亲兄弟 nextAll() 后所有亲兄弟 prevAll() 前所有亲兄弟
例子：$(‘selector’).next().css(“background-color”,“red”);
