jQuery的引入与原生JavaScript实现对比

敲代码敲到头发茂密

已于 2024-03-12 23:51:20 修改

阅读量2.4k

点赞数 2

分类专栏： # JavaScript 前端学习之路文章标签： javascript jquery 前端

于 2022-01-23 07:00:00 首次发布

本文链接：https://blog.csdn.net/YZL40514131/article/details/122569979

版权

前端学习之路同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JavaScript

18 篇文章 2 订阅

订阅专栏

在这里插入图片描述

这里写目录标题

原生JavaScript实现动态隔行变色

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title></title>
         <style type="text/css">
             .a {
                  background-color:  greenyellow;
             }
             .b {
                  background-color:  yellowgreen;
             }
             .c {
                  background-color: yellow;
             }
         </style>
         <script type="text/javascript">
             function fun1(){
	             //获取所有的行
	             var arr=document.getElementsByTagName("tr")
	             //对所有的行动态实现隔行变色
	             for(var i=0;i<arr.length;i++){
	             	if(i==0){
	             		arr[i].className='a';
	             	}else if(i%2==1){
	             		arr[i].className='b'
	             	}else{
	             		arr[i].className='c'
	             	}
	             }
             }
         </script>
    </head>
    <body onload="fun1()">
         <table class="datalist">
             <tr>
                  <th scope="col">Name</th>
                  <th scope="col">Class</th>
                  <th scope="col">Birthday</th>
                  <th scope="col">Constellation</th>
                  <th scope="col">Mobile</th>
             </tr>
             <tr>
                  <td>isaac</td>
                  <td>W13</td>
                  <td>Jun   24th</td>
                  <td>Can</td>
                  <td>1118159</td>
             </tr>
             <tr>
                  <td>fresheggs</td>
                  <td>W610</td>
                  <td>Nov   5th</td>
                  <td>Scorpio</td>
                  <td>1038818</td>
             </tr>
             <tr>
                  <td>girlwing</td>
                  <td>W210</td>
                  <td>Sep   16th</td>
                  <td>Virgo</td>
                  <td>1307994</td>
             </tr>
             <tr>
                  <td>tastestory</td>
                  <td>W15</td>
                  <td>Nov   29th</td>
                  <td>Sagittarius</td>
                  <td>1095245</td>
             </tr>
         </table>
    </body>
</html>

或者

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title></title>
         <style type="text/css">
             .a {
                  background-color:  greenyellow;
             }
             .b {
                  background-color:  yellowgreen;
             }
             .c {
                  background-color: yellow;
             }
         </style>
         <script type="text/javascript">
             window.onload=function(){
	             //获取所有的行
	             var arr=document.getElementsByTagName("tr")
	             //对所有的行动态实现隔行变色
	             for(var i=0;i<arr.length;i++){
	             	if(i==0){
	             		arr[i].className='a';
	             	}else if(i%2==1){
	             		arr[i].className='b'
	             	}else{
	             		arr[i].className='c'
	             	}
	             }
             }
         </script>
    </head>
    <body>
         <table class="datalist">
             <tr>
                  <th scope="col">Name</th>
                  <th scope="col">Class</th>
                  <th scope="col">Birthday</th>
                  <th scope="col">Constellation</th>
                  <th scope="col">Mobile</th>
             </tr>
             <tr>
                  <td>isaac</td>
                  <td>W13</td>
                  <td>Jun   24th</td>
                  <td>Can</td>
                  <td>1118159</td>
             </tr>
             <tr>
                  <td>fresheggs</td>
                  <td>W610</td>
                  <td>Nov   5th</td>
                  <td>Scorpio</td>
                  <td>1038818</td>
             </tr>
             <tr>
                  <td>girlwing</td>
                  <td>W210</td>
                  <td>Sep   16th</td>
                  <td>Virgo</td>
                  <td>1307994</td>
             </tr>
             <tr>
                  <td>tastestory</td>
                  <td>W15</td>
                  <td>Nov   29th</td>
                  <td>Sagittarius</td>
                  <td>1095245</td>
             </tr>
         </table>
    </body>
</html>

使用jquery方式实现

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title></title>
         <style type="text/css">
             .a {
                  background-color:  greenyellow;
             }
             .b {
                  background-color:  yellowgreen;
             }
             .c {
                  background-color: yellow;
             }
         </style>
         
         <!--引入jquery文件-->
         <script type="text/javascript" src="jquery.min.js"></script>
         <script type="text/javascript">
         	$(function(){
                  $("tr:odd").css("backgroundColor","yellowgreen")
                  $("tr:even").css("backgroundColor","lightyellow")
                  $("tr:first").css("backgroundColor","greenyellow")
             })
          
	             
         </script>
    </head>
    <body>
         <table class="datalist">
             <tr>
                  <th scope="col">Name</th>
                  <th scope="col">Class</th>
                  <th scope="col">Birthday</th>
                  <th scope="col">Constellation</th>
                  <th scope="col">Mobile</th>
             </tr>
             <tr>
                  <td>isaac</td>
                  <td>W13</td>
                  <td>Jun   24th</td>
                  <td>Can</td>
                  <td>1118159</td>
             </tr>
             <tr>
                  <td>fresheggs</td>
                  <td>W610</td>
                  <td>Nov   5th</td>
                  <td>Scorpio</td>
                  <td>1038818</td>
             </tr>
             <tr>
                  <td>girlwing</td>
                  <td>W210</td>
                  <td>Sep   16th</td>
                  <td>Virgo</td>
                  <td>1307994</td>
             </tr>
             <tr>
                  <td>tastestory</td>
                  <td>W15</td>
                  <td>Nov   29th</td>
                  <td>Sagittarius</td>
                  <td>1095245</td>
             </tr>
         </table>
    </body>
</html>

在这里插入图片描述

总结:

关于jQuery的使用需要先导入jQuery的js文件,jQuery本身就是一个JS文件。jQuery.min.js是jQuery文件的压缩版,生产环境下推荐压缩版,$是jQuery是使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。

作用1：页面加载函数
jQuery(document).ready(function(){});和$(document).ready(function({}));简写为$(function(){})相当于window.onload=function(){}但是功能比window.onload更强大window.onload一个页面只能写一个,但是可以写多个$()而不冲突,window.onload要等整个页面加载完后再执行(包括图片、超链接、音视频等)，但是$()的执行时间要早
作用2：选择器标志 $(selector)

敲代码敲到头发茂密

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery的引入与原生JavaScript实现对比

原生JavaScript实现动态隔行变色<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .a { background-color: greenyellow;
复制链接

扫一扫