关于jquery:关于JQuery

简介

JQuery 是一个疾速的，小的，丰盛的 JavaScript 库（类指函数，工具的汇合）。使的 HTML 文档遍历和操作，事件处理，动画和 Ajax 等操作更加简略。JQuery 官网：https://jquery.com/
JQuery 文档：https://www.bejson.com/apidoc/jquery/

JQuery 特点

 轻量，开源，收费，易于学习
兼容性解决
弱小的选择器
链式操作
便捷的 DOM 操作
牢靠的事件机制
封装了简略易用的 ajax 操作
丰盛的插件

JQuery 筹备工作

 下载 JQuery 的形式：官网下载
                  npm 下载
                  CDN 形式（间接引入，不必下载）JQuery 版本：2.0 以上的版本不兼容 IE8 及以下的版本

JQuery 兼容性引入形式：<!--chrome firefox Safari opera IE9+ -->
<!--[if gt IE 8]> -->
<script src='../jquery-3.5.1.min.js'></script>
<!-- <![endif]-->

<!-- IE8 以及以下 -->
<!--[if lte IE 8]>
<script src='../jquery-1.12.4.min.js'></script>
<![endif]-->

JQuery 的应用

  <script src='../jquery-3.5.1.min.js'></script>
  <script>
    JQuery 入口
    $(document).ready(function(){...})
    
    JQuery 简写入口
    $(function(){...})
  </script>

ready 示意页面中 DOM 加载结束后触发
load 示意页面中所有所有加载结束后触发

JQuery 的 dom 对象

 获取 dom 对象：var xxx=$('xxx')
应用 JQuery 选择器获取的对象，不是原生的 DOM 对象，称之为 JQuery dom 对象

原生 dom 转为 JQuery dom
$(原生 dom) --> JQuery dom

JQuery dom 转为原生 dom
JQuery dom[下标] --> 原生 dom

JQuery 的全局对象

$ 相当于 JQuery
$() 等同于 JQuery()
$('xxx'（字符串）)：获取对象
$('<xxx>'（含 <> 的字符串）)：创建对象

JQuery 选择器

 根本选择器：ID 选择器：$('#xxx')
class 选择器：$('.xxx')
标签名选择器：$('xxx')
全局选择器：$('*')
组合选择器：$('xxx.xxx')
多个选择器：$('xxx,xxx')

层级选择器：后辈元素：选择器 选择器：$('xxx xxx')
子元素：选择器 > 选择器：$('xxx>xxx')
紧邻的兄弟元素：选择器 + 选择器：$('xxx+xxx')
前面所有的兄弟元素：选择器~ 选择器：$('xxx~xxx')

筛选选择器：第一个元素：$('xxx:first')
最初一个元素：$('xxx:last')
第 n 个元素：$('xxx:eq(n)')
大于 / 小于 n 的元素 $('xxx:gt/lt(n)') 
奇数个的元素：$('xxx:odd')
偶数个的元素：$('xxx:even')
从 xxx 中排除掉 xx 的选择器：$('xxx:not(xx)')
题目标签的元素：$(':header')
获取焦点的元素：$(':focus')
获取根元素：$(':root')
锚点正在指向的元素：$(':target')
正在执行动画的元素：$(':animated')

内容选择器：蕴含文本 xx 的元素：$('xxx:contains('xx')')
含有 xx 选择器后辈元素的元素（不蕴含 xx 选择器自身的元素）：$('xxx:has('xx')')
不能有内容和子元素的元素：$('xxx:empty')
要么有内容，要么有子元素的元素（可作为父元素的元素）：$('xxx:parent')

可见性选择器：可见的元素：$(':visible')
不可见的元素：$(':hidden')

属性选择器：xxx 中 xx 属性的元素：$('xxx[xx]')
xxx 中 xx 属性等于 n 的元素：$('xxx[xx=n]')
xxx 中 xx 属性不等于 n 的元素：$('xxx[xx!=n]')
xxx 中 xx 属性的属性值以 n 结尾的元素：$('xxx[xx^=n]')
xxx 中 xx 属性的属性值以 n 结尾的元素：$('xxx[xx$=n]')
xxx 中 xx 属性的属性值蕴含 n 的元素：$('xxx[xx*=n]')
xxx 中含 xx 属性和 n 属性的元素：$('xxx[xx][n]')

子元素选择器：抉择一个是所有兄弟元素外面第一个的 xxx 元素：$('xxx:first-child')
抉择一个是所有兄弟元素外面最初一个的 xxx 元素：$('xxx:first-child')
抉择一个是所有兄弟元素外面正向数第 n 个的 xxx 元素：$('xxx:nth-child(n)')
抉择一个是所有兄弟元素外面反向数第 n 个的 xxx 元素：$('xxx:nth-last-child(n)')
抉择一个没有兄弟元素的 xxx 元素：$('xxx:only-child')
抉择一个是所有兄弟元素外面雷同类型的第一个 xxx 元素：$('xxx:first-of-type')
抉择一个是所有兄弟元素外面雷同类型的第 n 个 xxx 元素：$('xxx:nth-of-type(n)')
抉择一个是所有兄弟元素外面仅含这一个类型的 xxx 元素：$('xxx:only-of-type')

表单选择器：所有的表单控件：input,select,textarea,button...
$(':input')
选中表单中的文本框的元素：$(':text')
选中表单中的明码框的元素：$(':password')
选中表单中的单选框的元素：$(':radio')
选中表单中的复选框的元素：$(':checkbox')
选中表单中的文件框的元素：$(':file')
选中表单中的按钮的元素：$(':button')
选中表单中的提交性能按钮的元素：$(':submit')
选中表单中的重置性能按钮的元素：$(':reset')

表单对象选择器:
选中表单中禁用性能的元素：$(':disabled')
选中表单中失常性能的元素：$(':enabled')
选中表单中被选中的元素：$(':checked')
选中表单中被抉择的元素：$(':selected')

混同选择器：用于含一些特殊符号的选择器：$.escapeSelector(selector)

JQuery 属性操作

 属性：attr,prop
获取属性的值：xxx.attr('xx'); 操作所有的属性（自定义和内置）xxx.prop('xx'); 操作 html 元素内置的属性

批改属性的值：xxx.attr('xx','批改的值')
xxx.prop('xx','批改的值')

增加属性：xxx.attr('新的属性','新的属性值')
xxx.prop('新的属性 ( 内置的属性)','新的属性值')

删除属性：xxx.removeAttr('删除的属性值')
xxx.removeProp('删除的属性值')（不能删除 html 元素上的属性）CSS 类的属性操作：增加一个 class 值：addClass()
移除一个 class 值：removeClass()
切换一个 class 值：toggleClass()
判断是否有某个 class 值：hasClass()
获取 css 的属性值：xxx.css('属性名')
设置 css 的属性值：xxx.css('属性名','属性值') / xxx.css({属性名：属性值})
获取元素地位的间隔：xxx.offset().left/top：获取元素在页面的坐标（可读可写）xxx.position().left/top：获取元素在第一个定位的先人元素内的坐标（只读）获取滚动条的滑动间隔：xxx.scrollTop()：滚动条间隔顶部的滚动间隔
xxx.scrollLeft()：滚动条间隔右边的滚动间隔


HTML 的属性操作：html()：设置或获取元素外面的 html 代码（相似 JS 的 innerHTML）text()：设置或获取元素外面的文本内容（相似 JS 的 innerText）val([value])：设置或获取表单控件里的值

获取尺寸的操作：（括号中写值能够设值）width()/height()（内容的尺寸）innerWidth()/innerHeight()（内容的尺寸 +padding）outerWidth()/outerHeight()（盒子的尺寸）

JQuery 筛选操作

 过滤操作：xxx.first()
xxx.last()
xxx.eq()
xxx.not()
xxx.filter('xx')：只选中选择器为 xx 的元素
xxx.slice(n) / xxx.slice(x,y)：选中从 n 开始的元素 / 选中从 x 到 y 范畴的元素（不包含 y）xxx.has()

查找操作：选取子元素中为 xx 的元素：xxx.children('xx')
选取后辈元素中为 xx 的元素：xxx.find('xx')
选取 xxx 的父元素：xxx.parent()
选取 xxx 的所有先人元素：xxx.parents()
选取 xxx 的所有先人元素（范畴是选择器 xxx 到选择器 xx 的元素（不包含 xx））：xxx.parentsUntil('xx')
选取 xxx 第一个定位的先人元素：xxx.offsetParent()
选取后一个兄弟元素 / 选取后一个为 xx 的兄弟元素：xxx.next() / xxx.next('xx')
选取前面所有的兄弟元素：xxx.nextAll()
选取前面所有的兄弟元素（直到选择器为 xx 的元素）：xxx.nextUntil('xx')
选取前一个兄弟元素：xxx.prev()
选取后面所有的兄弟元素：xxx.prevAll()
选取后面所有的兄弟元素（直到选择器为 xx 的元素）：xxx.prevUntil('xx')
选取所有的兄弟元素（前后）：xxx.siblings()
从所有的先人元素和自身外面找出第一个合乎 xx 的元素：xxx.closest('xx')

串联：xxx.find('xx').add()：把选中的 xx 元素退出到以后汇合
xxx.find('xx').addBack()：把选中 xx 的 xxx 元素退出到以后汇合
end()：返回最初一次破坏性操作之前的 dom（还原 dom 之前的状态）（破坏性操作：查找操作，过滤操作...）contents()：返回所有子节点的汇合

JQuery DOM 对象的办法

 遍历：each,map
each
xxx.each(function(index,ele){...})
map（会返回一个新的汇合）xxx.map(function(index,ele){...})

xxx.length()：汇合中元素的数量
xxx.index()：返回该元素在父元素的索引地位
xxx.get()：返回 xxx 元素（可指定索引，不指定索引则返回全副）xxx.is('xx')：判断该 JQdom 是否满足某个 xx 条件，返回布尔值

JQuery DOM 操作

 外部插入：（xx 插到 xxx 里）后插：('xxx').append('xx')
('xx').appendTo('xxx')
前插：('xxx').prepend('xx')
('xx').prependTo('xxx')

内部插入：（xx 插到 xxx 里）后插：('xxx').after('xx')
('xx').insertAfter('xxx')
前插：('xxx').before('xx')
('xx').insertBefore('xxx')

包裹：xxx.wrap('xx')：xx 离开包裹 xxx 
xxx.wrapAll('xx')：xx 对立包裹 xxx
xxx.wrapInner('xx')：xx 在 xxx 外面生成包裹
xxx.unwrap()：xxx 去掉包裹（不仅能去掉新生成的包裹，还能去掉原先就有的包裹）替换：xxx.replaceWith('xx')：xx 替换掉 xxx
xx.replaceAll('xxx')：xx 替换掉 xxx

删除：xxx.empty()：清空 xxx 的内容（仍保留其在 dom 中所占的地位）xxx.remove()：删除 xxx 的内容（但不会保留其所占的地位。复原后之前增加的事件都生效了）xxx.detach()：删除 xxx 的内容（但复原后之前增加的事件还会失效）克隆：xxx.clone()：克隆一个 xxx

JQuery 事件

 事件绑定：on 绑定事件 / 多个事件：xxx.on('xxx',fn) / xxx.on({xxx:fn,xxx:fn})
事件仅仅绑定一次：xxx.one('xxx',fn)
把事件名作为办法：鼠标悬浮：xxx.mouseover(fn)
                 鼠标来到：xxx.mouseout(fn)
                 键盘按下：xxx.keypress(fn)
                 ...
                 
解除事件绑定：xxx.off('事件名') 

事件委派：xxx.on('事件','委派的对象',fn)

管制事件触发：trigger('事件名')（先前要定义好该事件执行的函数）（返回的是 jqdom，能间断调用）（可触发元素自带事件）triggerHandle('事件名')（无奈触发元素自带事件（submit,focus...），不能间断调用）事件列表：ready：页面中 DOM 加载结束
xxx.focusin(fn)：文本框聚焦触发（绑定给输入框的父元素 xxx）xxx.focusout(fn)：文本框失焦触发（绑定给输入框的父元素 xxx）xxx.mouseenter(fn)：代替 mouseover（举荐应用）xxx.mouseleave(fn)：代替 mouseout（举荐应用）xxx.hover(fn)：mouseenter 和 mouseleave 的汇合

事件对象：event.pageX：鼠标箭头的 x 坐标
event.pageY：鼠标箭头的 y 坐标
event.target：以后触发事件的元素
event.which：键盘按键的 ASCII 码
event.type：事件类型（事件名称）event.preventDefault()：阻止默认事件产生
event.stopPropagation()：阻止事件冒泡
return false：既可阻止事件冒泡，又可阻止默认事件产生 

JQuery 动画

 根本成果：hide(过渡工夫,callback)：暗藏
show(过渡工夫,callback)：显示
toggle(过渡工夫,callback)：切换（相应的 css 属性变动：透明度，元素大小相干的款式（padding,border,width/height,margin））滑动成果：slideDown(过渡工夫,callback)：滑动显示
slideUp(过渡工夫,callback)：滑动暗藏
slideToggle(过渡工夫,callback)：滑动切换（垂直方向上的变动：height/padding-top/margin-top）淡入淡出成果：fadeIn(过渡工夫,callback)：淡入
fadeOut(过渡工夫,callback)：淡出
fadeToggle(过渡工夫,callback)：淡入淡出切换
fadeTo(过渡工夫, 透明度,fn)：扭转透明度（透明度的变动 / 突变）自定义动画：animate({属性名：属性值,...}, 过渡工夫,callback)
stop()：使动画进行
finish()：使动画实现
delay()：提早动画的执行

动画设置：JQuery.fx.off=true：敞开页面中的所有动画
JQuery.fx.interval：设置动画显示的帧数

动画队列：xxx. 动画 1. 动画 2...（顺次执行）JQuery 动画与 CSS3 动画
兼容性：CSS3 的动画和过渡须要 IE9+，JQuery 可应用 1.x 版本的
CSS3 的动画或者过渡必须给元素指定具体的 CSS 属性值
CSS3 的过渡动画要与 transition 属性配合

JQuery Ajax

 疾速申请办法：$.get('url',fn(data){},[dataType])
$.post('url',[data],fn(data){},[dataType]) 

ajax 办法：$.ajax('url',（申请地址）type:'get/post',（申请形式）data:{}/'',（发送的数据）async:true,（是否异步）dataType:'json'（或其余类型）,（响应的内容格局）success:fn(data){},（响应胜利的回调）error:fn(err){}（响应失败的回调）)

表单办法：xxx.serialize()：把表单 xxx 中有 name 属性的表单控件的值拼接成一个字符串

JQuery 工具办法

 数组：$.each(array,fn(index,item){})：遍历数组
$.grep(array,fn(index,item){})：过滤数组（可返回一个过滤后的数组）$.map(array,fn(index,item){})：从数组取出信息，会返回新的汇合
$.makeArray(类数组对象)：把类数组对象转换为纯数组
$.inArray(ele,array)：判断元素在数组中的地位（不存在返回 -1）$.merge(array1,array2)：合并数组
xxx.toArray()：把 JQuerydom(xxx) 转为纯数组

函数：$.proxy(fn, 要指向的对象)：改编函数内的 this 指向

类型判断：$.type()：判断类型
$.isFunction()：判断是否为函数办法
$.isEmptyObject()：判断是否为空对象
$.isPlainObject()：判断是否为纯对象（数组就不是纯对象（构造函数是 Object 是纯对象））$.isWindow()：判断是否为 window 对象
$.isNumeric()：判断是否为数字类型

字符串：$.trim()：取出（去掉）两边的空格
$.param()：（对象）序列化成字符串

查看 JQuery 版本：JQuery.fn.jquery
$.fn.jquery

JQuery 插件

 相干网站：官网：http://plugins.jquery.com
JQuery 插件库：https://www.jq22.com/
JQuery 之家：http://www.htmleaf.com/
JQuery-school：http://www.jq-school.com/

经典插件：select2（下拉框搜寻插件）：https://select2.org/
datetimepicker（工夫日期插件）：https://xdsoft.net/jqplugins/datetimepicker/
fullpack（全屏滚动插件）：https://alvarotrigo.com/fullPage/zh/
lazyload（图片懒加载）：https://appelsiini.net/projects/lazyload/
layer（弹窗插件）：http://layer.layui.com/?alone
nice validator（表单验证）：https://validator.niceue.com
JQuery-easing（JQ 动画成果）：http://gsgd.co.uk/sandbox/jquery/easing/

自定义插件：给 JQuery DOM 对象扩大办法：$.fn.extend({办法名:function(){...}}) 
                         $.fn. 办法名 =function(){...}                           
调用：$('xxx'). 办法名
给 JQuery 对象自身扩大办法：$.extend({办法名:function(){...}}) 
调用：$. 办法名

JQuery UI：https://jqueryui.com/（很少用了）JQuery Mobile：https://jquerymobile.com/（很少用了）sizzle：https://github.com/jquery/sizzle/wiki

zepto：http://zeptojs.com（与 zepto 相似）

JQuery 的一些案例

1. 手风琴式菜单膨胀开展：成果：开展一个子菜单，另一个子菜单主动膨胀 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {font: 16px;}

    ul {list-style: none;}

    .nav-list {
      width: 220px;
      margin-left: 10px;
      border-bottom: 1px solid #ccc;
    }

    .nav-list ul{display: none;}

    .nav-list h3 {
      padding: 10px 20px;
      background: #333;
      color:#fff;
      line-height:18px;
      border-top:1px solid #ccc;
      cursor: pointer;
    }

    .nav-list li{
      padding:10px 20px;
      cursor: pointer;
      background: #f5f5f5;
      color:rgb(51, 100, 190);
      border:1px solid #ccc;
      border-bottom: none;
    }

    .nav-list li:hover{background: #ccc;}
  </style>
</head>
<body>
  <div class='nav-list'>
    <h3> 日漫 </h3>
    <ul>
      <li> 名侦探柯南 </li>
      <li> 樱桃小丸子 </li>
      <li> 蜡笔小新 </li>
      <li> 家庭教师 </li>
      <li> 妖精的尾巴 </li>
    </ul>
    <h3> 美剧 </h3>
    <ul>
      <li> 良医 </li>
      <li> 旺达幻视 </li>
      <li> 势力的游戏 </li>
      <li> 无耻之徒 </li>
    </ul>
    <h3> 国漫 </h3>
    <ul>
      <li> 刺客伍六七 </li>
      <li> 哪吒 </li>
      <li> 灵笼 </li>
    </ul>
  </div>

  <script src="./jquery-3.5.1.min.js"></script>
  <script>
    $(function () {$('.nav-list h3').click(function(){$(this).next('ul').slideToggle().siblings('ul').slideUp();})
    })

  </script>
</body>
</html>

2. 滚动祝愿墙：成果：在可视范畴内的最初一个淡出，随后总体的最初一个增加到祝愿墙的后面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> 祝愿语录 </title>
    <style>
        body{background:linear-gradient(45deg,#da60d3,#008c8c);
        }
        h1
        {
            margin-left:-10px;
            margin-top: -10px;
        }
      .wrapper {
        margin: 100px auto;
        width: 800px;
        height: 400px;
      }

      .p1 {
        width: 800px;
        height: 390px;
        overflow: hidden;
        text-align: center;
      }

      .zhufu {
        margin-bottom: 10px;
        font-size: 18px;
      }

      .zhufu img {
        width: 25px;
        height: 25px;
        margin: 5px;
        vertical-align: middle;
        border-radius: 50%;
        box-sizing: border-box;
      }

      .zhufu span {
        color: #f40;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1> 一些人的祝愿 </h1>
      <div class="bd"></div>
      <div class="p1">
        <div class="zhufu">
          ![](imgs/1.jpg) 匿名网友 A：祝贺你按时长大！叮！！！</div>
        <div class="zhufu">
          ![](imgs/2.jpg) 匿名网友 B：往年又是 <del>20</del> 18
          岁的生日呢，永远青春喔！！！</div>
        <div class="zhufu">
          <img
            src="imgs/3.jpg"
          /> 匿名网友 C：生存清朗，万物可恶，而你又长大了！！！</div>
        <div class="zhufu">
          ![](imgs/4.jpg) 匿名网友 D：明天是你来到地球察看人类的第 <del
            >20</del
          >
          18 天！！！</div>
        <div class="zhufu">
          <img
            src="imgs/5.jpg"
          /> 匿名网友 E：愿你每一岁都能奔波在本人的酷爱里，生日快乐！！！</div>
        <div class="zhufu">
          ![](imgs/6.jpg) 匿名网友 F：Anaway,you're almost a year away
          from retirement！！！</div>
        <div class="zhufu">
          ![](imgs/lhr.jpg)<span> 刘昊然 </span
          >：生日快乐，xxx！记得放弃对我的喜爱喔！</div>
        <div class="zhufu">
          ![](imgs/cfy.jpg)<span> 陈飞宇 </span
          >：丫头，生日快乐！记得持续喜爱我！！！</div>
        <div class="zhufu">
            ![](imgs/hyt.jpg)<span> 胡一天 </span
            >：十八一轮回, 明天你几岁？勉强 18 吧！！！</div>
        <div class="zhufu">
            ![](imgs/hj.jpg)<span> 何炅 </span
            >：敌人请听好，祝你生日快乐！！！</div>
        <div class="zhufu">
            ![](imgs/zxc.jpg)<span> 张新成 </span
            >：降级打怪，level+1  明天的总 level 为 18！！！</div>
        <div class="zhufu">
            ![](imgs/zyj.jpg)<span> 张雨剑 </span
            >：打搅一下，来为你这个小可爱送上生日祝愿！！！</div>
        <div class="zhufu">
            ![](imgs/wje.jpg)<span> 王嘉尔 </span
            >：愿你每一天都能奔跑在本人的酷爱里！！！</div>
        <div class="zhufu">
            ![](imgs/hcy.jpg)<span> 华晨宇 </span
            >：祝贺你，入驻这个世界第 18 个年头！！！</div>
        <div class="zhufu">
            ![](imgs/gxt.jpg)<span> 关晓彤 </span
            >：所谓 20 岁，只是心里住着两个 10 岁的小孩吧。不过我深信你有一个 10 岁，一个 8 岁的。</div>
        <div class="zhufu">
            ![](imgs/lq.jpg)<span> 李沁 </span
            >：生日快乐啊，咱们持续一起美上来吧！！！</div>
      </div>
    </div>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
      $(document).ready(function () {$(".zhufu:gt(8)").hide();  // 确保页面显示 8 个祝愿
        setInterval(function () {$(".zhufu").eq(8).fadeOut(600,function()
          {$(".zhufu").last().prependTo(".p1").delay(500).slideDown(500);
          })
        }, 2000);
      });
    </script>
  </body>
</html>

3. 元素拖拽：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
      .item{
        width:100px;
        height:100px;
        background: red;

      }
  </style>
</head>
<body>
  <div class='item'>
  </div>

  <script src="./jquery-3.5.1.min.js"></script>
  <script>
    $(function () {$('.item').mousedown(function(e){$(this).css('opacity','0.6');
        // 鼠标在元素上的地位
        var offsetX=e.pageX-$(this).offset().left;
        var offsetY=e.pageY-$(this).offset().top;

        // 鼠标挪动
         $(this).mousemove(function(e){
            // 获取鼠标地位
            var x=e.pageX-offsetX;
            var y=e.pageY-offsetY;

            // 扭转元素的地位
            $(this).offset({
              left:x,
              top:y
            })

         })
       }).mouseup(function(){$(this).css('opacity','1');
        // 解除 mousemove 事件
        $(this).off('mousemove');
       })
    })

  </script>
</body>
</html>

以上是对 JQuery 的局部整顿和总结，心愿有用，有什么倡议欢送提出哦！
大家一起提高~