使用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());
    });
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/325787.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

静态代理

1、接口 package AOP.proxy;/*** Created by Administrator on 2019/6/11.*/ public interface PersonDao {public void savePerson(); }2、目标实现类 package AOP.proxy;/*** Created by Administrator on 2019/6/11.*/ public class PersonDaoImpl implements PersonDao {…

选择大公司还是小公司

转载自 选择大公司还是小公司 本文转载自公众号 stormzhang&#xff0c;文中的“我”是原文作者。 前一段时间&#xff0c;我一知识星球的球友问我这么一个问题&#xff0c;说他是某 985 应届生&#xff0c;拿到了 BAT 一家互联网大公司的 offer&#xff0c;但同时他还拿到了…

未来的C#之只读引用与结构体

C中提供了const特性&#xff0c;使用该特性定义的参数&#xff0c;其所引用的参数或对象将不会被调用函数修改&#xff08;当然const还提供了更多的特性&#xff0c;参见“Const正确性”&#xff09;。在新的建议中&#xff0c;C#也将提供类似的特性。 只读ref参数 在C#中&am…

C++实现字符串的拼接

#include #include using namespace std; int main(){ //字符创的拼接 string a “rtmp://192.168.0.128:1935/live/Test”; string b “.flv”; a.append(b); cout<<a<<endl; string str; str.assign(a); //直接赋值 str.assign(str, 4, str.npos); //赋值给子…

表单验证

一、表单选择器&#xff1a; 用于选取某些特定的表单元素 二、常用的表单选择器&#xff1a; 1.:input,选取所有的textarea,button,input,select元素 eg:(&quot;:input&quot;).css(&quot;border&quot;,&quot;1pxsolidred&quot;);2.text选取所有的单行文…

React中BrowserRouter与HashRouter的区别

BrowserRouter与HashRouter的区别 1.底层原理不一样&#xff1a;BrowserRouter使用的是H5的history API&#xff0c;不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。2.path表现形式不一样BrowserRouter的路径中没有#,例如&#xff1a;localhost:3000/demo/testHashRoute…

漫画:什么是优先队列

转载自 漫画&#xff1a;什么是优先队列 在之前的漫画中&#xff0c;我们介绍了二叉堆和堆排序。没看过的小伙伴可以看一看前文&#xff1a; 漫画&#xff1a;什么是二叉堆&#xff1f;&#xff08;修正版&#xff09; 漫画&#xff1a;什么是堆排序&#xff1f; 这一次&a…

安全——《微服务设计》读书笔记

身份认证和授权 1.单点登录&#xff08;SSO&#xff09; 当主体试图访问一个资源&#xff0c;他会被定向到一个身份提供者那里进行身份验证&#xff0c;身份提供者验明正向后会发消息给服务提供者&#xff0c;让服务提供者来决定是否允许它访问资源。 SAML和OpenID Connect/OAu…

抽象和封装

一、软件出现的目的是为了&#xff1a; 1.用计算机语言描述现实世界。 2.用计算机解决现实世界中的问题。 二、面向对象&#xff1a; 1.与人类的思维习惯一致 2.代码可重用性高&#xff0c;可靠性高。 三、从现实世界中抽象出类&#xff1a; 1.发现类 2.发现类的属性 3.发现类的…

支付对账系统怎么设计

转载自 支付对账系统怎么设计 支付对账系统是整个支付清结算体系中具体基础性意义的一个环节&#xff0c;是确保支付平台与各类第三方支付渠道数据一致性的关键系统&#xff0c;是商户资金结算、资金划拨、资金报表等逻辑准确运行的重要前提。 支付对账涉及账单下载处理、核心…

十二个 ASP.NET Core 例子

前言 在今天的博客中&#xff0c;我将介绍十几个可以在 ASP.NET Core 应用程序中使用的简单示例。从最简单的东西开始&#xff0c;比如 Options, 中间件&#xff0c;数据库&#xff0c;甚至 Nginx 或者 Docker。 首先确定你已经执行过了 dotnet restore , 然后运行 dotnet ru…

Opencv FFmpeg Ubuntu下编译问题

FFmpeg转码错误Cannot load libcuda.so.1 https://blog.csdn.net/yzhang6_10/article/details/81349532 srs2.0 安装启动 https://my.oschina.net/fengjihu/blog/413710 SRS-HLS服务的部署 https://blog.csdn.net/dengjoe/article/details/52698423 ubuntu编译ffmpeg并且demo测…

40 道基础Dubbo 面试题及答案

转载自 40 道 Dubbo 面试题及答案 想往高处走&#xff0c;怎么能不懂 Dubbo&#xff1f; Dubbo是国内最出名的分布式服务框架&#xff0c;也是 Java 程序员必备的必会的框架之一。Dubbo 更是中高级面试过程中经常会问的技术&#xff0c;无论你是否用过&#xff0c;你都必须…

康威定律和系统设计——《微服务设计》读书笔记

康威定律 任何组织在设计一套系统时&#xff0c;所交付的设计方案在结构上都与该组织的沟通结构保持一致。 ——梅尔.康威 如何理解这句话在软件工程上的含义&#xff1f;埃里克.S.雷蒙德说&#xff1a;如果你有四个小组开发一个编译器&#xff0c;那你会得到一个四步编译器。…

Ubuntu下C++代码调用可执行文件。

例如&#xff1a;已经存在一个编译好的c可执行文件&#xff1a; 简单代码&#xff08;第一个可执行文件&#xff09; vim hello.cpp #include <iostream> using namespace std; int main(){cout<<"Ubuntu调用C可执行文件成功"<<endl;return 0; }编…

Eclipse 4.9 正式发布,支持 Java 11

转载自 Eclipse 4.9 正式发布&#xff0c;支持 Java 11 来看看 Eclipse 4.9 带来了哪些新特性&#xff01; 1、外观 新增类似大纲视图的”Minimap” 间主题/暗黑主题&#xff0c;启用方法&#xff1a; Window > Show View > Other&#xff0c;然后在 Show View 对话框…

Ubuntu C++ Thread Sleep

#include #include <unistd.h> using namespace std; int main() { cout << “nitrate”; cout << flush; usleep(1000000); cout << “firtilizers”; return 0; } usleep函数能把线程挂起一段时间&#xff0c; 单位是微秒&#xff08;千分之一毫秒…