java后端快速入门jQuery

jq入口函数

法一:
$(function () {       
 ...  // 此处是页面 DOM 加载完成的入口 
  }) ; 
法二：
  $(document).ready(function(){    
  ...  //  此处是页面DOM加载完成的入口 
  }); 
  
  注意：推荐第一种

jq对象和dom对象转换

DOM 对象转换为 jQuery 对象： $(DOM对象)
							$('div')   
jQuery 对象转换为 DOM 对象（两种方式）
		$('div') [index]       index 是索引号

jq基础选择器

jq层级选择器

jq筛选选择器（重点）

closest(“tr”)，在该元素的dom树上面找最近的tr元素

注意：$(this).closest("tr")表示在当前元素的祖先元素中查找最近的<tr>元素。它会向上遍历 DOM 树，直到找到最近的 <tr> 元素或遍历到根节点为止。如果本身有这个tr，他会返回本身元素

parents(“里面写入你寻找的元素”) 方法返回被选元素的所有祖先元素

find(”可有可无“) 方法返回被选元素的后代元素，一路向下直到最后一个后代。

siblings(“li”):兄弟中必须是li标签（重点）

推荐使用下面的用法来选择元素

隐式迭代

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。

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

操作css

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。

1.参数只写属性名，则是返回属性值
	$(this).css(''color''); 
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性名必须加引号，值如果是数字可以不用跟单位和引号
	$(this).css(''color'', ''red''); 
	$(this).css(''height'', ''100px''); 
	也可以是
	$(this).css(''height'', 100); 
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，
	$(this).css({ "color":"white","font-size":"20px"}); 
也可以是
	$(this).css({ 
		color:"white",
		font-size:20
	}); 

# 设置类样式

添加类
	$(“div”).addClass(''current''); 
移除类
	$(“div”).removeClass(''current''); 
切换类
	$(“div”).toggleClass(''current''); 
	
注意：
	原生 JS 中 className 会覆盖元素原先里面的类名。
	jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
	这个addClass相当于追加类名 不影响以前的类名

jq动画

show（显示）

show([speed,[easing],[fn]])  
显示参数
（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

hide（显示隐藏）

hide([speed,[easing],[fn]]) 
** 隐藏参数**
（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

toggle（显示交替）

toggle([speed,[easing],[fn]]) 
切换参数
（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
建议：平时一般不带参数，直接显示隐藏即可。

hover（事件切换）

hover([over,]out) 
（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
（3）如果只写一个函数，则鼠标经过和离开都会触发它
原来
         // 鼠标经过
             $(".nav>li").mouseover(function() {
                  $(this) jQuery 当前元素  this不要加引号
                  
                 $(this).children("ul").slideDown(200);
                 //滑动效果，下拉选项更加丝滑
             });
             // 鼠标离开
             $(".nav>li").mouseout(function() {
                 $(this).children("ul").slideUp(200);
             });

简化：
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
             $(".nav>li").hover(function() {
                 $(this).children("ul").slideDown(200);
             }, function() {
                 $(this).children("ul").slideUp(200);
             });
继续简化：
// 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                $(this).children("ul").slideToggle();
            });

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y7Yijats-1691753948419)(C:\Users\DELLPC\AppData\Roaming\Typora\typora-user-images\image-20230809173202453.png)]

stop是为了停止动画效果，以免动画混乱。作用是，结束上一次动画，开始现在的新动画

上滑、下滑

1.下滑效果语法规范

slideDown([speed,[easing],[fn]])

下滑效果参数
（1）参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

2.上滑效果语法规范

slideUp([speed,[easing],[fn]])

上滑效果参数
（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.滑动切换效果语法规范

slideToggle([speed,[easing],[fn]])

滑动切换效果参数

（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

设置或获取元素固有属性prop（）（一般用于false、true）

所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。
true和false不用加双引号
获取属性语法
prop(''属性'') 

设置属性语法
prop(''属性'', ''属性值'') 

设置或获取元素自定义属性值 attr()（随便的属性都可以）

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

获取属性语法
attr(''属性'')      // 类似原生 getAttribute() 
设置属性语法
attr(''属性'', ''属性值'')   // 类似原生 setAttribute() 

数据缓存 data()

存入数据，这个数据是存在缓存中，在html里面不会显示

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

附加数据语法
 data(''name'',''value'')   // 向被选元素附加数据   
 
获取数据语法
date(''name'')             //   向被选元素获取数据   

同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型
注意如果是h5的自定义属性来取attr和data有区别，例如 data-index

attr("data-index")
data("index")
用data取不需要前面的data-

jq获取文本内容

1.普通元素内容 html()（ 相当于原生inner HTML)//
	html()             // 获取元素的内容 

	html(''内容'')   // 设置元素的内容 

2.普通元素文本内容 text() (相当与原生 innerText)//往获取的元素的里面进行修改
	text()                     // 获取元素的文本内容 

	text(''文本内容'')   // 设置元素的文本内容 

3.表单的值 val()（ 相当于原生value)
	val()              // 获取表单的值 

	val(''内容'')   // 设置表单的值 

遍历元素（购物车累计求和）

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。

语法1：

 $("div").each(function (index, domEle) { xxx; }）   

each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法2：

$.each(object，function (index, element) { xxx; }） 

$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容

遍历数组：

遍历对象：

创建元素

0.创建元素
var str=$(''<li></li>'');  //创建li元素
1.内部添加（放在前面）把内容放入匹配元素内部最后面，类似原生 appendChild
		element.append("内容");里面可以存放字符串或者变量
2.内部添加（放在后面）把内容放入匹配元素内部最前面。
 		element.prepend(''内容'')     
3.外部添加
element.after(''内容'')        //  把内容放入目标元素后面 

element.before(''内容'')    //  把内容放入目标元素前面  
注意：
	① 内部添加元素，生成之后，它们是父子关系。
	② 外部添加元素，生成之后，他们是兄弟关系。

删除元素

element.remove()   //  删除匹配的元素（本身）（自杀） 
element.empty()    //  删除匹配的元素集合中所有的子节点 
element.html('''')   //  清空匹配的元素内容 
注意：
	① remove 删除元素本身。
	② empt() 和 html(’’’’) 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

案例（删除购物车：批量删除，单独删除，全部删除）

事件

事件ready(fn)

当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。通俗的来讲就是当页面加载完时就会执行此函数事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

$(document).ready(function(){
  // 在这里写你的代码...
});

使用 $(document).ready() 的简写(最常用)，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。

$(function($) {
  // 你可以在这里继续使用$作为别名...
});

单击事件 click([[data],fn])

触发每一个匹配元素的click事件。

这个函数会调用执行绑定到click事件的所有函数。

//为id为btn的按钮添加单击事件
 $("#btn").click(function(){
          	alert("触发单击事件");
          })
//单击p后，该p被隐藏
$("p").click( function () { $(this).hide(); });

鼠标复合事件（hover([over,]out)）

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

$("td").hover(
   //鼠标悬停的表格加上特定的类
  function () {
    $(this).addClass("hover");//不同于js，addClass不会覆盖原来的类，而是可以两个类共用
  },
     //鼠标移出的表格加删除类
  function () {
    $(this).removeClass("hover");
  }
);

双击事件 dblclick([[data],fn])

鼠标移入事件 mousemove([[data],fn])

鼠标移出事件 mouseout([[data],fn])

键盘按下事件 keydown([[data],fn])

键盘松开事件 keyup([[data],fn])

元素获得焦点 focus([[data],fn])

blur()

说明：当元素失去焦点时触发 blur 事件。

hover

在 jQuery 中，hover 是一个便捷的方法，用于同时绑定鼠标悬停（mouseenter）和鼠标离开（mouseleave）事件。

mousedown和mouseup

鼠标的点击和松开

注意：

mousemove 和 mouseenter 是 jQuery 中用于处理鼠标移动的两个事件，它们有一些区别。

1. mousemove 事件：
   • mousemove 事件在鼠标指针在元素上移动时触发。
   • 当鼠标在元素内移动时，mousemove 事件会持续触发，即使鼠标指针没有离开元素。
   • mousemove 事件可以用于实时追踪鼠标指针位置的变化，或者执行需要根据鼠标位置实时更新的操作。
2. mouseenter 事件：
   • mouseenter 事件在鼠标指针从元素外部进入元素内部时触发。
   • mouseenter 事件只在鼠标指针进入元素时触发一次，不会持续触发。
   • mouseenter 事件常用于在鼠标进入元素时执行特定的操作，例如显示菜单、显示提示等。

需要注意的是，当鼠标指针在元素内部移动时，mousemove 事件会持续触发，而 mouseenter 事件不会再次触发。只有当鼠标指针从元素外部进入元素时，mouseenter 事件才会触发一次。

以下是示例代码，演示了如何使用这两个事件：

javascript

$(document).ready(function() {
  $('.my-element').mousemove(function(event) {
    // 鼠标在元素上移动时执行的代码
    console.log('鼠标位置：', event.pageX, event.pageY);
  });

  $('.my-element').mouseenter(function() {
    // 鼠标进入元素时执行的代码
    console.log('鼠标进入元素');
  });
});

在这个示例中，.my-element 是要绑定事件的元素的选择器。当鼠标在元素上移动时，mousemove 事件会触发，并在控制台打印鼠标的位置。而当鼠标进入元素时，mouseenter 事件会触发，并在控制台打印一条消息。

通过了解 mousemove 和 mouseenter 事件的区别，你可以根据具体需求选择适当的事件来处理鼠标移动的情况。

事件注册

element.事件(function(){})

$(“div”).click(function(){  事件处理程序 })  

其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

事件处理 on() 绑定事件

主要功能就是通过on来动态绑定事件，如果这事件是html里面没有的，我们通过js生成的，那么我们可以通过on来绑定元素。

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

element.on(events,[selector],fn)     

1.events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。

2.selector: 元素的子元素选择器 。

3.fn:回调函数 即绑定在元素身上的侦听函数。

on() 方法优势1：

1.可以绑定多个事件，多个处理事件处理程序

 $(“div”).on({
 mouseover: function(){},    
 mouseout: function(){},   
 click: function(){}  
 }); 

​ 2.如果事件处理程序相同

 $(“div”).on(“mouseover mouseout”, function() {    				  		$(this).toggleClass(“current”);   
 }); 

on() 方法优势2：

可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$("ul li").click();是通过隐式调用，把所有的li全部都绑定了点击事件，
$('ul').on('click', 'li', function() { 只绑定了ul，但是把事件委派给了ul里面的li，最后只绑定了一个ul就完成了操作    
alert('hello world!'); 
});   点击li后，ul才会触发事件function

在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们

on() 方法优势3：

动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件

动态绑定，是我们通过js添加的标签，我们可以通过on来进行绑定事件，就是html原来没有的。

 $(“div").on("click",”p”, function(){      
 alert("俺可以给动态生成的元素绑定事件") 
  });  
 $("div").append($("<p>我是动态创建的p</p>"));  
 

事件解绑

off() 方法可以移除通过 on() 方法添加的事件处理程序。

$("p").off() // 解绑p元素所有事件处理程序 
 
$("p").off( "click")  // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名 
 
$("ul").off("click", "li");   // 解绑事件委托 

如果有的事件只想触发一次， 可以使用 one() 来绑定事件。

自动触发事件

默认事件的意思是比如：input里面的光标闪烁