zoukankan      html  css  js  c++  java
  • Jqurey DOM 操作详解

    一、获取

    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() 方法返回不匹配标准的所有元素。

  • 相关阅读:
    wc项目
    随笔之——伪类选择器:nthchild(n) 与 nthoftype(n)的区别!!!
    随笔之——浮动(float)的影响及其清除、、clear与overflowhidden清除float的不同!!!
    随笔之——各大热门网站search 搜索框的写法,浅析!
    一个简单的注册页面
    自我介绍、目标
    position的6个属性的实验和相关分析
    第二次作业
    第三次作业
    第一次作业
  • 原文地址:https://www.cnblogs.com/zyg316/p/5762711.html
Copyright © 2011-2022 走看看