• jQuery常用属性和方法有哪些?


    属性:

    获得标签:$("#id")
    获得标签内的代码:.html()
    获得标签内的文本:.text()
    修改标签内的代码:.html("内容");
    修改标签内的文本:.html("内容");

    获得标签属性:.attr("属性");
    修改标签属性:attr("属性","属性值");

    添加样式:addClass("样式名");
    动态切换样式:toggleClass("样式名");
    获取样式:css

    添加元素:append("元素");
    移去元素:.remove();
    清空节点: .empty();

    获取第二个li节点: var $li=$("ul li:eq(1)");
    获取第二个li节点的文本内容: var li_txt=$
    方法:
    一:插入节点:
    append() 向每个匹配的元素文本内部的后面追加内容 
            eg:<p>我想说:</p>    代码: $("p").append("<b>你好</b>"); 
            结果为:<p>我想说:<b>你好</b></p>

    appendto() 将所有的匹配的元素追加到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是B追加到A中,而是将A追加到B文本的后面中。
            eg:<p>我想说:</p>    代码: $("<b>你好</b>").appendTo("p");
            结果为:<p>我想说:<b>你好</b></p>

    prepend() 向每个匹配的元素文本的内部前置内容。
            eg:<p>我想说:</p>    代码: $("p").prepend("<b>你好</b>");
            结果为:<p><b>你好</b>我想说:</p>

    prependto() 将所有的匹配的元素前置到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是B前置到A中,而是将A前置到B中
            eg:<p>我想说:</p>    代码: $("<b>你好</b>").prependto("p");
            结果为:<p><b>你好</b>我想说:</p>

    after() 向每个匹配的元素之后插入内容 。 
            eg:<p>我想说:</p>    代码: $("p").after("<b>你好</b>");
            结果为:<p>我想说:<b>你好</b></p>

    insertAfter 将所有的匹配的元素插入到指定的元素后面。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是B插入到A后面,而是将A插入到B后面。
             eg:<p>我想说:</p>    代码: $("<b>你好</b>").after("p");
            结果为:<p>我想说:<b>你好</b></p>
    before() 在每个匹配的元素之前插入内容
             eg:<p>我想说:</p>    代码: $("<b>你好</b>").after("p");
            结果为:<p>我想说:<b>你好</b></p>
    insertBefore():将A标签插入到B标签的前面

    二:删除:
    ①remove 该节点所包含的所有的后代节点将同时被删除 也可以通过参数来选择
    ②empty 清空节点,它能清空元素中的所有后代节点

    三:替换节点:
    ①replaceWith() 作用是将所有匹配的元素都替换成指定的HTML或DOM元素
    ②replaceAll()  

    四:包裹节点:
    ①warp() 作用是是将所有元素进行单独包裹
    ②warpAll() 作用元素的是所有匹配的元素用一个元素来包裹
    ③warpinner() 作用是将每一个的子内容(包括文本节点)用其他结构化的标记包裹起来

    五:设置和获取HTML、文本值
    1、html():
    2、text
    3、val

    六:遍历节点
    1、children(): 取得匹配元素的子元素
    2、next():取得匹配元素后面紧邻的同辈元素
    3、prev():取得匹配元素前面紧邻的同辈元素
    4、siblings():取得匹配元素前后所有的同辈元素
    5、closest():取得最近的匹配元素

    七:css-dom
    css 获取样式的属性

    offset()
    position
    scroll
    scrollLeft

    样式操作:
    1:获取样式和设置样式 attr
    eg:<p class="myClass" title="选择你最喜欢的水果">你最喜欢的水果是?</p>
    获取样式: var p_class=$("p").attr("class");
    设置样式:$("p").attr("class","high");
    2:追加样式 addClass
    <style>
    .high{
    font-weight:bold   粗体字
    color:red          字体颜色
    }
    .another{
    font-weight:italic   斜体字
    color:blue           字体颜色
    }
    </style>

    追加样式: $("input:eq(2)").click(function(){$("p".addClass("another"))})

    ☆在css中有以下规定:
    ①如果给一个元素添加了多个class值,那么就相当于合并了他们的样式
    ②如果不同的class设置了同一样式,则后者覆盖前者
                                       addClass                                      attr
    对同一个网页元素进行操作         <p>test</p>                                 <p>test</p>
    第一次使用                        $<"p">.addClass("high");                   $<"p">.attr("class","high");
    第一次结果                        <p class="high">test</p>                    <p class="high">test</p>   
    再次使用                          $<"p">.addClass("another");                 $<"p">.attr("class","another");
    最终结果                          <p class="high another">test</p>             <p class="another">test</p>

    3:移除样式 removeClass
    <p class="high another">test</p> 
    移除一个:$<"p">.removeClass("high");
    移除二个:$<"p">.removeClass("high").removeClass("another");==$<"p">.removeClass("high another")
    移除全部:$<"p">.removeClass();

    4:切换样式 toggle


    5:判断是否含有摸个样式 hasClass
    可以用来判断元素中是否含有某个class,如果有返回true否则返回false

  • 相关阅读:
    【BZOJ 2124】【CodeVS 1283】等差子序列
    【BZOJ 1036】【ZJOI 2008】树的统计Count
    【BZOJ 1901】【ZJU 2112】Dynamic Rankings
    【BZOJ 3924】【ZJOI 2015】幻想乡战略游戏
    【BZOJ 4103】【THUSC 2015】异或运算
    【BZOJ 4513】【SDOI 2016】储能表
    【HDU 3622】Bomb Game
    【BZOJ 3166】【HEOI 2013】Alo
    【BZOJ 3530】【SDOI 2014】数数
    【BZOJ 4567】【SCOI 2016】背单词
  • 原文地址:https://www.cnblogs.com/xingyou/p/xingyou823.html
Copyright © 2020-2023  润新知