• JQuery 函数 操作


    .jQuery主函数

    jQuery主函数的参数
    参数 说明
    $(function) 指定DOM就绪后才执行的函数
    $(selector) $(selector,context) 从页面中选择元素
    $(HTMLElement) $(HTMLElement[]) 基于一个HTMLElement对象或一个HTMLElement对象组生成jQuery对象
    $() 选择0个元素
    $(HTML)$(HTML,map) 基于HTML代码片段生成新元素,支持可选的map对象参数,利用它定义新元素的属性

    .选择元素

    (1)获取id:$('#id名')

    (2)获取class:$('.class名')

    (3)获取标签:$('标签名')

    (4)选择器

    jQuery选择器
    选择器 说明
    :animated 选择所有正在处理动画的元素
    :contains(text) 选择包含指定文本的元素
    :eq(n) 选择第n个元素(从0开始计数)
    :even 选择所有的偶数元素(从0开始计数)
    :first 选择第一个匹配的元素
    :gt(n) 选择序号大于n的所有元素(从0开始计数)
    :has(selector) 选择至少包含一个匹配指定选择器的元素的元素
    :last 选择最后一个匹配的元素
    :lt(n) 选择序号小于n的所有元素(从0开始计数)
    :not(selector) 排除至少包含一个匹配指定选择器的元素的元素
    :odd 选择所有奇数元素(从0开始计数)
    :text 选择所有的输入文本框元素

    一、获取

    1、获取内容----.text()  .html()   .value()

    • text() - 设置或返回所选元素的文本内容                         格式:$(选择器).text();
    • html() - 设置或返回所选元素的内容(包括 HTML 标记)    格式:$(选择器).html();
    • val() - 设置或返回表单字段的值                                   格式:$(选择器).val()

    2、获取属性----------attr()

        格式:$("选择器").attr("属性名")

     

    二、设置

    1、设置内容

        .text()         格式:$("选择器").text("要设置的内容")

        .html()         格式:$("选择器").html("要设置的内容")

        .val()         格式:$("选择器").val("要设置的内容")

    2、设置属性

       (1) .attr()            格式:$("选择器").attr("属性名","属性值")

       (2)attr() 方法也允许您同时设置多个属性。$("button").click(function() {$("选择器).attr({"属性名" : "属性值","属性名" : "属性值"})})

        (3)attr()方法也允许回调函数,$("选择器").attr("属性名",function(){回调函数})

    三、添加

    • append() - 在被选元素的结尾插入内容--------内部添加
    • prepend() - 在被选元素的开头插入内容--------内部添加
    • after() - 在被选元素之后插入内容--------------外部添加
    • before() - 在被选元素之前插入内容-------------外部添加

    格式:括号内部添加的是字符串

    四、删除

    • remove() - 删除被选元素(及其子元素)
    • empty() - 从被选元素中删除子元素

        格式:$("选择器").empty()

        格式:$("选择器").remove()

                过滤删除 $("选择器").remove("子选择器")

    五、CSS类

    • addClass() - 向被选元素添加一个或多个类
    • removeClass() - 从被选元素删除一个或多个类
    • toggleClass() - 对被选元素进行添加/删除类的切换操作
    • css() - 设置或返回样式属性

       格式:前三个括号内部放的是Class的名字

              css("样式名","样式值"),可以添加多个样式css({"样式名":"样式值","样式名":"样式值",........})

    六、尺寸

    jQuery 提供多个处理尺寸的重要方法:

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

    width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

    height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

    innerWidth() 方法返回元素的宽度(包括内边距)。

    innerHeight() 方法返回元素的高度(包括内边距)。

    outerWidth() 方法返回元素的宽度(包括内边距和边框)。

    outerHeight() 方法返回元素的高度(包括内边距和边框)。

    outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。

    outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。

     七、JQUERY 遍历

    jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

    jQuery 提供了多种遍历 DOM 的方法。

    遍历方法中最大的种类是树遍历(tree-traversal)。

    1、祖先

    祖先是父、祖父或曾祖父等等。

    通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先

    • parent()--------parent() 方法返回被选元素的直接父元素。
    • parents()------parents() 方法返回被选元素的所有祖先元素,它是一个集合
    • parentsUntil()----------parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素,也是一个集合

    2、后代

    后代是子、孙、曾孙等等。

    • children()---------children() 方法返回被选元素的所有直接子元素。可以进行过滤选择.children("p.1")返回class名为1的p元素
    • find()-------------find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。find("选择器")

    3、同胞

    同胞拥有相同的父元素。

    • siblings()--------------siblings() 方法返回被选元素的所有同胞元素。
    • next()-----------------next() 方法返回被选元素的下一个同胞元素。
    • nextAll()--------------nextAll() 方法返回被选元素的所有跟随的同胞元素。
    • nextUntil()------------nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
    • prev()----------------返回被选元素的上一个同胞元素
    • prevAll()--------------返回被选元素的所有前面的同胞元素。
    • prevUntil()------------返回介于两个给定参数之间的所有前面的同胞元素

    4、元素过滤

    三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。

    其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

    first() 方法返回被选元素的首个元素。

    last() 方法返回被选元素的最后一个元素。

    eq() 方法返回被选元素中带有指定索引号的元素。

    filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

    not() 方法返回不匹配标准的所有元素。

  • 相关阅读:
    LeetCode44——用搜索的思路去理解动态规划算法
    在vscode中配置LeetCode插件,从此愉快地刷题
    分布式专题——详解Google levelDB底层原理
    高等数学——求解不定积分经典换元法
    动态规划入门——详解完全背包与多重背包问题
    详解聚类算法Kmeans的两大优化——mini-batch和Kmeans++
    Python专题——详解enumerate和zip
    LeetCode42题,单调栈、构造法、two pointers,这道Hard题的解法这么多?
    零基础学Python--------第11章 使用Python操作数据库
    零基础学Python--------第10章 文件及目录操作
  • 原文地址:https://www.cnblogs.com/a454966933/p/5760561.html
Copyright © 2020-2023  润新知