JQuery 选择器、DOM节点操作练习实例

一、练习一

1、需求效果分析：

2、代码示例：

  
  
  
  


  
隔壁 Java 老师 很肥
  
隔壁Java 老师 很胖

  
隔壁Java 老师 很呆萌
  
隔壁Java 老师 爱捡肥皂
  
隔壁Java 老师 爱撒娇
  
隔壁Java 老师 装嫩
  
隔壁Java 老师 肾虚

  
隔壁Java 老师 等等
  
隔壁Java 老师 很肥
  
隔壁Java 老师 很肥
  
隔壁Java 老师 很肥
  
隔壁Java 老师 很肥

  
隔壁Java 老师 很肥
  
隔壁Java 老师 很肥
  
隔壁Java 老师 很肥
  
隔壁Java 老师 很肥
  
隔壁Java 老师 很肥

  
隔壁Java 老师 很肥
  
隔壁Java 老师 很肥
  
隔壁Java 老师 很肥

二、练习二

1、效果分析：

2、代码示例

  
  
    p {
      display: none;
      border: 1px solid red;
    }
  
  
  


  

    

      中国
      
台湾
      
钓鱼岛
      
北京
    
    

      米国
      
华盛顿
      
洛杉矶
    
    

      韩国
      
首尔
      
釜山
      
济州岛
    
  

三、练习三

1、效果分析

2、代码示例

  
  
    .box {
      border: 1px solid #aaccff;
      padding: 10px;
      margin: 10px;
    }

    .box1 {
      border: 1px solid #aacc66;
      padding: 10px;
      margin: 10px;
    }

    .red {
      color: Red;
    }

    p {
      padding: 10px;
      margin: 10px;
    }
  
  
  


  
    点击我让所有id为mybox的元素边框该为：5px dotted green=》提示 $().css("border","5px dotted green")
  


  
    点击我让所有class=red的元素边框该为：5px dotted green
  


  
    点击我让所有div的元素边框该为：5px dotted green
  


  
    点击我让id为mybox的元素、p元素边框该为：5px solid green
  


  
    点击我隐藏除了我以外所有的兄弟元素
  

  
我是段落...

以上这篇JQuery 选择器、DOM节点操作练习实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。