zoukankan      html  css  js  c++  java
  • 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");

  • 相关阅读:
    使用Angular2建立项目
    你不知道的JavaScript-0
    项目从0到1
    登录页跳转时保存用户信息-遇坑记
    robotframework-ride快捷方式打不开
    win10 python3.8 wxpython.whl 安装步骤
    QPS
    xmind 文件 打开后会在当前目录生成 configuration,p2和workspace目录,artifacts.xml文件 解决
    JMeter进行压力测试时查看服务器的资源使用
    JMeter和JMeterPlugin的下载安装
  • 原文地址:https://www.cnblogs.com/wws553/p/11052752.html
Copyright © 2011-2022 走看看