jQuery笔记

jQuery

什么是jQuery？

jQuery是一个实用的JavaScript函数库，jQuery极大地简化了JS对DOM的操作，封装并实现的一系列常用的方法。

jQuery库封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

其实除了jQuery，还有许许多多的开源好用的JavaScript库，只不过jQuery较为流行，使用广泛所以要着重了解和学习

jQuery能够做什么？

快速获取文档元素

jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

创建AJAX无刷新网页

AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

增强的事件处理

jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

更改网页内容

jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

jQuery如何使用？

上文提到jQuery是一个实用的JavaScript函数库，那么引入jQuery就和引入一个JavaScript文件的方式相同，通常是外部引入

jQuery文件可以从jQuery的官网下载或者其他第三方网站下载到不同的版本，引入到HTML页面后即可使用

jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"

jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作

基础语法： $(selector).action()

jQuery详解

jQuery入口函数

等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部

资源加载完成，jQuery帮我们完成了封装。

jQuery的顶级对象

jQuery对象和DOM对象

jQuery选择器

$("选择器") //里面选择器直接写CSS选择器即可，要加引号
名称 用法 描述
ID选择器 $("#id") 获取指定id的元素
全选选择器 $("*") 匹配所有的元素
类选择器 $(".class") 获取同一类class的元素
标签选择器 $("div") 获取同一标签的所有元素
并集选择器 $("div,p,li") 获取多个元素
交集选择器 $("li,current") 交集元素
子代选择器 $("ul>li") 使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器 $(“ul li”) 使用空格，选择后代选择器，获取ul下的所有li元素，包括孙子等。

jQuery隐式迭代

隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法

给匹配到的所有元素进行循环遍历，执行相应的方法，而不是我们再进行循环，简化我们的操作，方便我们调用。

 <head>
 <style>
        div{
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
      $("div").css("background","pink");
    </script>
</body>

jQuery筛选选择器

语法 用法 描述
:first $("li:first") 获取第一个li元素
:last $("li:last") 获取最后一个选择器
:eq(index) $(li:eq(2)) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd $("li:odd") 获取到的li元素中，选择索引号为奇数的元素
:even $("li:even") 获取到的li元素中，选择索引号为偶数的元素

jQuery筛选方法

语法 用法 说明
parent() $("li").parent(); 查找父级，最近一级
parents() $("li").parents("选择器"); 查找指定祖先父级
children(selector) $("ul").children("li") 相当于$("ul>li"),最近一级（亲儿子）
find(selector) $("ul").find("li") 相当于$("ul li"),后代选择器
siblings(selector) $(".first").siblings("li") 查找兄弟节点，不包括自己本身
nextAll([expr]) $(".first").nextAll() 查找当前元素之后所有的同辈元素
prevAll([expr]) $(".last").prevAll() 查找当前元素之前的所有同辈元素
hasClass(class) $('div').hasClass("protected") 检查当前的元素是否含有某个特定的类
eq(index) $("li").eq(2) 相当于$("li:eq(2)"),index从0开始 
$(".son").parent();
$('.nav').children("p").css("color","red");
$('.nav').find("p").css("color","red"); 
$(".content div").eq(index).siblings().hide();
$(".content div").eq(index).show();

jQuery样式操作

jQuery效果

jQuery属性操作

jQuery内容文本值

jQuery尺寸、位置操作

  1. jQuery尺寸

    语法 用法
    width()/height() 取得匹配元素宽度和高度值 只算width/height
    innerWidth()/innerHeight() 取得匹配元素宽度和高度值 包含padding
    outerWidth()/outerHeight() 取得匹配元素宽度和高度值 包含padding、border
    outerWidth(true)/outerHeight(true) 取得匹配元素宽度和高度值包含padding、borde、margin 
      div{
     width: 200px;
     height: 200px;
     background-color: aqua;
     padding: 10px;
     border: 15px solid red;
     margin: 20px;
   } 
	  $("div").width(500)
	  console.log($("div").width()); //500
      console.log($("div").innerWidth());//520
      console.log($("div").outerWidth());//550
      console.log($("div").outerWidth(true));//590
    • 以上参数为空，则是获取相应值，返回的是数字型
    • 如果参数为数字，则是修改相应值。
    • 参数可以不必写单位

  2. jQuery位置

    位置主要有三个：offset()、position、scrollTop()/scrollLeft()

    • offset()

      offset()设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系

      该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。

      可以设置元素的偏移：offset({top:10,left:30})

    • position()

      position方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

    • scrollTop()/scrollLeft()

      scrollTop()方法设置或返回被选元素被卷去的头部或左侧。

jQuery元素操作

jQuery事件

jQuery拷贝对象

如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以用$.extend()方法

语法：

$.extend([deep],target,object1,[objectN])

  1. deep:如果设true为深拷贝，默认为false浅拷贝

  2. target:要拷贝的对象

  3. object1:待拷贝到第一个对象的对象

  4. objectN:待拷贝到第N个对象的对象

  5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象

    image-20220319204116840

  6. 深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象。

    image-20220319211928577

var targetObj={
       id:1
};
	var obj={
        id:1,
	    name:"andy"
     };
  $.extend(targetObj,obj);//浅拷贝
  $.extend(true,targetObj,obj);//深拷贝

jQuery多库共存

jQuery使用$作为表示符，随着jQuery的流行，其他js库也会用这$作为标识符，这样一起使用会引起冲突

需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫多库共存

解决方案：

  1. 把里面的$符号统一改为jQuery。比如jQuery("div")

  2. jQuery变量规定新的名称：$noConflict() var xx=$.noConflict()

     <div></div>
              <script>
                $(function(){
               function $(ele){
                 return document.querySelector(ele);
               }
               console.log(div);//error
               jQuery.each();//right
               var suibian=jQuery.noConflict();
               console.log(suibian("span"));//right
                })
              </script>

jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助jQuery插件完成

  1. jQuery插件库 https://www.jq22.com/
  2. jQuery之家 http://www.htmleaf.com/

jQuery插件使用步骤

  1. 引入相关文件。（jQuery文件和插件文件）
  2. 复制相关html、css、js（调用插件）

常用插件：

Bootstrap JS 插件：

bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件

标签 ,