WEB前端初学者笔记（17）--jQuery的事件和效果

一、jQuery是什么

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

1.如何获取jQuery

下载法

百度jQuery官网进行相应版本下载，或者前往https://code.jquery.com/jquery-3.6.0.js复制代码保存文件。

cdn加速法

百度搜索jQuery即可找到相关网站，复制网站提供的js链接，如

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

npm法

在cmd中使用 npm i jquery的方法下载文件，记得要npm init -y 初始化文本

2.如何使用jquery

选择器

部分常用选择器：

#id	id选择器，$("#id"); 选择指定id标签
.class	类名选择器，$(".class");选择指定类名标签
element	标签选择器，$("element");选择指定标签，是集合
*	通配符选择器，$("*");匹配所有元素
selector1，selector2，selector3	并集选择器，$("selector1，selector2，selector3");匹配所有指定元素
	子代选择器，$("parent>child")；匹配指定父元素下的所有指定子元素
parent child	后代选择器，$("parent child")；匹配指定父元素下的所有指定后代元素
prev+next	相邻兄弟选择器，$("prev+next")；匹配指定兄元素下第一个弟元素
prev~next	兄弟选择器，$("prev next")；匹配指定兄元素下后面所有弟元素

还有其他选择器如

:first，:odd，:even 等

可以自行前往:not(selector) | jQuery API 3.2 中文文档 | jQuery API 在线手册 (cuishifeng.cn)网站搜索学习

部分操作代码如下所示

​
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
  <div id="div1">click me</div>
  <ul>
    <li class="liC">1</li>
    <li class="liC">2</li>
    <li>3</li>
    <li class="liC">4</li>
    <li>5</li>
    <li>6</li>
    <li class="liC">7</li>
    <li class="liC">8</li>
  </ul>
<ul></ul>
  <input type="text">
  <input type="password">
</body>
</html>
<script>
  const div1=document.getElementById('div1')//js获取dom
 // $('#div1')//jquery获取dom
  
  // js dom和jq dom可以相互转换
  console.log($(div1))//js dom ==>jq dom
  console.log($('#div1')[0])//jq dom==>js dom id选择器
  
  console.log($('.liC'))//类名选择器
  console.log($('ul'))//标签选择器
  console.log($('ul>li'))//子代选择器
  console.log($('ul,div'))//并集选择器
  console.log($('#div1+ul'))//相邻兄弟选择器
  console.log($('#div1~ul'))//兄弟选择器
 
  
</script>

二、jQuery事件

1.ready（fn）

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。

请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

2.on

在选择元素上绑定一个或多个事件的事件处理函数。

.on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。

也就是说给指定元素上添加一个事件

代码如下

 $('#div1').on('mousemove',function () {
    console.log('move')
  })//鼠标移动到上面的时候
  $('#div1').on('mousedown',function () {
    console.log('down')
  })//鼠标点击的时候

 

3.off

在选择元素上移除一个或多个事件的事件处理函数。

off() 方法移除用.on（）绑定的事件处理程序。

也就是给指定元素删除一个事件

$('#div1').off('mousedown','mousemove')
//删除div1的mousedown和mousemove事件

4.one

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

 $('ul').one('mousemove',function () {
    console.log('ulmove')
  })//是一次性的事件，所以把定义和删除合二为一，更为便捷

5.hover

hover()方法用于模拟光标悬停事件。当鼠标移动到元素上面时会发生的事件

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

6.blur

当元素失去焦点时，发生 blur 事件。

 $('input[type="text"]').blur(function () {
    $('#div1').css('color','yellow')//设置单行css样式时的格式
    $('#div1').css({
      'color':'red',
      'background':'lightblue',
      "width":"100px"
    })//设置多行css样式时的格式
     
  })

三、jQuery效果

基本格式都为

元素.效果([速度]，[切换效果]，[动画完成后执行的函数])

部分效果如下：

1.show

显示隐藏的匹配元素。

2.hide

隐藏显示的元素

3.toggle

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

4.fadeToggle

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeIn通过不透明度的变化来实现所有匹配元素的淡入效果

fadeOut通过不透明度的变化来实现所有匹配元素的淡出效果，

fadeTo把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，

5.slideToggle

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

slideDown则是向下增大，来动态地显示所有匹配的元素，

slideDown则是向上减小，来动态地隐藏所有匹配的元素，