jQuery是一个非常优秀的js库

原创已于 2023-04-21 22:13:14 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #前端 #开发语言 #html

于 2022-08-09 21:08:00 首次发布

本文详细介绍jQuery库的基础知识，包括选择器、DOM操作、动画效果、事件处理及Ajax应用等内容，帮助初学者快速掌握jQuery的核心功能。

若有侵权随时可以联系作者删除

jQuery学习目录

一、前言
二、学习目标
三、优点分析
四、jQuery基础知识

一、前言

jQuery是一个非常好的js库，在他占领的时代下，当时的前端行业熠熠生辉，无一操作不展现它的智慧
本文展示了jQuery使用的基本函数和操作(具体目录有)
本文是一篇笔记性结合性的文章，适合去阅读，阅读并学习完那么jQuery的基础就学会了,可以结合HTML+CSS即可自由开发出你想要的东西了

二、学习目标

学习如何来使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能方法，这些方法叫做API（ApplicationProgramming Interface应用程序编程接口）。
这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号( )，小括号里面是相应的参数，参数不同，功能不同。

三、优点分析

简化了js的复杂的操作
不需要去关心他的兼容问题
提供了大量的实用方法
写法简单：1.方法函数化 – 2.链式操作 – 3.取值赋值合体

四、jQuery基础知识

(一)jQuery(load和read的区别)

在这里插入图片描述

(二)jQuery选择器

(1).jQuery基本选择器

	//1.id选择器
    $('#ul').css({'backgroundColor':'red'}); 是唯一的元素
    //2.class选择器
    $('.no1').css('backgroundColor','red');选择所有的.no1类的元素，返回数组
    $('li.no1').css() //li标签里面class为no1的，这样排除了可能选到其他标签的可能
    //3.标签选择器
    $('li').css('backgroundColor','#58bc58');选择所有的li标签元素，返回li元素数组

(2).jQuery层级选择器/基本过滤器/内容过滤器/属性过滤选择器/子元素过滤选择器

		//层级选择器和基本过滤选择器
    $('#ul li:odd').css('backgroundColor','red');
    $('#ul li:even').css('backgroundColor','red');
    $('#ul li:last').css('backgroundColor','red');
    $('#ul li:first').css('backgroundColor','red');
    $('#ul li:eq(2)').css('backgroundColor','red');
    $("td:gt(4)") 选择td元素中序号大于4的所有td元素 
    
    $("td:lt(4)") 选择td元素中序号小于4的所有的td元素
    
    $('#ul > li:odd').css('backgroundColor','red');
    $('#ul > li:last').css('backgroundColor','red');
    $(":header") 选择h1、h2、h3之类的
    
    $('#ul > *')//ul下面所有的子元素
    $("p").filter(".intro").css("background-color","yellow");//是p标签的class是intro的标签高亮
    $("#prev ~ div")同胞选择器，该选择器返回的为id为prev的标签元素的所有 的属于同一个父元素的div标签
    
    //内容过滤器
    $("div:contains('John')") 选择所有div中含有John文本的元素
    
    $("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组
    
    $("div:has(p)") 选择所有含有p标签的div元素
    
    $("td:parent") 选择所有的以td为父节点的元素数组
    
    //属性过滤选择器
    $("div[id]") 选择所有含有id属性的div元素
    
    $("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元 素
    
    $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
    
    $("input[name^='news']") 选择所有的name属性以'news'开头的input元素
    
    $("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
    
    $("input[name*='man']") 选择所有的name属性包含'man'的input元素
    
    $("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
    
    //子元素过滤选择器
    $("div span:first-child") 返回所有的div元素的第一个子节点的数组
    
    $("div span:last-child") 返回所有的div元素的最后一个节点的数组 
    
    $("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组

(3).jQuery筛选选择器

		//筛选选择器，口诀：找父母兄弟的儿子
    //父母
    $('.no1').parent().css('backgroundColor','red');
    //兄弟
    $('.no1').siblings().css('backgroundColor','green');
    //儿子
    $('#ul').children('li').css('background','#58bc58');
    //找
    $('#ul').find('.no1').css('background','#58bc14');
    //eq
    $('#ul').eq(2).css('background','#58bc14');

(4).表单选择器

		$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button
    
    $(":text") 选择所有的text input元素
    
    $(":password") 选择所有的password input元素
    
    $(":radio") 选择所有的radio input元素
    
    $(":checkbox") 选择所有的checkbox input元素
    
    $(":submit") 选择所有的submit input元素
    
    $(":image") 选择所有的image input元素
    
    $(":reset") 选择所有的reset input元素 
    
    $(":button") 选择所有的button input元素 
    
    $(":file") 选择所有的file input元素 
    
    $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域 表单元素过滤选择器： 
    
    $(":enabled") 选择所有的可操作的表单元素 
    
    $(":disabled") 选择所有的不可操作的表单元素 
    
    $(":checked") 选择所有的被checked的表单元素 
    
    $("select option:selected") 选择所有的select 的子元素中被selected的元素

(三)jQuery常用方法


    //has()
    $('#ul').has('.no1').css('background','red');//只要有这个，ul整个都变红色
    //prev()
    $('.no1').prev().css('background','green');//上一个
    //nextAll()
    $('.no1').nextAll()//下面的全部兄弟标签
    
    //prevAll()
    $('.no1').prevAll()//上面的全部兄弟标签
    
    //next()
    $('.no1').next().css('background','yellow');//下一个
    //eq
    $('#ul').eq(2).css('background','#58bc14');
    //find()
    $('#ul').find('.no1').css('background','#58bc14');
    //index()
    $('#ul li').eq($('.no1').index()).css('background','#58bc14');
    //attr()
    $('#ul li').attr('title','456');
    //prop();//全选
    let istrue = $('#all').prop('checked');
    $('#all_checked input').prop('checked',istrue);
    
    //parentsUntil(参数一:stop(写在个标签停止),参数二:filter(过滤))   ---->找父亲
    $('.no1').parentsUntil($('#app')).css({'width':'300px',"height":'300px'});
    //代表在.no1找祖先元素，一直找到#app之间，所有的祖先都多css,我没有过滤其他的，找到都css变化
    //nextUntil()(参数一:stop(写在个标签停止),参数二:filter(过滤))     ---->找兄弟
    $(".start").nextUntil(".stop").css({"color":"red","border":"2px solid red"});//找到两个类名之间的所有兄弟元素，要是被隔开了，就是从上面开始到隔开的地方
    
    //prevUntil()(参数一:stop(写在个标签停止),参数二:filter(过滤))     ---->找兄弟
    $("li.start").prevUntil("li.stop").css({"color":"red","border":"2px solid red"});//和nextUntil一样，只是stop在上面，从下面数起
    
    //slice()
    $("p").slice(2);//从带有索引号为 2 的 <p> 元素开始选中 <p> 元素：
    $("p").slice(2,5);//从索引号2到5选中
    //serialize() 
    $('selector').serialize() //方法通过序列化表单值创建 URL 编码文本字符串。您可以选择一个或多个表单元素（如输入和/或文本区）或表单元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
    
    //serializeArray()
    $('selector').serializeArray() //方法通过序列化表单值来创建对象（name 和 value）的数组。您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。
    //delegate()和undelegate()   事件委托和取消事件委托和on一样，最好用on代替
    //event.target不用括号，代表当前的标签，event.type点击的事件记录再里面，event.data记录了数据
    $("p").each(function(i){$(this).on("click",{x:i},function(event){alert("序号：" + $(this).index() + "。段落的数据为: " + event.data.x);});});
    
$下面的常用方法：
    $.type( obj )//辨析得到是什么数据类型  $.type( true ) === "boolean"
    
    $.trim( str )//去除两边空格
    
    $.inArray( value, array [, fromIndex ] )//$.inArray("中国",arr) arr数组里面有没有中国,【有的话返回下标，没有是-1】
    
    $("button").click($.proxy(objPerson,"test"));//我的理解是，强制执行objPerson里面的test函数（可以改变this指向）
    //noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。
    //也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用
    var jq = $.noConflict();  jq('#app').click(....)
    //如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，
    //依旧不得不使用 "jQuery";(反正我可以)
    $.noConflict();jQuery(document).ready(function($){})
    $.parseJSON( json )//解析json字符串 得到一个obj的对象
    var obj = jQuery.parseJSON('{"name":"John"}');//$.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象。
    $.makeArray( object )// 函数用于将一个类似数组的对象转换为真正的数组对象。

(四)jQuery基础知识(DOM)

DOM是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTMDOM和CSSDOM。每一个网页都可以用DOM表示出来，每个DOM都可以看作是一棵DOM树。如：
在这里插入图片描述

JQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】

(五)jQuery的DOM操作

(1).新建节点

 /* 创建元素节点创建元素节点并且把节点作为<ul>元素的子节点添加到DOM节 点树上。先创建元素
 点，创建元素节点使用Jquery的工厂函数$()来完成，格式如下：$(html),该方法会根据传入的
 html字符串返回一个DOM对象，并将 DOM对象包装成一个JQuery对象后返回。*/
    $newli = $('<li class="no2"></li>');

(2).添加节点

动态新建元素不添加到文档中没有实际意义，将新建的节点插入到文档 中有多个方法，如下：
append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、
insertBefore()。
<body>
    <ul id="ul">
        <li></li>
        <li></li>
        <li></li>
        <li class="no1"></li>
    </ul>
</body>
 $newli = $('<p class="no2">我很好，谢谢</p>');
1.$('#ul').append($newli);//放在ul里面最后一个p标签
2.$newli.appendTo($('#ul'));//一样，是有助于用css修饰的而已
3.$('#ul').prepend($newli);//放在ul里面第一个p标签
4.$newli.prependTo($('#ul'));//一样，是有助于用css修饰的而已
-----------前面四个是在里面的，后面四个是在外面的---------------
    
5.$('#ul').after($newli);//放在ul外面的后面做兄弟标签
6.$newli.insertAfter($('#ul'));//一样，是有助于用css修饰的而已
7.$('#ul').before($newli);//放在ul外面的前面做兄弟标签
8.$newli.insertBefore($('#ul'));//一样，是有助于用css修饰的而已

(3).删除节点

1.remove()
remove()方法删除所有匹配的元素，传入的参数用于筛选元 素，该方法能删除元素中的所有子节点匹配的节点及后代被删除后，该方法返回值是指向被删除节点的引用，因此可以使用该引用，再使
用这些被删除的元素
    $span=$("span").remove();
    $span.insertAfter("ul");
该示例中先删除所有的span元素，把删除后的元素使用$span 接收，把删除后的元素添加到ul后面做为ul的兄弟节点。
2.empty()
empty()方法严格来讲并不是删除元素，该方法只是清空节点，它能清空元素中的所有子节点。
$("ul li:eq(0)").empty();

(4).修改节点

1.复制节点:clone()
    $("ul li:eq(0)").clone();
2.替换节点：repalcewith(),repalceAll();
    $("p").replaceWith("<strong>我要留下</strong>");该方法使用strong元素替 换p元素
    $("<h3>替换strong</h3>").repalceAll("strong");//一样，只是便于用css()而已。该例
    使用h3元素替换所有的 strong元素。
3.包裹节点:wrap(),wrapAll(),wrapInner()
    $('ul').wrap("<i></i>");每一个ul都用一个i标签包裹着
    $('ul').wrapAll("<i></i>");全部的ul都全部拉拢-在一起，然后不管怎么样拉拢，中间的
    标签都无视，然后用一个i标签包裹
    $('ul').wrapInner("<i></i>");给ul的儿子li用一个i标签把他们都裹在一起

(5).元素属性操作、获取和设置元素、元素样式操作

1.属性操作attr()和removeAttr()
2.样式操作addClass(),removeClass(),toggleClass()和hasClass()
    1.$('#ul').addClass('active')//增加class
    2.$('#ul').removeClass('active')//删除class
    3.$('#ul').toggleClass('active')//有和没有来切换的，适合做下拉菜单
    4.console.log( $(this).hasClass('active'))//返回布尔值，多做判断
3.设置和获取文本值
    $('#ul').html()
    $('#ul').text()
    $("#userName").val();
    
4.遍历节点操作children()、next()、prev()、siblings()和closest()
    $('#ul').children().length()//一般children里面要写标签，除了lenght
    $('#ul li:eq(2)').next()//下一个
    $('#ul li:eq(2)').prev()//上一个
    $('#ul li:eq(2)').siblings()//除了这个的全部兄弟
    $('#ul li:eq(2)').closest()//不用管了，不知道什么鬼
5.CSS-Dom操作css()、offset()、position()、scrollTop()和scrollLeft()
    offset();
        var offset= $("p").offset();
        var left=offset.left;
        var top=offset.top;获取后再取值
    position();
        var postion = $("p").positon();
        var left=positon.left;
        var top=positon.top;
    scrollTop();
        var scrollTop=$("p").scrollTop();
    scrollLeft();
        var scrollLeft=$("p").scrollLeft();
        
6.width() innerWidth() outerWidth()
    $('div').width()//width
    $('div').innerWidth()//width + padding
    $('div').outerWidth()//width + padding + border
    $('div').outerWidth(true)//width + padding + border + margin
7.$(window).resize(function(){window窗口变化就触发})
8.on(),off()
    on();
        $('div').on('click','input',cb);
    off();//第一次还可以的，点击后，就click失效不可以了
        $('#div').on('click','input',function(){
            $('#div').off('click');
        });
        off解绑on方式绑定的事件
        // 解绑所有代理的click事件，元素本身的事件不会被解绑 $(selector).off( “click”, “**” )

(六)jQuery基础知识(事件)

(1).语法事件解析

//第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用
// 第四个参数：handler，事件处理函数语法：
4.1 $(se l ec t or) . o n (e v e n t s [, se l ec t or] [, d a t a], han d l er) // 表示给$ (selector)绑定事件，当必须是它的内部元素span才能执行这个事件
4.2 $selector).on( "click",“span”, function() {}); //绑定多个事件表示给$ (selector)匹配的元素绑定单击和鼠标进入事件 $(selector).on(“click mouseenter”, function(){});

(2).事件

click(handler) 单击事件 
blur(handler) 失去焦点事件 
mouseenter(handler) 鼠标进入事件 
mouseleave(handler) 鼠标离开事件 
dbclick(handler) 双击事件 
change(handler) 改变事件，如：文本框值改变，下来列表值改变等 
focus(handler) 获得焦点事件 
keydown(handler) 键盘按下事件
on();
trigger():自动触发指定的事件
    在前端开发中，有时候我们需要页面加载完的时候，让文本框某个内容被选 中，某个按钮处于焦点中，
    这个时候就可以用这个事件轻松实现
    $('#input').trigger('select');//自动选中id为input的标签
    $('#tex').trigger('focus');//页面加载后自动聚焦文本框

(七)jQuery 动画

(1).隐藏显示动画

show( )方法

 
作用：让匹配的元素展示出来
用法一：没有介绍
用法二：参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
/* slow：600ms、normal：400ms、fast：200ms */
$(selector).show(“slow”);
 用法三： 参数一可以是数值类型或者字符串类型，参数二表示：动画执行完后立即执行的回调函数
$(selector).show(2000, function() {});
用法四：不带参数，作用等同于 css(“display”, ”block”) 
$(selector).show();
注意：jQuery预设的三组动画效果的语法几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数。（第一个参数是：可以是指定字符或者毫秒数）

hide( ) 方法

作用：让匹配元素隐藏掉
用法参考show方法
$(selector).hide(1000); // 1000表示速度
$(selector).hide(“slow”);
$(selector).hide(1000, function(){});
$(selector).hide();

(2).滑入滑出动画

slidedown( )方法

滑入动画效果（联想：生活中的卷帘门）

作用：让元素以下拉动画效果展示出来
$(selector).slideDown(speed,callback);先划出来了再执行这个callback

slideUp( )方法

滑出动画效果

作用：让元素以上拉动画效果隐藏起来
$(selector).slideUp(speed,callback);先划入了再执行这个callback

slideToggle( )方法

滑入滑出切换动画效果

$(selector).slideToggle(speed,callback);是点一下滑入，再点一下滑出，而不是滑入立马就滑出

(3).淡入淡出动画

fadeIn( )方法

1.淡入动画效果
作用：让元素以淡淡的进入视线的方式展示出来
$(selector).fadeIn(speed, callback);

fadeOut( )方法

2.淡出动画效果
作用：让元素以渐渐消失的方式隐藏起来
$(selector).fadeOut(1000);

fadeToggle()方法

3.淡入淡出切换动画效果
作用：通过改变不透明度，切换匹配元素的显示或隐藏状态
$(selector).fadeToggle('fast',function(){});

fadeTo( )方法

4.改变不透明度到某个值
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从完全不透明到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！
作用：调节匹配元素的不透明度
// 用法有别于其他动画效果
// 第一个参数表示：时长
// 第二个参数表示：不透明度值，取值范围：0-1
$(selector).fadeTo(1000, .5); // 0全透，1全不透
// 第一个参数为0，此时作用相当于：.css(“opacity”, .5);
$(selector).fadeTo(0, .5);

(4).jQuery动画总结

在这里插入图片描述

有规律的体现： 
jQuery预设的值，共有三个，分别是：slow、normal、fast
jQuery提供的这几个动画效果控制的CSS属性包括：高度、宽度、不透明度。{height:400px; width:300px; opacity:.4;}
这三个CSS属性的共性是：属性值只有一个，并且这个值是数值（去掉单位后）。

(5).自定义动画

作用：执行一组CSS属性的自定义动画
// 第一个参数表示：要执行动画的CSS属性（必选）
// 第二个参数表示：执行动画时长（可选）
// 第三个参数表示: 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) linear(匀 速) )
// 第四个参数表示：动画执行完后立即执行的回调函数（可选）
$(selector).animate({params},speed,'linear',callback);

(6).停止动画

作用：停止当前正在执行的动画
为什么要停止动画？如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。
(联想：排队进站)动画队列里面的动画不会执行，直到第一个动画执行完成。
// 第一个参数表示是否清空所有的后续动画
// 第二个参数表示是否立即执行完当前正在执行的动画
$(selector).stop(clearQueue,jumpToEnd);
解释：/*当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元
素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。*/
常用方式： $(selector).stop();

(八)jQuery发送Ajax

学习完如何发送Ajax，恭喜你的jQuery已经入门成功，精通的话还需要大量操作练习


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    <div id="div">
        nihao
    </div>
</body>
<script src="./jquery-3.2.1.min.js"></script>
<script>
    (function () {
        //jq写法：
        $('#div').click(function () {
            $.ajax({
                type: 'get',
                data: {
                    id: 22
                },
                url: './ceshi.json',
                async: true,
                success: (str) => {
                    console.log(str);
                }
            });
        })
        //原生写法：
        //get请求：
        let url = 'http://nihao.com?name=' + name + "&age=" + age;//这样的一个样式去写的
        let xhr = new XMLHttpRequest();
        //参数一:方式，参数二:请求地址，参数三:是否异步
        xhr.open('get', url, true);
        xhr.send(null);//get只需要sendnull就可以
        xhr.onreadystatechange(function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
        });
        //post请求:
        let url = 'http://nihao.com'//无需拼接的
        let xhr = new XMLHttpRequest();
        xhr.open('post', url, true);
        let data = 'username=' + name + "&age=" + age;
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
        xhr.onreadystatechange(function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
        })
    })();
</script>
</html>