使用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");
//判断是否有该样式hasClass
if($("#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 = $(“
//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());
});
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp
· drools 规则引擎和 solon-flow 哪个好?solon-flow 简明教程