第八章 JQuery操作DOM

最新推荐文章于 2024-11-02 23:59:00 发布

转载最新推荐文章于 2024-11-02 23:59:00 发布 · 406 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/12aa/p/11050934.html

文章标签：

#javascript #ViewUI

该博客为转载内容，转载自https://www.cnblogs.com/12aa/p/11050934.html ，涉及JavaScript相关知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.jQuery操作样式

  /* 单个样式 */
  $("li:first").css("color","#009933");
  /* 多个样式 */
  $("li:eq(1)").css({"color":"#FFFF00","background":"#FFCCCC"});
  /* 添加样式，引用style的.xxxxx */
  $("li:eq(2)").addClass("lis");
  /* 判断有没有样式 */
  if($("li:eq(2)").hasClass("lis")){
   /* 删除样式 */
   $("li:eq(2)").removeClass("lis");
  }
  $("input").click(function(){
   /* 样式切换 */
   $("li:last").toggleClass("chx");
  });
二.jQuery操作html
  /*获取标签中的html代码*/
  $("ul").html()
  /*指定标签中的html代码*/
  $("ul").html("<li>大哥，我不做大哥好多年，我依旧这么Diao</li>");

三.jQuery操作text文本
  /*获取标签中的text代码*/
  $("li:first").text();
  /*指定标签中的text文本*/
  $("li:first").text("大哥，我不做大哥好多年，我依旧这么Diao");

四.jQuery操作value属性值
  /*获取标签中的value属性值*/
  $("input").val();
  /*指定标签中的value属性值*/
  $("input").val("王洪涛，呵呵，呵呵");

五.jQuery拼接元素
  $("ul").append("<li>大哥，我不做大哥好多年，我依旧这么Diao</li>");

六.jQuery操作节点
  /* 创建节点 */
  var $element=$("<li style='color:Fuchsia'>大哥</li>");

  /* 父子级后置追加节点 */
  /* $("ul").append($element);
  $element.appendTo($("ul"));
   */

  /* 父子级前置追加节点 */
  /* $("ul").prepend($element);
  $element.prependTo($("ul")); */

  /* 同辈追加节点 */
  /* $("li:eq(2)").after($element); */
  /* $("li:eq(2)").before($element); */
  /* $element.insertBefore($("li:eq(2)")); */

  /* 删除 */
  /* $("li:first").remove(); */
  /* $("li:first").empty(); */
  /* $("li:first").detach(); */

  /* 替换 */
  /* $("li:first").replaceWith($element); */
  /* $element.replaceAll($("li:first")); */



  $("li:first").toggle(function(){
   $(this).css("color","green");
  },function(){
   $(this).css("color","red");
  }

  );
  /* 克隆 */
  var $wht=$("li:first").clone(false);
  $("ul").append($wht);
七.获取属性
  /*设置单个属性*/
  $("li:first").attr("style","color:red");
  /*设置多个属性*/
  $("li:first").attr({"style":"color:red","id":"wht2"});
  /*设置删除属性*/
  $("li:first").removeAttr("style");
八.遍历节点
  /* 子元素 */
  var lis=$("ul").children("li:eq(2)");

  /*同辈元素*/
  alert($("li:first").next().text());
  alert($("li:eq(3)").prev().text());
  alert($("li:eq(3)").prevAll().text())

  $("li:eq(2)").siblings().css("color","blue");
  /*祖先元素*/
  $("li:first").parents().css("background","red")
  /*父级元素*/
  $("li:first").parent().css("background","yellow");