关于JQuery（附3个案例）-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

听说你混的不错

1771

文章

1359976

访问

+关注

分类

暂无分类

日期归档

2024-11(1)

关于JQuery（附3个案例）

发布于2021-03-08 19:52 阅读(1242) 评论(0) 点赞(23) 收藏(4)

简介

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])：设置或获取元素里面的html代码（类似JS的innerHTML）
text([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

移动端的JQ—zepto.js

官网：https://www.runoob.com/manual/zeptojs.html
用法和jq是基本一样的
完全是针对移动端的

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>

(img-ImIR4o4A-1615087309846)(/img/bVcOusk)]

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的部分整理和总结，希望有用，有什么建议欢迎提出哦！
大家一起进步~

原文链接:https://blog.csdn.net/weixin_43842821/article/details/114480677