首页 > Web开发 > 详细

jQuery笔记

时间:2019-09-13 16:29:55      阅读:72      评论:0      收藏:0      [点我收藏+]

1,隐式迭代:偷偷的遍历,在jQuery中,不需要手动写 for 循环了,会自动进行遍历

      $("li")可以获取所有的 li 元素

2,大版本分类

      1.x版本:能够兼容IE678浏览器

      2.x版本:不兼容IE678浏览器

     1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。

      3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)

3,压缩版和为压缩版

      jquery-1.12.4.min.js:压缩版本,适用于生产环境,因为文件比较小,去除了注释、换行、空格等                                           东西,但是基本没有颗阅读性。
      jquery-1.12.4.js:未压缩版本,适用于学习与开发环境,源码清晰,易阅读。

4,jQuery的入口函数

      第一种写法
      $(document).ready(function() {

      });
      第二种写法
      $(function() {

      });
5,Jquery入口函数与js入口函数的对比

      1. JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。

      2. jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。

6,jQuery 对象和 DOM对象的区别(重点)

     1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。

     2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
     3. jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))
     4. DOM对象与jQuery对象的方法不能混用。

7,DOM 对象转换成 jquery 对象  [联想记忆:花钱]

    $("li") . text( );

   jQuery对象转换成DOM对象

    $("li")[0]

8, $符号的实质

   $其实就是一个函数,以后用$的时候,记得跟小括号 $();

  参数不同,功能就不同3种用法   1. 参数是一个function, 入口函数

      $(function () {

});

2. $(domobj) 把dom对象转换成jquery对象
$(document).ready(function () {

});

3. 参数是一个字符串,用来找对象
$("div") $("div ul") $(".current")

9, jQuery选择器
1,基本选择器
ID选择器 $(“#id”);  类选择器 $(“.class”); 标签选择器 $(“div”); 并集选择器 $(“div,p,li”);  交集选择器 $(“div.redClass”);
2,
层级选择器

         子代选择器    $(“ul>li”)       使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 
         后代选择器 | $(“ul li”);      使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 

   3, 过滤选择器

       这类选择器都带冒号:

      :eq(index)     $(“li:eq(2)”).css(“color”, ”red”);    获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 

     :odd   $(“li:odd”).css(“color”, ”red”);   获取到的li元素中,选择索引号为奇数的元素 
     :even   $(“li:even”).css(“color”, ”red”);   获取到的li元素中,选择索引号为偶数的元素

 

4,筛选选择器(方法)
  筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
   children(selector)  $(“ul”).children(“li”)             |

         find(selector)      $(“ul”).find(“li”);     相当于$(“ul li”),后代选择器 |
         siblings(selector)      $(“#first”).siblings(“li”);    查找兄弟节点,不包括自己本身。 
         parent()       $(“#first”).parent();    查找父亲 
         eq(index)    $(“li”).eq(2);      相当于$(“li:eq(2)”),index从0开始 
         next()        $(“li”).next()      找下一个兄弟 
         prev()      $(“li”).prev()       找上一次兄弟

 





jQuery笔记

原文:https://www.cnblogs.com/shanlu0000/p/11516877.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!