使用Jquery操作DOM节点
如有不会，案例还有笔记在（chap3）
dom : 文档对象模型 就是HTML元素
js中如何操作DOM节点
document.write("
我是p标签
"); 缺点:无法在指定的位置生成元素$() 函数的2个用法:
用法1:放入一个字符串(选择器)表示获取元素 例如$("p") $("#abc") $(".del") 用法2:放入一个函数，表示文档就绪函数 例如 $(function(){代码...})
用法3:如下所示
jquery创建节点的方法如下
111
222
333
444
1.创建节点 语法如下: // $("xxxxx"); xxx表示你要创建的dom元素 例如 $("
我是p标签
"); //此时仅仅是创建了节点.理解为是孤儿节点. 需要将其插入到某个节点中. //例如 放入body标签中 方法div标签中等等.
插入方法1:append() 表示插入到指定元素内部的尾端.
语法: $("aa").append("bb") 表示将bb插入到aa内部的尾端
插入方法2:prepend() 表示插入到指定元素内部的首端.
语法: $("aa").prepend("bb") 表示将bb插入到aa内部的首端
创建与插入使用案例
需求如下: 在div的尾端插入一个值为555的p标签 1.创建一个值为555的p标签 // let a = $("
555
"); // //调用方法即可 // $("div").append(a);
需求如下: //在div的首端插入一个值为000的p标签 // //1.创建一个值为000的p标签 // let a = $("
000
"); // //调用方法即可 // $("div").prepend(a);
插入方法3:after() 表示插入到指定元素的后面. 兄弟关系
语法: $("aa").after("bb") 表示将bb插入到aa的后面
需求如下:
//在111的后面插入一个1.5 1.5 1.5 //1.创建一个值为000的p标签 // let a = $("
1.5 1.5 1.5
"); //调用方法即可 // $("p:eq(0)").after(a);
插入方法4:before() 表示插入到指定元素的前面. 兄弟关系
语法: $("aa").before("bb") 表示将bb插入到aa的前面
需求如下: //在333的前面插入一个2.5 2.5 2.5 //1.创建一个值为2.5 2.5 2.5的p标签 // let a = $("
2.5 2.5 2.5
"); //调用方法即可 // $("p:eq(2)").before(a);
上述的方法 可以实现 在任意位置创建新的节点.
删除任意位置的节点
下述的方法 可以实现 删除任意位置的节点:
方法1: remove()
语法如下: $("xx").remove(); 将xx元素彻底删除 不仅删除了值 而且删除了标签
需求如下: 将444的p标签删除 $("p:eq(3)").remove();
方法2: empty() 清空
语法如下: $("xx").empty(); 将xx元素删除值 但是不删除标签
需求如下: 将444的p标签删除 $("p:eq(3)").empty();
克隆节点
语法: $("xxx").clone(); 将xxx元素复制一份
注意事项:上一步仅仅只是复制 此时理解为孤儿节点. 任然需要通过append prepend after before进行粘贴 例如:将111复制一份到444的后面 let a = $("p:eq(0)").clone(); $("p:eq(3)").after(a);
小案例
show和hide方法
$("xx").hide();隐藏XX元素 $("xx").show();显示XX元素 $("xx").toggle();来回切换：显示或隐藏XX元素
addClass（）和removeClass（）方法
jquery对象的特点: 调用任意方法的返回值 依然是它本身
你好
如何获取当前元素
$("xx").index();返回当前元素在兄弟中下标 $("button").click(function(){ // $(this);获取当前的元素 alert( $(this).index() ) });
轮播图简化版案例
each方法
each方法的语法: $("xx").each( function(){ 代码体 } );
遍历xx元素.每遍历一次 就执行一次代码体.
这种写法 较为局限 但是也很重要 $("p").text("你好");
删除上一级的标签（父级）
啊啊啊
精彩文章
您阅读本篇文章共花了：
发表评论