• JS库-jQuery入门到掌握

    目录

     

    概述

    jQuery安装和引用

     jQuery-加载函数

    jQuery顶级对象：$

    jQuery对象和DOM对象

     jQuery对象和DOM对象的转换

     jQuery选择器和筛选器

     jQuery特性-隐式迭代

    常用API-显示show() 和 隐藏hide()

     案例：jQuery中的排他思想实现

    jQuery-获取元素索引

    jQuery样式操作  

     给元素添加类

     jQuery动画效果

    jQuery常用的动画效果

    效果：显示和隐藏-show() & hide()

    效果：滑动-slideUp() & slideDown()

    案例：鼠标经过滑下鼠标离开收起

    动画排队问题-stop()解决

    效果：淡入淡出和效果突出-fadeIn，fadeOut，fadeTo

    透明度设置：fadeTO

    案例：淡入淡出和修改透明度

    jQuery自定义动画-animate

     案例：王者荣耀手风琴效果

    jQuery-元素属性

    获取/修改元素固有属性

    获取/设置元素自定义属性

    数据缓存-data()

    jQuery内容文本操作

     对表单元素的操作-val()

     jQuery元素节点操作

    遍历元素each()

     创建和添加元素节点

     删除元素节点

     jQuery关于元素的大小尺寸

     获取元素尺寸的常用方法

    jQuery关于元素的位置

    元素偏移oofset()---文档相关

    元素偏移position()---父类相关

    元素滚动scrollTop/scrollLeft()

    jQuery缓动画返回顶部

    jQuery事件

    on()-事件绑定

     on()绑定事件优势：事件委派

     on()优势：可以处理动态创建的元素

    案例：简单微博留言功能（事件委托）

     jQuery解绑事件

    自动触发事件 

     jQuery事件对象

    jQuery多库共存

    关键字冲突问题的解决-noConflict()

     

    概述

    jQuery是一个快速、简洁的 JS库，设置宗旨是"writer Less,Do More"，也就是写着更少的代码，做跟多的事情。使用jQuery可以大大简化我们的开发代码，提高效率。

    jQuery：j为JavaScript，Query为查询，既："查询JS"，把JS中的DOM操作做了封装。

    jQuery封装了JS常用的功能代码。

    jQuery安装和引用

    点击下载地址：官方网站

    ff2fa445c8394d92bfb7feb317037289.png

    在这下载压缩版，因为容量比较小。

    两者区别在于：未压缩版里面的js代码未被压缩，可以看到原生代码。

    4453ac069cc2419399f51e14eaf89fc3.png

    点击后，复制其中的所有代码，放到js文件中封装起来即可。

    845896dd7f164eb19ae7d5b6afa557cd.png

     使用：将封装好的js文件引用到html文件中即可：a4e0ef0da12f41eb8a689b6bd9c99e8c.png

     jQuery-加载函数

     说明  

    1.加载函数，也就是等到DOM元素加载完成后，在执行函数内代码。

     2.相当于原生js中的DOMContentLoaded。

    3.为了页面的渲染的流畅，我们可以将代码的DOM操作，放到加载函数中。

     书写格式 

    jQuery顶级对象：$

    1.我们在使用jQuery中的方法时，一般使用 $ 符号进行调用。

    2. $ 是jQuery的设置好的别名，在代码中我们也可以不使用别名，直接使用jQuery来调用也可以，但是一般都用$符号，比较简洁。别名也可以设置，篇末进行说明。

    3. $ 是jQuery的顶级对象，相当于原生JS中的window。

    jQuery对象和DOM对象

    1.使用原生JS获取的对象就是DOM对象。

    2.jQuery方法获取的元素就是jQuery对象。 

    jQuery对象只能用jQuery方法，DOM对象只能用原生js属性和方法。不能混用方法，但是可以进行对象的转换。

     jQuery对象和DOM对象的转换

    正如上面所说，因为jQuery对象和DOM对象两者之间不能引用彼此的方法。所以当我们有需求:使用一方对象调用另一方对象的方法时，就需要进行对象的转换。例如：jQuery对象无法使用原生JS的.play()方法。

    DOM对象转换为jQuery对象

    方式：${DOM对象}

    2. <div id="obj">div>
    3. <script>
    4. 	//将DOM对象转为jQuery对象
    5. 	//获取DOM对象
    6. 	var obj_dom = document.querySelector("#obj");
    7. 	//转化：DOM对象无hide()方法，此方法由jQuery封装
    8. 	obj_dom.hide(); //报错：obj_dom.hide is not a function
    9. 	$(obj_dom).hide();  //通过
    10. script>

     jQuery对象转为DOM对象 

    方式一：$('div')[index]  ---index:索引

    方式二：$('div').get(index) 

    2. <div id="object">div>
    4. 	//将jQuery对象转为DOM对象
    5. 	//获取jQuery对象
    6. 	$("#object").hide();
    7. 	//转换方式一：
    8. 	// $('#object')[0].hide() //报错：TypeError: $(...)[0].hide is not a function
    9. 	//转换方式二：
    10. 	$('#object').get(0).hide() //报错:TypeError: $(...).get(...).hide is not a function
    11.

     jQuery选择器和筛选器

    格式：$("选择器") ，通过选择器，我们可以获取到元素对象。

      jQuery基础选择器 

    be2186b7d80843079ba66179252dd750.png

     jQuery层级选择器 

    995773f5ad8e4f48a2abbe70fd385571.png

      jQuery筛选器 

    0c7cb76ef542473f97b2f3a91654cd95.png

     使用演示 

      • <li>1li>
      • <li>2li>
      • <li>3li>
      • <li>4li>
  • <script>
  • //筛选器-获取第一个li
  • console.log($("li:first"));
  • //获取最后一个li
  • console.log($("li:last"));
  • //获取指定位置的li(获取第二个li)
  • console.log($("li.eq(2)"));
  • script>

    •  jQuery筛选的方法 

    91b7108c731b45c0ab6aa684d91e1d6a.png 常用：children() & find()

    1. class="parent">
    2.     <div>
    3.         <span>1span>
    4.     div>
    5.     <span>2span>
  • <script>
  • //方法：.children() -子代选择
  • console.log($(".parent").children("span")); //输出2
  • //方法：.find() -后代选择
  • console.log($(".parent").find("span")); //输出1和2
  • script>

    •  jQuery特性-隐式迭代

    jQuery存在隐式迭代。可以看到下面案例：

    我们通过$("div")的形式获取元素，

    不只有一个，所以我们获取到的应该是一个多个元素，也就是伪数组，现在，我们想要给每一个div都设置背景颜色，如果不使用jQuery那么我们就要遍历，但是使用jQuery的话，内部存在隐式迭代，就不需要遍历了。实例：

    1. 盒子1
    2. <div>盒子2div>
    3. <div>盒子3div>
    4. <div>盒子4div>
    5.  
    6.