Erlo

day30-JQuery03

2022-12-04 16:30:43 发布   389 浏览  
页面报错/反馈
收藏 点赞

JQuery03

4.jQuery选择器03

4.4表单选择器

image-20221203164139823

应用实例




    
    表单选择器应用实例
    
    














5.练习

5.1练习1

需求:网页中所有的p元素添加onclick事件,当点击文字时,弹窗显示段落的内容

image-20221203170234761



    
    p-onclick
    
    


我是段落1

我是段落2

我是段落3

image-20221203174324501 image-20221203174331420

5.2练习2

需求:使一个特定的表格隔行变色

image-20221203170356545



    
    表格隔行变色
    
    
    


第一个表格

1 1
2 2
3 3
4 4
5 5
6 6

第二个表格

1 1
2 2
3 3
4 4
5 5
6 6
image-20221203175522826

6.jQuery的DOM操作

6.1查找节点,修改属性

jQuery 设置内容和属性 (w3school.com.cn)

查找属性节点:找到所需要的元素之后,可以调用jQuery对象的attr()方法来获取它的各种属性值。

  • 返回属性值:返回被选元素的属性值。
$(selector).attr(attribute)
参数 描述
attribute 规定要获取其值的属性。
  • 设置属性/值:设置被选元素的属性和值。
$(selector).attr(attribute,value)
参数 描述
attribute 规定属性的名称。
value 规定属性的值。

应用实例




    
    操作节点的属性
    
    




6.2创建节点

  • 创建节点介绍

    1. 创建节点:使用jQuery的工厂函数$(html标签);会根据传入的html标记字符串创建一个jQuery对象并返回
    2. 动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;
    3. 当创建单个元素时,需注意闭合标签和使用标准的XHTML格式。例如创建一个元素,可以使用$("

      ")
      或者$("

      ")
      。但不能使用$("

      ")

      或者$("")
    4. 创建文本节点就是在创建元素节点时,直接把文本内容写出来。创建属性节点也是在创建元素节点时一起创建
  • 第1组方法(内部插入法)

    1. append(content):向每个匹配的元素的内部的结尾处追加内容

      举例: A.append(B)

      (1)A,B都需要是jquery对象(2)表示把B对象插入到A对象内部的结尾处(3)结果是B对象成为了A对象最后一个子元素/子节点,如

    2. appendTo(content):向每个匹配的元素追加到指定的元素中的内部结尾处

      举例:A.appendTo(B)

      (1)A,B都需要是jquery对象(2)表示把A对象插入到B对象内部的结尾处(3)结果是A对象成为了B对象的最后一个子元素/子节点,如

    3. prepend(content):向每个匹配的元素的内部的开始处插入内容

      举例:A.prepend(B)

      (1)A,B都需要是jquery对象(2)表示把B对象插入到A对象内部的开始处(3)结果是B对象成为了A对象的第一个子元素/子节点,如

    4. prependTo(content):向每个匹配的元素插入到指定的元素内部的

      举例:A.prependTo(B)

      (1)A,B都需要是jquery对象(2)表示把A对象插入到B对象内部的开始处(3)结果是A对象成为了B对象的第一个子元素/子节点,如

    5. 内部插入法是在元素内插入内容(该内容变成该元素的子元素或节点)

  • 第2组方法(外部插入法)

    1. after(content):在每个匹配的元素之后插入内容

      举例说明 A.after(B)

      (1) A,B都是jquery对象 (2) 表示B对象插入到A对象后面 (3) 结果是B成为A的兄弟节点,B在A后面,如

    2. before(content):在每个匹配的元素之前插入内容

      举例 A.before(B)

      (1)A, B都是jquery对象(2) 表示B对象插入到A对象前面 (3) 结果是B成为A的兄弟节点,并且在A的前面,如

    3. insertAfter(content):把所有匹配的元素插入到另一个指定的元素元素集合的后面

      举例说明 A.insertAfter(B)

      (1) A, B都是jquery对象 (2) 表示把A对象插入到B对象的后面 (3) 结果:A成为B的后一个兄弟节点,如

    4. insertBefore(content) :把所有匹配的元素插入到另一个指定的元素元素集合的前面

      举例 A.insertBefore(B)

      (1) A, B都是jquery对象 (2) 表示把A对象插入到B对象的前面 (3) 结果是 A成为B的前一个兄弟,如

    5. 外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)

注意: 以上方法不但能将新的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动(可以完成很多需求)


应用实例1




    
    创建节点-应用实例
    
    


  • 北京
  • 上海
  • 吉林
  • 绵阳









应用案例2-以上方法不但能将新的 DOM 元素插入到文档中, 也能对原有的DOM元素进行移动




    
    移动节点
    
    



您喜欢的城市:
  • 北京
  • 上海
  • 天津
您爱好的游戏:
  • 反恐
  • 传奇




6.3删除节点

  1. remove():从dom中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素,当某个节点用remove()方法删除后,该节点所包含的所有后代节点将被同时删除。这个方法的返回值是一个指向已被删除的节点的引用。
  2. empty():清空节点-清空元素中的所有后代节点(不包含属性节点)

应用实例




    
    删除节点-应用实例
    
    


您喜欢的城市:
  • 北京
  • 上海
  • 天津
您爱好的游戏:
  • 反恐
  • 传奇

Hello

how are

you?

Hello, Person and person

6.4复制节点

登录查看全部

参与评论

评论留言

还没有评论留言,赶紧来抢楼吧~~

手机查看

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认