关于js、jq零碎知识点

写在前面:

本文都是我目前学到的一些比较零碎的知识点,也是相对偏一点的知识,这是第二篇。前后可能没有太大的相关性,需要的朋友可以过来参考下,喜欢的可以点个赞,希望对大家有所帮助。本文的受众是刚学前端,大手子可以跳过。

1.页面加载完成之后,才开始执行函数。

1
2
3
$(function() {
// 需要执行的js函数内容
});

背景:碰到一个JQ很复杂的函数,上面简化了的整体格式,这跟自执行函数又不太一样,之前没见过这种写法,查了蛮久之后才找到这方面的内容,在这里分享一波。

jQuery 事件 -ready() 方法

定义和用法

当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件
ready() 函数规定当 ready 事件发生时执行的代码
ready() 函数仅能用于当前文档,因此无需选择器

意思就是:当页面载入完毕之后就开始执行函数代码。

允许使用以下三种语法

语法 1

1
$(document).ready(function)

语法 2

1
$().ready(function)

语法 3

1
$(function)

js貌似也有一个这类型的方法,js方法如下:

window.onload = function() {
$(“table tr:nth-child(even)”).addClass(“even”); //这个是jquery代码
};

js方法和jq方法的区别:

当使用js方法的时候,会在整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM tree全部加载完成,而且要求所有的外部图片和资源全部加载完成。更不幸的是,如果外部资源加载时间过长,例如图片需要很长时间来加载,那么这个js效果就会让用户感觉失效了,所以当这个情景下,使用这种方法的用户体验是非常差的

使用jquery方法:就仅仅只需要加载所有的DOM结构,在浏览器把所有的HTML放入DOM tree之前就执行js效果,包括在加载外部图片和资源之前。

2.获取class和tag类型的dom节点,获取到的是一个对象数组

背景:写代码的时候,因为之前做css习惯性的用class来命名,然后直接获取了class,tagname类名节点赋值的时候一直出错,查了好久最后,知道了class和tag类型的节点,因为不唯一性,所以获取节点的时候,返回的是一个对象数组

ps:赋值出错是因为,数组对象赋值时不能直接a=b,要a[index]=b,因为这里获取class,tagName的dom节点,浏览器不知道class和tag在html里面有多少个(class、tag可以有多个),所以默认生成的是一个对象数组,所以当赋值的时候,要有相应的下标,否则就会出错。

getElementsByClassName()w3c定义:

getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。
NodeList 对象代表一个有顺序的节点列表。
我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

解决方式:

因为id的唯一性质(同一个html里面只能取一个相同的id),没特殊情况最好用id命名,并且用id获取dom,这样不容易出错,就算写css习惯性的采用class,也可以再标签里面再加一段id=”名字”。


3.变量作用域,参数传递不进去。

背景:

这种情况是作用域的问题,上面定义的变量是全局变量,在虽然是一个闭包,但是应该可以使用全局的变量,回一级一级往上找这个变量。这里不太清楚为什么会没有找到?

然而,虽然不太清楚中间发生了什么,但是最后问题还是成功的解决了。

全局的window对象

JavaScript中的任何一个全局函数或变量都是window的属性,可以是使用如下方法获取dom,并且操作dom。

栗子1:

1
2
3
4
<script type="text/javascript">
var name="这里是测试";
document.write(window.name);//输出name的内容
</script>

实际应用如下:

上图中变量作用域的问题

应用场景:

当你层次嵌套多层之后,取不到变量或对象的时候,就可以使用window全局对象的方法,来传递参数,使其成功连接。

找不到关于这方面的比较详细的资料,大伙儿就记住这个方法就好了。


换行符和占位符在字符串里面正常生效

效果如图:

如图,占位符和换行符在字符串中正常生效,不会变成字符串。其他的我不知道,反正这两个亲测可行,个人觉得蛮神奇,一直以为会变成字符串。

评论区还有一种说法,意思是说在字符串中使用特殊符号,在输出的时候可以起效果,然而将特殊符号作为一个值来计算,或者是当做一个变量来使用的话,这种情况下就会出错!so,我们还是不要用特殊符号乱搞事情,输出的时候使用即可,而且好像应用场景也就输出的时候,应该没有什么其他场景应用的到了吧?

大家可以看看:


后话:

先记这些,以后学到了新的东西,累积起来,再发一些,这些都是我目前学到的一些比较零碎的知识点,也是相对偏一点的知识,再次强调一下是写给小白看的,让他们以后少踩些坑,小白们也多点参考资料。

最后:希望看完的朋友点个喜欢,也可以关注一下我,现在这阶段基本上每个月都不会少于十五篇文章(看到干货我也会进行分享)。写的不好之处,欢迎指点。码字不易,感谢支持!
ps:目前待业,坐标北京,求推荐工作。然后希望我写哪方面的文章可以在底下评论,或者是私信我,虽然写的不好,但我就当这是记录自己成长的一种方式咯。(前提是我会了,如果不会我也会记下来,等会了的时候再更出来。)
掘金个人主页简书主页链接csdn博客主页链接github

以上。

听说,打赏我的人最后都找到了真爱。