每天学废一点前端2020-10-13(.与#的区别,html的加载顺序等)

最新推荐文章于 2023-12-19 14:29:48 发布

.铁牛.

最新推荐文章于 2023-12-19 14:29:48 发布

阅读量467

点赞数

分类专栏：前端一点点文章标签： js javascript html

转载请标明出处-------------QQ邮箱----1908251694@qq.com

本文链接：https://blog.csdn.net/yang_1011123/article/details/109053402

版权

前端一点点专栏收录该内容

14 篇文章 0 订阅

订阅专栏

每天学废一点点, 终有一天成废柴

今日问题:

HTML加载的顺序

前端页面,HTML加载的顺序, 如何初始化一个请求在基础的HTML+js的架构中?

参考文档 = https://blog.csdn.net/m0_37550086/article/details/77513676

<!--html的基本结构-->
<html>
    <head>
        <!-- 头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果 -->
    </head>
    <body>
        <!-- 显示实际内容 -->
    </body>
</html>

工作中怎么可能这么简单

<html>
    <head>
        <!-- 引用外部JS文件 -->
        <script src="..........."></script>
        <!--引用外部css样式 -->
        <link href="............."/>
        <style>
               ..............
        </style>
        <script>
               ..............
        </script>
    </head>
    <body>
        <script>
               ..............
        </script>
    </body>
</html>

从上到下运行，
先解析head标签中的代码，
（1）head标签中会包含一些引用外部文件的代码

(<script src="…">)

从开始运行就会下载这些被引用的外部文件
当遇到script标签的时候
浏览器暂停解析（不是暂停下载），将控制权交给JavaScript引擎（解释器）
如果<script>标签引用了外部脚本，就下载该脚本，否则就直接执行，执行完毕后将控制权交给浏览器渲染引擎

（2）当head中代码解析完毕，会开始解析body中的代码
如果此时head中引用的外部文件没有下载完，将会继续下载
浏览器解析body代码中的元素，会按照head中声明一部分样式去解析
如果此时遇到body标签中的<script>，同样会将控制权交给JavaScript引擎来解析JavaScript
解析完毕后将控制权交还给浏览器渲染引擎。
当body中的代码全部执行完毕、并且整个页面的css样式加载完毕后，css会重新渲染整个页面的html元素。

（3）按照之前的描述，<script>写到body标签内靠后比较好，
因为JavaScript 会操作html元素，如果在body加载完之前写JavaScript 会造成JavaScript 找不到页面元素
但是我们经常将<script>写到head中，body中不会有大量的js代码，body中的html代码结构会比较清晰
window.onload：等待页面中的所有内容加载完毕之后才会执行
$(document).ready()：页面中所有DOM结构绘制完毕之后就能够执行
可以这样理解：window.onload 和 $(d o c u m e n t) . r e a d y () /$ (function(){}); 相当于写在body 内最靠后的

从上面的结论可以得到:
如果你的页面中调用了, js 那么初始化就在这里进行了, 通过接口去后台获取相应的数据了
那么 js文件的执行顺序又是啥呢/
没有特殊处理的话就是从上到下顺序执行

$(function () {
	initQuery();
	/*等等, 调用其他地方的函数*/
}

<li class=“show_view hidden”></li>

那么如何进行一些简单的前端的判断, 发现是否是直接通过分享链接得来的地址 ?

    var getInfo = $('.show_view').hasClass("hidden");

解读:
定义一个 var 类型的 getInfo 变量(前端弱类型,全部是var定义)
接受这个属性的hasClass判断

$(’.show_view’) 获取到class为show_view这个对象

$("#Default_produce1_produce")获得id为Default_produce1_produce的对象

“.“与”#” 的区别

“.“与”#” 的区别就是 ,
“.” 获取标签中定义的class的对象
"#"获取标签中定义的id的对象
参考文档 = https://www.cnblogs.com/dtts/p/5159242.html
对象.hasClass(class)
判断这个对象中是否包含 class 的这个属性

hasClass() 方法检查被选元素是否包含指定的类名称。
如果被选元素包含指定的类，该方法返回 “true”。
参考文档hasClass = https://www.runoob.com/jquery/html-hasclass.html

实现js文件防止浏览器缓存的问题
参考文档 = https://blog.csdn.net/yw605/article/details/92403416
参考文档2 = https://stackoverflow.com/questions/11467873/how-to-append-timestamp-to-the-javascript-file-in-script-tag-url-to-avoid-cach
就是在HTML页面引入的时候外部 js 的时候在引入的url后面加上版本号

加发布时间
<script type=“text/javascript” src="/js/common.js?t=20180428" ></script>

当某一条件成立后显示或者隐藏标签

$(’#tops’).show()
$(’.page’).hide()

解读: 即展示 id 为 tops 这个标签
隐藏 class 为 page 的这个标签

<h2 class=“text-center” id=“tops”>没有权限</h2>
<h2 class=“page” >操作权限2222</h2>

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

.铁牛.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录