码迷,mamicode.com
首页 > Web开发 > 详细

022 Jquery总结

时间:2019-03-02 10:32:49      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:配置   cto   关键字   href   文档   ide   document   浏览器   png   

1.大纲

  1. jQuery 库中的 $() 是什么?
  2. 网页上有 5 个div元素,如何使用 jQuery来选择它们?
  3. jQuery 里的 ID 选择器和 class 选择器有何不同?
  4. 如何在点击一个按钮时使用 jQuery 隐藏一个图片?
  5. $(document).ready() 是个什么函数?为什么要用它?
  6. JavaScript window.onload 事件和 jQuery ready 函数有何不同?
  7. 如何找到所有 HTML select 标签的选中项?
  8. jQuery 里的 each() 是什么函数?你是如何使用它的?
  9. 你是如何将一个 HTML 元素添加到 DOM 树中的?
  10. 你能用 jQuery 代码选择所有在段落内部的超链接吗?
  11. $(this) 和 this 关键字在 jQuery 中有何不同?
  12. 你如何使用jQuery来提取一个HTML 标记的属性 例如. 链接的href?
  13. 你如何使用jQuery设置一个属性值?
  14. jQuery中 detach() 和 remove() 方法的区别是什么?
  15. 你如何利用jQuery来向一个元素中添加和移除CSS类?
  16. 使用 CDN 加载 jQuery 库的主要优势是什么 ?
  17. jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?
  18. jQuery 中的方法链是什么?使用方法链有什么好处?
  19. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样?
  20. 哪种方式更高效: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 选择器有何不同

  1. 兼容性:ID兼容,class 不兼容IE6,7,8

  2. 数量: 通过ID只能获取一个dom元素,通过class可以获取一组元素。

  3. 通用性: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 引擎。

 

022 Jquery总结

标签:配置   cto   关键字   href   文档   ide   document   浏览器   png   

原文地址:https://www.cnblogs.com/juncaoit/p/10459685.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!