022 Jquery总结
1.大纲
- jQuery 库中的 $() 是什么?
- 网页上有 5 个div元素,如何使用 jQuery来选择它们?
- jQuery 里的 ID 选择器和 class 选择器有何不同?
- 如何在点击一个按钮时使用 jQuery 隐藏一个图片?
- $(document).ready() 是个什么函数?为什么要用它?
- JavaScript window.onload 事件和 jQuery ready 函数有何不同?
- 如何找到所有 HTML select 标签的选中项?
- jQuery 里的 each() 是什么函数?你是如何使用它的?
- 你是如何将一个 HTML 元素添加到 DOM 树中的?
- 你能用 jQuery 代码选择所有在段落内部的超链接吗?
- $(this) 和 this 关键字在 jQuery 中有何不同?
- 你如何使用jQuery来提取一个HTML 标记的属性 例如. 链接的href?
- 你如何使用jQuery设置一个属性值?
- jQuery中 detach() 和 remove() 方法的区别是什么?
- 你如何利用jQuery来向一个元素中添加和移除CSS类?
- 使用 CDN 加载 jQuery 库的主要优势是什么 ?
- jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?
- jQuery 中的方法链是什么?使用方法链有什么好处?
- 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样?
- 哪种方式更高效:document.getElementbyId(“myId”) 还是 $(“#myId”)?
一:解答
1.jQuery 库中的 $() 是什么
$就是jquery对象,$()就是jQuery(),在里面可以传参数,作用就是获取元素
如下例子
$(“.div1″) 表示获取类名为div1的元素,例如获取<div class=”div1”></div>
$(“.div1”).onclick表示类名为div1的div点击事件
jquery中$.,例如$.post(),$.get(),$.ajax()等这些都是jquery这个对象的方法
2.网页上有 5 个div元素,如何使用 jQuery来选择它们?
jQuery 问题是基于选择器的。
jQuery 支持不同类型的选择器,例如 ID 选择器、class 选择器、标签选择器。
鉴于这个问题没提到 ID 和 class,你可以用标签选择器来选择所有的 div 元素。jQuery 代码:$(“div”),这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。
3.jQuery 里的 ID 选择器和 class 选择器有何不同
-
兼容性:ID兼容,class 不兼容IE6,7,8
-
数量: 通过ID只能获取一个dom元素,通过class可以获取一组元素。
-
通用性:ID不能重复,class可以重复,所以class比较好用,这也是jQuery能被广泛应该的原因(选择器好)。
4.如何在点击一个按钮时使用 jQuery 隐藏一个图片
toggle默认切换hide()和show()
如果你在toggle()方法自定义多个方法,则toggle()是切换你的方法,toggle语法实际如下:
$(selector).toggle(function1(),function2(),functionN(),…)
5.$(document).ready() 是个什么函数?为什么要用它?
ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载(例如HTML被完全解析DOM树构建完成时),jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用 于所有浏览器,jQuery帮你解决了跨浏览器的难题。
6.JavaScript window.onload 事件和 jQuery ready 函数有何不同
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
7.如何找到所有 HTML select 标签的选中项
$(“#fanxuan”).click(function(){ //点击反选执行下面代
$(“[type=checkbox]”).each(function(){ //type=checkbox实行便利循环
if(this.checked){ //判断type=checkbox里面是否有checked=”checked”
8.jQuery 里的 each() 是什么函数?你是如何使用它的
遍历一个jQuery对象,为每个匹配元素执行一个函数。
9.你是如何将一个 HTML 元素添加到 DOM 树中的?
jQuery提供了append()、appendTo()等相关方法 可以将一个HTML元素添加到DOM树中
10.$(this) 和 this 关键字在 jQuery 中有何不同?
this表示的是javascript提供的当前对象 $(this)表示的是用jquery封装候的当前对象
11.你能用 jQuery 代码选择所有在段落内部的超链接吗
$(“p>a”)
12.你如何使用jQuery来提取一个HTML 标记的属性 例如. 链接的href?
attr() 方法被用来提取任意一个HTML元素的一个属性的值. 你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接,然后你可以应用attr()方法来获得他们的href属性的值。
13.你如何使用jQuery设置一个属性值?
attr()方法和jQuery中的其它方法一样,能力不止一样. 如果你在调用attr()的同时带上一个值 例如. attr(name, value), 这里name是属性的名称,value是属性的新值。
14.jQuery中 detach() 和 remove() 方法的区别是什么?
尽 管 detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于 detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用.
15.你如何利用jQuery来向一个元素中添加和移除CSS类?
通过利用 addClass() 和 removeClass() 这两个 jQuery 方法
16.使用 CDN 加载 jQuery 库的主要优势是什么
除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是,如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次. 因此今时今日,许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库,网站就能有非常好的展示机会。
17.jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?
ajax() 方法更强大,更具可配置性, 让你可以指定等待多久,以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。
18.jQuery 中的方法链是什么?使用方法链有什么好处?
方法链是对一个方法返回的结果调用另一个方法,这使得代码简洁明了,同时由于只对 DOM 进行了一轮查找,性能方面更加出色。
19.你要是在一个 jQuery 事件处理程序里返回了 false 会怎样?
这通常用于阻止事件向上冒泡。
20.哪种方式更高效:document.getElementbyId(“myId”) 还是 $(“#myId”)?
第一种,因为它直接调用了 JavaScript 引擎。