zoukankan      html  css  js  c++  java
  • 好记心不如烂笔头之JQuery学习,第三章

    第三章中主要讲了几个对DOM进行操作的方法。

    归纳如下:

      属性的获取和设置:

    //属性的获取
    $("li").attr("title"); 
    //属性的设置
    $("li").attr("title","test");
    //批量属性的设置
    $("li").attr({"title":"test","id":"test2"......});

    删除属性:

    $("p").removeAttr("title");

    创建节点:

      这个很好玩,完全就是直接写html代码就好

    $("<b title = "xxx">xxx</b>")

    插入节点:

      这个就臭又长了~而且很好玩,他找到几个插几个找一个标签p,找到100个他就插100个,

    直接在p的内部插入,插到最后面。

    $("p").append($("<b>xxx</b>"));

    将$txt插到p1内部,注意语法,是前插后

    var $txt = $("<b>World</b>");
       $txt.appendTo("#p1");

    prepend()查到元素内部前面

    $("p").prepend($("<b>xxx</b>"));

    prependTo()前面的元素插到后面元素内部前面

    after()插到指定元素之后(同级)

    insertAfter()前插后

    before()插到指定元素之前(同级)

    insertBefore()前插后

    删除节点:

    这个简单,找到节点,一个remove()

    $li = $(ul li:eq(0)).remove();

    但是他会返回一个删除掉的子节点哦。

    删除子节点

    empty()

    $(ul li:eq(0)).empty

    注意,其中的文字也算子节点哦

    复制节点

    $(ul li:eq(0)).clone()
    //其中如果clone(true)的话可以连里面的事件一起复制

    替换节点:

    $("p").replaceWith("<b>xxx</b>");
    //或者
    $("<b>xxx</b>").replaceAll("p")

    包裹节点:

    将已有的节点用其他标签包裹起来:如:<b>xx</b>包裹一个p:<p><b>xxx</b></p>

    $("b").wrap("<p></p>");

    但是这个只能包裹单个如果相同的标签有一堆,他会一个个包裹起来

    所以有了:wrapAll()

    $("strong").wrap("<b></b>");

    多个的就被一个包裹起来了。

    样式操作:

    除了传统的属性设定指望,还有有addClass(),追加样式

    找到元素,使用addClass("样式名");即可在原有样式后空格再来一个样式

    移除样式removeClass("样式名");

    获取html内容:类似innerHTML

    $("#p1").html()

    获取text内容:类似innerText

    $("p").text();

    获取value值,在选择之类的地方很好用哦

    $("single").val();//获取值
    $("single").val("1");//指定值

    遍历DOM:

    .children()方法,遍历指定元素下子节点

    next()下一个同级节点

    prev();上一个同级节点

    siblings();获取所有同级元素

    css操作:

    获取节点,然后进行css设定:

    $("P").css("color":"red","backgroundColor":"blue")

     

  • 相关阅读:
    A1051 Pop Sequence (25 分)
    A1060 Are They Equal (25分)
    A1063 Set Similarity (25分)
    A1037 Magic Coupon (25分)
    Mybatis获取插入记录的自增长ID
    压力测试工具ab的使用
    spring注解
    《spring技术内幕》读书笔记(1)——什么是POJO模式
    用HttpSessionListener统计在线用户或做账号在线人数管理
    (转)注释驱动的 Spring cache 缓存介绍
  • 原文地址:https://www.cnblogs.com/UliiAn/p/3304349.html
Copyright © 2011-2022 走看看