20个你必须要知道的jQuery知识点(上)
沉沙 2018-06-22 来源 : 阅读 998 评论 0

摘要:本篇为20个你必须要知道的jQuery知识点(上)篇,讲解了10个jQuery关键知识点,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

1. jQuery 库中的 $() 是什么?

$()函数是JQuery函数的别称,就是一种标志,符合其思想:write less,do more。第一次接触可能有些不适应,是jQuery代码佶屈聱牙,晦涩难懂。我们需要适应一段时间,过一段时间,就会爱上其简洁,方便,飞起来。

$()函数用于将任何对象包裹成jQuery对象,接着就可以被允许调用定义在jQuery对象上的多个不同方法。甚至可以将一个选择器字符串传入 $()函数,它会返回一个包含所有匹配的DOM 元素数组的jQuery对象。可以用each()方法进行遍历里面的对象。

2.网页上有多个<div>元素,怎样会用jQuery来选择它们?

这个问题是jQuery基于选择器的。jQuery支持不同类型的选择器,有 ID选择器、class选择器、标签选择器。这个问题的答案是使用标签选择器来选择所有的div元素。jQuery代码: 

$("div").

其返回值是一个包含5个div标签的jQuery对象。

3.jQuery里的ID选择器和class选择器有什么不同?

ID选择器使用ID来选择元素,例: $("#idtest1"). 而 class选择器使用CSS class 来选择元素,例:$(".classtest1")。当只需要选择一个元素时,使用ID选择器,如果需要选择具有相同 CSS class的元素,就要用class 选择器。

1. <span style="font-size:18px;">$("#idTest1");//返回 id 是idTest1的jQuery对象  
2. $(".classTest1");//返回的是class是 classTest1的所有元素的一个jQuery数组</span>

这里和CSS里的标记符合 (#,.) 是一 一 对应的。

很容易理解。

4.如何在点击一个按钮时使用 jQuery 隐藏一个图片?

此功能是jQuery的事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。可以通过ID或class选择器定位到图片,并将按钮绑定事件,再执行hide()方法。

1. //为按钮绑定点击事件  
2. $("#button1").click(function(){  
3.     //执行hide()方法  
4.     $("#img1").hide();  
5. });

5.$(document).ready( ) 函数是什么?干什么用的?

ready( ) 函数用于在文档进入ready状态时执行代码。当DOM完全加载(HTML被完全解析DOM树构建完成时),jQuery允许我们的执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器,jQuery帮我们解决了跨浏览器的问题。

6.javascript中的window.onload()事件与jQuery中的$(document).ready( )函数 的异同?

前者,window.onload( ) 事件需要等待 DOM被创建,还要等待包括 大型图片、音频、视频等 所有的外部资源全部都加载完全,才能执行; 

如果图片、视频等内容的加载花费时间过多,就会有明显的延迟。更严重的是使用户感受到。。。say byebye。。。

后者,$().ready( ) 函数,只需要等待DOM树的建立完成,而不需要等待图片、音频、视频的大型文件的加载,从而执行的会更快。

再有,在网页中可以多次使用ready( ) ,浏览器会按照其在HTML页面里出现的顺序执行,而onload只执行一次。

7.怎样找到所有HTML中 select标签的选中项?

表单选择器与属性选择器的应用

1. $("选择器:selected")  

8.jQuery中的each( ) 是什么函数? 如何使用它?

我们使用选择器进行选择时,例如涉及到选择class的相关操作,其返回值是jQuery数组,我们想要获取数组中的每一个值,这是就要用到each()函数了。

each()函数类似于Java中集合中遍历所使用的 Iterator 迭代器,允许我们遍历一个元素的集合。

可以传一个函数给each()方法,被调用的jQuery对象会在其每个元素上执行传入的函数。

1. $(".classTest1").each(function(){  
2.     //this指代遍历到的元素,$(this),将js转换为jQuery对象,text()方法是jQuery的特有方法  
3.     alert($(this).text())  
4. });

这样就可以遍历到每个元素了。

9.如何将一个HTML元素添加到DOM树中?

jQuery提供了append()、appendTo()等相关方法 可以将一个HTML元素添加到DOM树中。

相关用法如下

内部(子元素):

[javascript] view plain copy

1. $A.append($B)       -->将$B追加到$A内部后;  

2. $A.appendTo($B)     -->将$A追加到$B内部后;  

3. $A.prepend($B)      -->将$B添加到$A内部前;  

4. $A.prependTo($B)    -->将$A添加到$B内部前;  

外部(兄弟元素):

[javascript] view plain copy

1. $A.after($B)        -->将$B添加找$A之后;  

2. $A.before($B)       -->将$B添加找$A之前;  

3. $A.insertAfter($B)  -->将$A添加找$B之后;  

4. $A.insertBefore($B) -->将$A添加找$B之前;  

10.怎样用jQuery代码选择所有在段落内部的超链接?

可以用jQuery代码片段选择器来选择所有嵌套在段落<p>标签内部的超链接<a>


本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程