使用jQuery操作DOM元素
一、DOM分类:
1.DOM core
2.Html-DOM
3.CSS-DOM
二、css样式
$(this).css(“font-size”,“25px”);
$(this).css({“font-size”:“30px”,“color”:“white”});
$("#div3").addClass(“div3_style”);
//移除样式
$("#div3").removeClass("div3_style");
//切换样式toggleClass
$("#div3").toggleClass("div3_style");//判断是否有该样式hasClassif($("#div3").hasClass("div3_style")){alert("有");}else{alert("没有");}
三、///html操作
1.html,获取元素内的html内容,包含内部的标签
console.log($("#div3").html());
//给元素赋值
$("#div1").html("这是第一个div");
2.text,获取元素的文本内容console.log($("#div3").text());//使用text给元素赋值(不会解析内部标签,而html会解析内部标签)$("#div1").text("<li>text赋值</li>");
3.获取表单的value值alert($("#inp").val());//给表单赋值$("#inp").val("张三");
四、jQuery中的节点操作
//1.创建节点
var nodes = $(“
- No.6
- ”);
//2.插入节点(内部插入)
//(1)append,给最后插入节点
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3 ul").appen…("#div3 ul"));
//(3)prepend,在元素的内部前面插入节点
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3 ul").prepe…("#div3 ul"));
//(5)外部插入,after,给元素外部的后面插入节点
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3 ul").after…("#div3 ul"));
//(7)外部插入,before,给元素外部的前面插入节点
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3 ul").befor…("#div3 ul"));
//3.删除节点remove
$("#div3 li:eq(1)").remove();
//4.删除节点empty
$("#div3 li:eq(0)").empty();
//5.替换节点replaceWith
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3 li:first")…("#div3 li:first"));
//7.复制节点
var fu = $("#div3 li:first").clone(true);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3 ul").appen…("#inp").attr(“value”));
//2.设置属性
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲inp").attr("val…("#inp").removeAttr(“value”);
六、节点遍历
//1.获取子节点children
var chi = $("#div3").children().children().length;
console.log(chi);
//2.获取下一个节点
var i = $("#div3 li:first").next().text();
alert(i); //输出No.2
//3.获取上一个节点
var p = $("#div3 li:last").prev().text();
alert§; //输出No.4
//4.siblings,获取同辈元素
$("#div3 li:eq(2)").siblings().css(“background”,“red”);
//5.parent,获取父辈元素
$("#div3 li:first").parent().css(“background”,“red”);//6.parents,获取祖先元素 $("#div3 li:first").parents().css("background","red"); //7.遍历节点each $("#div3 ul").each(function(){console.log($(this).text()); });
使用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操作 语法: $("#div1").css("color",&qu ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- 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样式操作. ...
- 【面试必备】javascript操作DOM元素
前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
- jq追加html属性,jQuery 操作 HTML 元素和属性的方法
jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容: text().html() 以及 val()方法 My Test JQuery $( ...
- jQuery操作DOM对象
jQuery操作DOM对象 1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设 ...
最新文章
- 瑞丽噪声与信噪比的关系_演出扩声系统的噪声与接地
- 某同学配置了一台计算机,第六章 计算机硬件系统作业答案.doc
- vue项目中使用JSX
- JBoss Forge NetBeans集成–入门
- 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 5丨至少有5名直接下属的经理【难度中等】
- linux下数据库时间格式,Java编程时间格式与数据库中时间格式转化
- DHCP+VTP(实验讲解+配置)
- 编程之美 set 8 区间重合判断
- 使用Python对图像进行中值滤波
- LinkedList实现类
- struts中获取多选按钮html:checkbox的值
- 如何用WinCC发送报警消息至钉钉
- smc数显压力表设定方法_日本SMC数显压力表中文说明书ISE40A-01-P-ML
- 探究京东商城的数据建模
- 【PHP】openssl_sign(): supplied key param cannot be coerced into a private key
- sencha table
- 【基于贪心的树型动态规划】【NOI2007】追捕盗贼
- 计算机硬件类的相关课程,计算机硬件类课程,hardware course,音标,读音,翻译,英文例句,英语词典...
- The following signatures couldn‘t be verified because the public key is not available问题解决
- 画论20 郭熙《林泉高致集》