JQuery03

4.jQuery选择器03

4.4表单选择器

应用实例

    
    
    
    



    

    

    

    

    

    

    

    

    

    
        
    

    

    按钮2
    按钮3

5.练习

5.1练习1

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

    
    
    
    


我是段落1
我是段落2
我是段落3

5.2练习2

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

    
    
    
    
    


第一个表格

    

        
1
        
1
    
    

        
2
        
2
    
    

        
3
        
3
    
    

        
4
        
4
    
    

        
5
        
5
    
    

        
6
        
6
    

第二个表格

    

        
1
        
1
    
    

        
2
        
2
    
    

        
3
        
3
    
    

        
4
        
4
    
    

        
5
        
5
    
    

        
6
        
6
    

6.jQuery的DOM操作

6.1查找节点，修改属性

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

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

• 返回属性值：返回被选元素的属性值。

$(selector).attr(attribute)

• 设置属性/值：设置被选元素的属性和值。

$(selector).attr(attribute,value)

应用实例

    
    
    
    





设置图像的height属性

6.2创建节点

• 创建节点介绍

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

     ")或者$("

     ")。但不能使用$("

     ")或者$("

     ")
  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复制节点