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