• jQuery


    筛选器

    下一个元素:

    $("#id").next()
    $("#id").nextAll()
    $("#id").nextUntil("#i2")

    上一个元素:

    $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")

    父亲元素:

    $("#id").parent()
    $("#id").parents()  // 查找当前元素的所有的父辈元素
    $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。

    儿子和兄弟元素:

    $("#id").children();// 儿子们
    $("#id").siblings();// 兄弟们

    查找

    搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

    $("div").find("p")

    等价于$("div p")

    筛选

    筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

    $("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

    等价于 $("div.c1")

    补充:

    .first() // 获取匹配的第一个元素
    .last() // 获取匹配的最后一个元素
    .not() // 从匹配元素的集合中删除与指定表达式匹配的元素
    .has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
    .eq() // 索引值等于指定值的元素

    示例:左侧菜单

     左侧菜单示例

    操作标签

    样式操作

    样式类

    addClass();// 添加指定的CSS类名。
    removeClass();// 移除指定的CSS类名。
    hasClass();// 判断样式存不存在
    toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。

    示例:开关灯和模态框

    CSS

    css("color","red")//DOM操作:tag.style.color="red"

    示例:

    $("p").css("color", "red"); //将所有p标签的字体设置为红色

    位置:

    offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
    position()// 获取匹配元素相对父元素的偏移
    scrollTop()// 获取匹配元素相对滚动条顶部的偏移
    scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

    .offset()方法允许我们检索一个元素相对于文档(document)的当前位置。

    和 .position()的差别在于: .position()是相对于相对于父级元素的位移。

    示例:

     返回顶部示例

    尺寸:

    height()
    width()
    innerHeight()
    innerWidth()
    outerHeight()
    outerWidth()

    文本操作

    HTML代码:

    html()// 取得第一个匹配元素的html内容
    html(val)// 设置所有匹配元素的html内容

    文本值:

    text()// 取得所有匹配元素的内容
    text(val)// 设置所有匹配元素的内容

    值:

    val()// 取得第一个匹配元素的当前值
    val(val)// 设置所有匹配元素的值
    val([val1, val2])// 设置checkbox、select的值

    示例:

    获取被选中的checkbox或radio的值:

    <label for="c1">女</label>
    <input name="gender" id="c1" type="radio" value="0">
    <label for="c2">男</label>
    <input name="gender" id="c2" type="radio" value="1">

    可以使用:

    $("input[name='gender']:checked").val()
     自定义登录校验示例

    属性操作

    用于ID等或自定义属性:

    attr(attrName)// 返回第一个匹配元素的属性值
    attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
    attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
    removeAttr()// 从每一个匹配的元素中删除一个属性

    用于checkbox和radio

    prop() // 获取属性
    removeProp() // 移除属性

    注意:

    在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr("checked", "checked")。

    <input type="checkbox" value="1">
    <input type="radio" value="2">
    <script>
      $(":checkbox[value='1']").prop("checked", true);
      $(":radio[value='2']").prop("checked", true);
    </script>

    示例:全选、反选、取消

    文档处理

    添加到指定元素内部的后面

    $(A).append(B)// 把B追加到A
    $(A).appendTo(B)// 把A追加到B

    添加到指定元素内部的前面

    $(A).prepend(B)// 把B前置到A
    $(A).prependTo(B)// 把A前置到B

    添加到指定元素外部的后面

    $(A).after(B)// 把B放到A的后面
    $(A).insertAfter(B)// 把A放到B的后面

    添加到指定元素外部的前面

    $(A).before(B)// 把B放到A的前面
    $(A).insertBefore(B)// 把A放到B的前面

    移除和清空元素

    remove()// 从DOM中删除所有匹配的元素。
    empty()// 删除匹配的元素集合中所有的子节点。

    例子:

    点击按钮在表格添加一行数据。

    点击每一行的删除按钮删除当前行数据。

    替换

    replaceWith()
    replaceAll()

    克隆

    clone()// 参数

    克隆示例:

  • 相关阅读:
    P1197 [JSOI2008]星球大战[并查集+图论]
    P1955 [NOI2015]程序自动分析[离散化+并查集]
    取模运算律[简单数学]
    P1462 通往奥格瑞玛的道路[最短路+二分+堆优化]
    P1330 封锁阳光大学[搜索+染色]
    P1168 中位数[堆 优先队列]
    P2661 信息传递[最小环+边带权并查集]
    P1080 【NOIP 2012】 国王游戏[贪心+高精度]
    P2085 最小函数值[优先队列]
    【转】priority_queue的用法
  • 原文地址:https://www.cnblogs.com/seanliang/p/9141618.html
Copyright © 2020-2023  润新知