• 使用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 = $(“

  • 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());
    });
    
  • 相关阅读:
    iptables dnat不通
    os.system()和os.popen()
    mysql登录提示ERROR 1524 (HY000): Plugin 'unix_socket' is not loaded解决方法
    SpringBoot之web开发
    基于MQ的分布式事务解决方案
    Docker核心技术
    [Java]Object有哪些公用方法?
    zookeeper
    单例模式的几种实现方式及优缺点
    并发编程之Synchronized原理
  • 原文地址:https://www.cnblogs.com/a1111/p/12815890.html
  • Copyright © 2020-2023  润新知