第四章使用jQuery操作DOM元素

一、DOM的分类：
1.DOM core
2.HTML-DOM
3.CSS-DOM
二、css操作
语法：
$("#div1").css(“color”,“red”);
$("#div1").css({“color”:“red”,“margin”:“5px”});
//添加样式
$("#div1").addClass(“div1_style”);
//移除样式
$("#div1").removClass(“div1_style”);
三、jQuery操作文本：
1.html():
语法：
获取值：var val_html = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").html(); …("#div1").html(“值”);
2.text():
语法：
获取值：var val_text = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").text(); …("#div1").text(“值”);
3.text和html的区别：
（1）都是操作文本的方法
（2）html可以解析html的标签，text不可以解析。
四、获取表单的值：
语法：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲inp").val(); 赋…("#inp").val(“值”);
五、节点与属性操作：
1.创建节点：
var $new_Node = ("<li>第n个li</li>");2.插入节点：内部插入：（1）append()：向所选元素的后面插入节点（2）appendTo():与append的用法不一样，但是效果一样。eg:("<li>第n个li</li>"); 2.插入节点：内部插入：（1）append()：向所选元素的后面插入节点（2）appendTo():与append的用法不一样，但是效果一样。 eg:("<li>第n个li</li>");2.插入节点：内部插入：（1）append()：向所选元素的后面插入节点（2）appendTo():与append的用法不一样，但是效果一样。eg:(“ul”).append(newNode);(new_Node); (newNode);(new_Node).appendTo(“ul”);
（3）perpend()：向所选择元素的前面插入节点。
（4）perpendTo():与perpend的效果一样，但是用法不一样。
eg:("ul").perpend(("ul").perpend(("ul").perpend(new_Node);
(newNode).perpendTo("ul");外部插入：（1）after():向所选元素的后面插入（2）insertAfter():与after的用法不一样但是效果是一样的。eg:new_Node).perpendTo("ul"); 外部插入：（1）after():向所选元素的后面插入（2）insertAfter():与after的用法不一样但是效果是一样的。 eg:newNode).perpendTo("ul");外部插入：（1）after():向所选元素的后面插入（2）insertAfter():与after的用法不一样但是效果是一样的。eg:(“ul”).after(newNode);(new_Node); (newNode);(new_Node).insertAfter(“ul”);
（3）before():向所选元素的前面插入节点
（4）insertBefore():与before的语法不一样，但是效果一样。
eg:("ul").before(("ul").before(("ul").before(new_Node);
(newNode).insertBefore("ul");3.删除节点：1.使用remove删除，可以直接删除节点。2.使用empty()删除，但是只能清空内容eg:new_Node).insertBefore("ul"); 3.删除节点： 1.使用remove删除，可以直接删除节点。 2.使用empty()删除，但是只能清空内容 eg:newNode).insertBefore("ul");3.删除节点：1.使用remove删除，可以直接删除节点。2.使用empty()删除，但是只能清空内容eg:(“li:eq(0)”).remove();
$(“li:eq(0)”).empty();
4.替换节点：
1.replaceWith():将所选的元素替换成新的元素
2.replaceAll():与replaceWith的效果一样，用法不一样。
eg:
("li:eq(0)").replaceWith(("li:eq(0)").replaceWith(("li:eq(0)").replaceWith(new_Node);
($new_Node).replaceAll(“li:eq(0)”);
六、设置元素的属性和给元素赋值：
1.attr()
语法：
获取值：var im_val = ("img").attr("width");赋值：("img").attr("width"); 赋值：("img").attr("width");赋值：(“img”).attr({width:“500”,height:“500”});
七、遍历子元素：
1.获取紧邻其后的一个同辈元素：next()
eg:("li:eq(0)").next().css("color","red");2.获取紧邻其前的一个同辈元素:prev();eg:("li:eq(0)").next().css("color","red"); 2.获取紧邻其前的一个同辈元素:prev(); eg:("li:eq(0)").next().css("color","red");2.获取紧邻其前的一个同辈元素:prev();eg:(“li:eq(2)”).prev().css(“color”,“red”);
3.获取紧邻其后的所有同辈元素：nextAll();
eg:("li:eq(0)").nextAll().css("color","red");4.获取紧邻其前的所有同辈元素：prevAll()eg:("li:eq(0)").nextAll().css("color","red"); 4.获取紧邻其前的所有同辈元素：prevAll() eg:("li:eq(0)").nextAll().css("color","red");4.获取紧邻其前的所有同辈元素：prevAll()eg:(“li:eq(4)”).prevAll().css(“color”,“red”);
5.获取所有的同辈元素:silbings()
eg:("li").sibling().css("color","red");八、获取前辈元素：1.parent():获取其父亲元素。eg:("li").sibling().css("color","red"); 八、获取前辈元素： 1.parent():获取其父亲元素。 eg:("li").sibling().css("color","red");八、获取前辈元素：1.parent():获取其父亲元素。eg:(“li”).parent().css(“background”,“red”);
2.parent().parent():获取其爷爷的元素
eg:("li").parent().parent().css("background","red");3.parents():获取根元素，htmleg:("li").parent().parent().css("background","red"); 3.parents():获取根元素，html eg:("li").parent().parent().css("background","red");3.parents():获取根元素，htmleg:(“li”).parents().css(“background”,“red”);

第四章使用jQuery操作DOM元素相关推荐

jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
jQuery操作DOM元素案例
直接打开注释即可观察效果,都已经测试通过!!! <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
使用jQuery操作DOM元素
一.DOM分类: 1.DOM core 2.Html-DOM 3.CSS-DOM 二.css样式 $(this).css("font-size","25px") ...
jQuery 学习-DOM篇（四）：jQuery 删除 DOM 元素的方法
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
【面试必备】javascript操作DOM元素
前言时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
第四章：jQuery动画
一.动画显示与隐藏 1. jQuery中隐藏元素的hide方法让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一 ...
jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery创建元素节点或文本节点或属性节点.jQuery插入节点.jQuery删除节点.jQuery复制节点.jQuery替换节点.jQuery包裹节点.jQuery属性操作.jQuery样式操作. ...

第四章使用jQuery操作DOM元素

第四章使用jQuery操作DOM元素相关推荐

最新文章

热门文章