关于JQuery(附3个案例)

本文详细介绍了JQuery库的功能、特点、选择器、DOM操作、事件处理、动画和Ajax操作,以及如何创建和使用插件。还列举了JQuery在实际项目中的应用场景,如手风琴菜单、滚动祝福墙和元素拖拽。此外,文章提供了JQuery学习资源和经典插件推荐,是学习和理解JQuery的全面指南。
摘要由CSDN通过智能技术生成

简介

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>

image.png

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值