zoukankan      html  css  js  c++  java
  • 022 Jquery总结

    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 引擎。

  • 相关阅读:
    【转】java内存溢出的场景及解决办法
    系统架构
    【转】Linux tar命令详解
    【转】Java 开发必会的 Linux 命令
    【转】ps命令详解与使用
    【转】Linux命令:ps -ef |grep java
    linux grep命令详解
    【springcloud】Zuul 超时、重试、并发参数设置
    【springcloud】常见面试题总结
    php的函数应用
  • 原文地址:https://www.cnblogs.com/juncaoit/p/10459685.html
Copyright © 2011-2022 走看看