5 JQuery

一、什么是JQuery

1.1 JQuery 介绍

JQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使像HTML文档的遍历和操作，事件处理，动画和Ajax的东西简单得多，一个易于使用的API，适用于众多浏览器。jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。

Write Less Do more

1.2 资料

官网 https://jquery.com/
API 手册 https://jquery.cuishifeng.cn/

1.3 JQuery 使用方法

1.3.1 下载Jquery库

1.3.2 在线CDN引入

1.3.3 第一个JQuery程序

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="/js/jquery-3.6.0.js">script>
head>
<body>
    <div id="box" style="border: 1px solid;width: 200px;height: 40px">div>
    <script>
        $( function () {
            // alert('cao')
            //var obj = document.getElementById("box");
            //obj.style.backgroundColor="red";
            $("#box").css('background-color','yellow').width(1000);
        });
    
 
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

二、JQuery 选择器

jquery 选择元素的方法就是css选择器，除外还提供了更加灵活的选择方法。

2.1 常用选择器

ID 类选择器

$('#id') 
1

2.2 Class 类选择器

$('.className')
1

2.3 元素选择器

$('tagName')
1

2.4 属性选择器

$("selector[attr='value']")   
$("a[href='http://www.baidu.com']")
1
2

2.5 层级选择

$("selector > selector ")
1

2.2 其他选择器

2.2.1 过滤(了解)

$("selector:first")   
$("selector:last")
$("selector:eq(index)")
1
2
3

2.2.1 表单(了解)

$("input:text")
$("input:checkbox")
1
2

2.2.2 状态(了解)

$("input:checked")
$("input:disabled")
1
2

三、JQuery 事件

3.1 事件绑定

3.1.1 on 通用事件绑定

obj.on('事件类型',回调函数)
obj.on('click',function(e){
   此处写点击后需要做的逻辑代码。
})

//以前
obj.addeventLinsterner( 'click', 回调 )
obj.on('click', 回调)
1
2
3
4
5
6
7
8

one 一次性事件，事件只会触发一次。

3.2.1 off 取消事件

obj.off('事件类型')
obj.off('click')
1
2

3.2.2 trigger 触发器

obj.trigger('事件类型') 
$('.box:last').trigger('click');
1
2

3.3 快捷事件

四、JQuery Dom编程

4.1 Js对象与JQuery对象

DOM

<ul>
  <li>小刘li>
  <li>王鑫li>
  <li>小郭li>
ul>
1
2
3
4
5

JS

$(function(){
  // lis 是一个JQuery DOM对象,就是JQuery提供的对象，或者说经过jquery包装过的对象 ,
  // 可以使用JQuery方法。
  var lis= $("ul li"); 
  //lis.css('color','red');

  // lis[i]元素不是一个JQuey对象，一旦对JQuery对象使用[下标] 或者 get(下标),获得的元素就是一个原生的JS对象,
  // 原生JS DOM对象无法调用JQuery的方法， 可以使用原生的DOM属性和方法。
  //lis[1].css('color','green');
  lis.get(1).style.color='green';

  
  // JS 对象 转 JQuery对象  $( js对象 )
  var jsobj = lis.get(1);
  $(jsobj).css('color','yellow')

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4.2 样式控制

4.2.1 css( )

类似于与style属性的作用

4.2.2 单个样式

$("div").css('color','green').css('background-color','red'); //控制单个属性可级联调用
1

4.2.3 多个样式

$("div").css({'color':'green','background-color':'red' }); //控制多个属性
1

4.2.4 addClass()

.ac{
  color:gold;
  background-color: #FF0000;
  border: 10px solid green;
}

$("div").addClass('ac');
1
2
3
4
5
6
7

4.2.5 removeClass()

$("div").on('click',function(e){
  $("div").removeClass('ac');
});
1
2
3

4.2.6. toggleClass()

$("div").on('click',function(e){
   $("div").toggleClass('ac');
});		
1
2
3

4.3 值内容

类与 innerText innerHTML value 的作用

4.3.1 text( [content] )

a. 取值

$(function(){
  //取值（忽略标签和样式）
  var xx=  $("div").text();  
  console.log(xx)
})

 

1
2
3
4
5
6
7
8

b. 赋值

$(function(){

  //赋值 （标签不被解析，视为文本）
  $("div").text( "hello jquery
"  )

})
1
2
3
4
5
6

4.3.2 html([content])

$(function(){
  //取值（连同标签和样式）
  var xx=  $("div").html();  
  console.log(xx)

  //赋值 （标签被解析）
  $("div").html( "hello jquery
"  )

})
1
2
3
4
5
6
7
8
9

4.3.3 val([content])

$(function(){
  //取值
  var xx =  $("input[name='username']").val();
  console.log(xx)
  //赋值
  $("input[name='username']").val("tomcat");
})
1
2
3
4
5
6
7

4,4 属性

4.4.1 attr()

//赋值
$("a").attr('href','http://www.baidu.com');
//取值
var vv =  $("a").attr('href');
alert(vv);
1
2
3
4
5

prop() 修改boolean类型属性

4.5 查找

DOM

<ul>
  <li class="x">李阳li>
  <li >席端li>
  <li>赵梦非li>
  <li id="son" >冉潘li>
  <li class="x">刘备li>
  <li>关羽li>
  <li class="x">张飞li>
ul>
1
2
3
4
5
6
7
8
9

4.5.1 children()

先找到父级节点，通过次方法可以获得该节点全部的后代节点。

$(function(){
  //全部的子节点
  var arr= $("ul").children();
  $( arr[0] ).css('color','red');
})
1
2
3
4
5

4.5.2 parent()

先找到其中的一个子节点，通过次方法可以获得该子节点的直接父级节点，全部的父级节点通过示例中其他方法也可获得。

$(function(){
  $("#son").parent().css('border','1px solid red'); //直接父级
  $("#son").parents().css('border','1px solid red'); //全部父级
  $("#son").parentsUntil("html").css('border','1px solid red'); //全部父级直到 什么为止。
}
1
2
3
4
5

4.5.3 prev()

先找到其中的一个子节点，通过次方法可以获得该子节点前一个节点，前面的全部节点通过示例中其他方法也可获得。

$(function(){
  $("#son").prev().css('color','red'); //前一个
  $("#son").prevAll().css('color','red');//前全部
  $("#son").prevUntil('.x').css('color','red');//前全部直到 .x为止
})
1
2
3
4
5

4.5.3 next()

先找到其中的一个子节点，通过次方法可以获得该子节点后一个节点，后面的全部节点通过示例中其他方法也可获得。

$("#son").next().css('color','red');  // 后一个
$("#son").nextAll().css('color','red');//后全部
$("#son").nextUntil('.x').css('color','red');//后全部直到 .x为止
1
2
3

4.5.4 siblings()

先找到其中的一个子节点，通过次方法可以获得该子节点同级的其他节点。

$("#son").siblings().css('border','1px solid red');
1

4.5.5 find( 选择器 )

obj.find(“td”) 在obj内部选择td元素

4.6 添加

4.6.1 内部添加

指的是在指定容器的内部添加新的节点

append( content ) & prepend( content )

obj.append("html代码" ) //内容追加
obj.prepend("html代码" ) //顶部插入
1
2

appendTo( selector ) & prependTo( selector )

$("html代码").appendTo( '.box' );
$("html代码").prependTo( '.box' );
1
2

两组api 作用一致，第一组是容器调用api 添加新增节点，第二组是新增节点调用api 添加到指定的选择器中。

4.6.2 外部添加

指的是在指定容器外部同级，前后添加新节点。

after() & before()

obj.after( "html代码" ) //在obj后面添加新节点
obj.before("html代码" ) //在obj前面添加新节点
1
2

insertAfter() insertBefore()

$( "html代码" ).insertAfter("选择器")  //在obj后面添加新节点
$( "html代码" ).insertBefore("选择器") //在obj前面添加新节
1
2

这两组api 作用也是一样的，区别在于前者是容器节点调用，后者是新增节点调用。

4.7 替换

replaceWith( content )

obj.replaceWith( "新html代码" ) // 把obj替换为新的html
1

replaceAll( selector )

$("新的html代码").replaceAll('选择器')
1

4.8 删除

remove()

obj.remove() //移除obj，移除自身。
1

empty()

obj.empty() //清空obj的内容， 移除的是全部儿子，自己会保留。
1

4.9 复制

clone()

//克隆的dom
var cloneDom =   obj.clone();
//插入到其他位置
cloneDom.insertBefore('选择器')
1
2
3
4

clone( true ) 深度克隆，可以复制事件

4.10 包裹

wrap() 为选择元素分别添加指定包裹层
wrapAll() 把所有元素用一个包裹层

//包裹
$("#btn-warp").click( function (){
  // $("#box img").wrap("
");
  $("#box img").wrapAll( "
" );
});
1
2
3
4
5

五、JQuery 动画

5.1 可见性

<button onclick="$('.box').show()">显示button>
<button onclick="$('.box').hide()">隐藏button>
<button onclick="$('.box').toggle()">显示隐藏切换button>
1
2
3

5.2 淡入淡出

<button onclick="$('.box').fadeIn(1000)">淡入button>
<button onclick="$('.box').fadeOut(1000)" >淡出button>
<button onclick="$('.box').fadeToggle()">淡入淡出切换button>
1
2
3

5.3 展开折叠

<button  onclick="$('.box').slideUp()" >上拉button>
<button  onclick="$('.box').slideDown()" >下拉button>
<button onclick="$('.box').slideToggle()">上下拉切换button>
1
2
3

5.4 自定义

<button onclick="$('.box').animate({'width':'0px'},2000)">自定义button>
1

综合实例

<body>
		<button onclick="$('.box').show()">显示button>
		<button onclick="$('.box').hide()">隐藏button>
		<button onclick="$('.box').toggle()">显示隐藏切换button>
		<button onclick="$('.box').fadeIn(1000)">淡入button>
		<button onclick="$('.box').fadeOut(1000)" >淡出button>
		<button onclick="$('.box').fadeToggle()">淡入淡出切换button>
		<button  onclick="$('.box').slideUp()" >上拉button>
		<button  onclick="$('.box').slideDown()" >下拉button>
		<button onclick="$('.box').slideToggle()">上下拉切换button>
		<button onclick="$('.box').animate({'width':'0px'},2000)">自定义button>
		<div class="box"> 示例动画 div>
	body>
1
2
3
4
5
6
7
8
9
10
11
12
13

六、JQuery 插件机制

6.1 全局扩展

$.extend({
  sayHello(){
    alert('hello')
  }
})
//调用
$.sayHello();
1
2
3
4
5
6
7

相当于为$ 类级别的方法扩展。

6.2 实例扩展

$.fn.extend({
         sayGoodBye(){
             alert('world');
         }
});
//调用
$("xx").sayGoodBye();
1
2
3
4
5
6
7

相当于为 jquery 对象级别的方法扩展。

相关阅读:
Kakao账号注册全流程，如何Kakao多开？
检测 Linux VPS 是 Xen、OpenVZ 还是 KVM 架构的方法
Java之—hutool工具类二维码生成跟背景图合并输出
Window function 优化速记
【AWVS破解安装学习】
express学习3-捕获错误
golang点击下载文件与二维码下载文件
HarmonyOS资源分类与访问
【Oracle系列1】Oracle 的connect权限和create session的区别
父子组件传递参数/默认插槽/具名插槽

原文地址：https://blog.csdn.net/yc_Cabbage/article/details/126295361