第八章 JQuery操作DOM

一.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");

转载于:https://www.cnblogs.com/12aa/p/11050934.html

第八章 JQuery操作DOM相关推荐

原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery创建元素节点或文本节点或属性节点.jQuery插入节点.jQuery删除节点.jQuery复制节点.jQuery替换节点.jQuery包裹节点.jQuery属性操作.jQuery样式操作. ...
jQuery操作DOM对象
jQuery操作DOM对象 1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设 ...
jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
jQuery 操作 DOM
为什么80%的码农都做不了架构师?>>> 操作 DOM 使用jquery 选择器得到节点的 jquery对象.使用 jquery对象可以操作dom! 修改Text和Html ...
第四章使用jQuery操作DOM元素
一.DOM的分类: 1.DOM core 2.HTML-DOM 3.CSS-DOM 二.css操作语法: $("#div1").css("color",&qu ...
JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】
全部章节 >>>> 本章目录 7.1 DOM 对象和 jQuery 对象 7.1.1 DOM 对象 7.1.2 jQuery 对象 7.1.3 jQuery 对象和 DOM ...
jquery 使用jquery操作Dom
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

第八章 JQuery操作DOM

第八章 JQuery操作DOM相关推荐

最新文章

热门文章