jquery基本介绍（入口函数）

发表于 2020-08-17 本文字数 4.8k 字阅读时长 4 分钟

# JQ 文件和版本

# 完整版：

用于开发环境中（写项目）
是正常的未压缩的源代码

# 压缩版：

用于生成环境（线上）
去掉了注释、留白、并且压缩了变化、函数名等

# 版本选择：

如果要兼容老版本浏览器（即在 PC 上），最好使用 1.12.4 版本即以下的
否则使用 3 最新版本，这样可以兼容 PC 版主流浏览器 + 移动端浏览器
各个版本间区别不是太大，基本 API 都是通用的

# 使用 jquery

# 导入 JQ 库文件


//使用本地库文件
<script src="jquery-3.1.0.js"></script>
//或使用cdn(内容分发网络)，即使用外部jQuery库资源（外链）
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

# 在 script 标签或新的 JS 文件中写 JQ 代码

比如：

   
$(function(){
        //这里写你的代码
})

# onload 与 ready 的对比

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片）才能执行	网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完
编写个数	不能同时编写多个	能同时编写多个
简化写法	无	$(function(){})

# jquery 实例 - tab 页

基于 jquery 做的 tab 页，放入.html 文件中在有网的环境下可以直接执行。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    /* css 重置 */
    *{margin:0; padding:0; list-style:none; }
    body{ background:#fff; font:normal 12px/22px 宋体;  }
    img{ border:0;  }
    a{ text-decoration:none; color:#333;  }
    a:hover{ color:#1974A1;  }

    /* 本例子css */
    .notice { width: 298px;margin:10px auto; border: 1px solid #d5d5d5; overflow: hidden; }
    .notice .tab-hd { height: 29px; background-color: #eee; margin-bottom: -1px; color: #404040; }
    .notice .tab-hd ul { padding-top: 4px; margin-left: 7px; }
    .notice .tab-hd li{ float: left; height: 24px; line-height: 18px; border-top: 1px solid #eee; }
    .notice .tab-hd li a{ display:block; padding:0 14px;  }
    .notice .tab-hd li a:hover{ color:#f60; text-decoration:underline;   }
    .notice .tab-hd li.on{ border: 1px solid #d5d5d5; border-bottom: none; background-color: #fff; font-weight: bold; position: relative; margin-left: -1px; margin-right: -1px; }
    .notice .tab-bd { border-top: 1px solid #e8e8e8; padding:5px;}
    .notice .tab-pal{display: none;   }
    .notice .tab-bd ul{ overflow:hidden; zoom:1; }
    .notice .tab-bd li { height: 22px; line-height: 22px; padding: 0 10px 0 5px; overflow: hidden; width: 125px; float: left; }

</style>
<div class="notice">
    <!-- 面板标题 -->
    <div class="tab-hd">
        <ul class="tab-nav" id="tabTit">
          <li class="on"><a href="#">公告</a></li>
          <li><a href="#">规则</a></li>
          <li><a href="#">论坛</a></li>
        </ul>
    </div>
    <!--面板主体  -->
    <div class="tab-bd" id="tabBody">
        <!-- 公告面板 -->
        <div class="tab-pal" style="display: block;">
            <ul>
                    <li><a href="#" class="h">[三联]疯狂的24小时</a></li>
                    <li><a href="#">[访谈]打造爆款有绝招</a></li>
                    <li><a href="#">[话题]那些感动淘宝事</a></li>
                    <li><a href="#">[123]别错过聚划算</a></li>
            </ul>
        </div>
        <!-- 规则面板 -->
        <div class="tab-pal">
            <ul>
                    <li><span>[<a href="#">规则</a>]</span> <a href="#">女装发布数量限制</a></li>
                    <li><span>[<a href="#">规则</a>]</span> <a href="#">违规信息升级</a></li>
                    <li><span>[<a href="#">规则</a>]</span> <a href="#">延迟发货变更</a></li>
                    <li><span>[<a href="#">规则</a>]</span> <a href="#" class="h">违背发货时间</a></li>
            </ul>
        </div>
        <!-- 论坛面板 -->
        <div class="tab-pal">
            <ul>
                    <li><span>[<a href="#">杂谈</a>]</span> <a href="#">小而美无下限！</a></li>
                    <li><span>[<a href="#">焦点</a>]</span> <a href="#" class="h">减库存方式调整</a></li>
                    <li><span>[<a href="#">话题</a>]</span> <a href="#">小卖家抱团公约</a></li>
                    <li><span>[<a href="#">网商</a>]</span> <a href="#">1212小而美占位</a></li>
            </ul>
        </div>

    </div>
</div>
<!-- 1、导入jq库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
//这里实现tab切换页，原理同有指示器的轮播图
// function tabs(){
  $(".tab-nav>li").click(function(){
    // jq特色：链式操作
    //          隐式迭代
    // 给当前li标签添加高亮class,并找到其他兄弟元素，移出这些兄弟元素的高亮样式
    $(this).addClass("on").siblings().removeClass("on");
    // 点击某一个li时，让对应的面板显示
    // 让其他面板隐藏
    $(".tab-bd>div").eq($(this).index()).show(400).siblings().hide(400);
  });
// }

// tabs();
</script>
</body>
</html>

jquery