jquery-练习题

最新推荐文章于 2024-09-30 09:10:06 发布

sun_smile1

最新推荐文章于 2024-09-30 09:10:06 发布

阅读量3k

点赞数 1

本文链接：https://blog.csdn.net/sun_smile1/article/details/76162499

版权

该篇博客通过五个实例展示了jQuery在处理鼠标事件（如mousemove）和DOM操作（如添加、删除、修改元素）方面的应用。包括获取鼠标位置、遍历数组并操作元素、响应鼠标悬停改变样式、根据单选按钮选择切换图片以及动态修改表格内容。

摘要由CSDN通过智能技术生成

 
 1、  
 请使用 
 jQuery 
 编写一个函数，此函数绑定到 
 body 
 的 
 mousemove 
 事件上，可以获取鼠标的位置。 

 
 <!DOCTYPE  
 html 
 > 

 
 < 
 html  
 lang= 
 "en" 
 > 

 
 < 
 head 
 > 

 
  
 < 
 meta  
 charset= 
 "UTF-8" 
 > 

 
  
 < 
 title 
 ></ 
 title 
 > 

 
  
 < 
 script  
 src= 
 "../../js/jquery-3.1.1.min.js" 
 ></ 
 script 
 > 

 
  
 <!-- mousemove([[data],fn]) 

 
 data:mousemove([Data], fn)  
 可传入 
 data 
 供函数 
 fn 
 处理。 

 
 fn: 
 在每一个匹配元素的 
 mousemove 
 事件中绑定的处理函数。 
 --> 

 
  
 < 
 script 
 > 

 
 $ 
 ( 
 function 
 (){

 
  
 $ 
 ( 
 "#d" 
 ).mousemove( 
 function 
 (e){
   

 
  
 $ 
 ( 
 this 
 ). 
 text 
 (e. 
 pageX  
 +  
 ", "  
 + e. 
 pageY 
 ); 

});

})

 
  
 </ 
 script 
 > 

 
 </ 
 head 
 > 

 
 < 
 body  
 id= 
 "d" 
 > 

 
 放在我上面 

 
 <!-- 
 编写一个函数，绑定到 
 body 
 的 
 mousemove 
 事件上，可以获取鼠标位置 
 --> 

 
 </ 
 body 
 > 

 
 </ 
 html 
 > 

 
 2、  
 遍历数组【 
 2 
 ， 
 4 
 ， 
 6 
 ， 
 8 
 】，为每个元素加 
 1 

 
 < 
 script  
 src= 
 "../../js/jquery-3.1.1.min.js" 
 ></ 
 script 
 > 

 
 < 
 script 
 > 

 
  
 $ 
 . 
 each 
 ( [ 
 2 
 , 
 4 
 , 
 6 
 , 
 8 
 ],  
 function 
 (i, n){
   

 
  
 alert 
 (  
 "Item #"  
 + i +  
 ": "  
 + (n+ 
 1 
 ) ); 

});

 
 </ 
 script 
 > 

 
 3、  
 鼠标移到菜单上时改变菜单样式 

关注