JQuery一、

最新推荐文章于 2023-04-07 21:22:51 发布

JV_YAN

最新推荐文章于 2023-04-07 21:22:51 发布

阅读量291

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/JV_YAN/article/details/76099663

版权

4 篇文章 0 订阅

订阅专栏

 
 一、准备 

 
 JQuery的优势
  

 
 JQuery的语法

 
 导入jquery文件：<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8</script> 

 
 文档就绪函数：$(document).ready(function(){ 

 
 //隐藏元素 

  $('p').hide(); }) 

 
 文档就绪函数(简写)：$(function(){ 

  //隐藏元素 

  $('p').hide(); }) 

 
 JQuery文档就绪函数

 
 例题： 

  <!DOCTYPE html> 

  <html lang="en"> 

  <head> 

  <meta charset="UTF-8"> 

  <title></title> 

  <!--导入jquery文件--> 

  <script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"> 

  </script> 

  <script type="text/javascript"> 

 
 //文档就绪函数 

  // $(document).ready(function(){ 

  // / 
 /隐藏元素 

  // $('p').hide(); 

  // }) 

 
 //文档就绪函数(简写) 

  $(function(){ 

  //隐藏元素 

  $('p').hide(); 

})

  </script> 

  </head> 

  <body> 

  <p>比必备速度表比我完全不懂我业务</p> 

  <p>那你多吃点弄葱段农村的你从</p> 

  </body> 

  </html> 

 
 二、选择元素，添加事件 

 
 例题： 

  <!DOCTYPE html> 

  <html> 

  <head> 

  <meta charset="UTF-8"> 

  <title></title> 

  <style type="text/css"> 

  img{ 

  margin: 10px 10px; 

  border: 1px solid gray; 

}

.a{

  border: 3px solid orange; 

}

  </style> 

  <script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> 

  <script type="text/javascript"> 

  $(function(){ 

 
 //选择元素，添加事件 

  $("img").mouseover(function(){ 

  $(this).css('border','3px solid orange'); 

  // $(this).addClass('a'); 

  }).mouseout(function(){ 

  $(this).css('border','1px solid gray'); 

  // $(this).removeClass('a'); 

});

})

  </script> 

  </head> 

  <body> 

  <img src="../ws1/img/new_01.jpg"/> 

  <img src="../ws1/img/new_02.jpg"/> 

  <img src="../ws1/img/new_03.jpg"/> 

  </body> 

  </html> 

关注

专栏目录