前端
API

JQuery的基本使用

# JQuery

# 1.简介

# 1.1 什么是JQuery

jQuery是一个快速、简洁的JavaScript (opens new window)框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式 (opens new window)，优化HTML (opens new window)文档操作、事件处理、动画设计和Ajax (opens new window)交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器 (opens new window)，并且可对CSS (opens new window)选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE (opens new window) 6.0+、FF 1.5+、Safari (opens new window) 2.0+、Opera 9.0+等。

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

提示： 除此之外，jQuery 还提供了大量的插件。

官网地址： http://jquery.com (opens new window)

# 1.2 版本问题

JQuery 2.x has the same API as jQuery 1.x but does not support Internet Explorer 6,7 or 8(不支持 ie6 7 8，如果需要下载1.x)。

（1）完整版：jquery-2.1.4.js

（2）压缩版：jquery-2.1.4.min.js

（3）目前使用：jquery-3.4.js

# 1.3 优点

提供了强大的功能函数
解决了浏览器的兼容问题
实现了丰富的UI和插件
纠正错误的脚本知识

# 1.5 为什么使用jQuery

目前网络上有大量开源的 JS 代码库, 但是 jQuery 是目前最流行的 JS 代码库，而且提供了大量的扩展。

很多大公司都在使用 jQuery，例如:

Google
Microsoft
IBM
Netflix

# 1.6 安装

在页面引入就可以了

<!-- 在需要使用jquery的页面引入jquery的核心js文件 -->
<script src="https://code.jquery.com/jquery-3.6.1.js"  type="text/javascript" charset="UTF-8"></script>

# 2. JQuery对象

Dom对象与Jquery包装集对象

明确DOm对象和JQury包装集的概念，将极大的加快我们的学习速度。原始的Dom对象只有Dom接口的方法和属性，通过js代码获取的对象都是dom对象，通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供的方法。

# 2.1 Dom对象

在常见的javascript中获取Dom对象，Dom对象只有有限的属性和方法：

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

# 2.2 Jquery包装集对象

可以说是Dom对象的扩充.在JQuery的世界中所有的对象，无论是一个还是一个组，都封装成一个jQuery包装集，比如获取包含一个元素的jQuery包装集。

var jQueryObject = $("div");

# 2.3 Dom转Jquery

Dom对象转为JQuery对象，只需要利用$()方法进行包装即可。

var domDiv = document.getElementById('mydiv');  // 获取Dom对象
mydiv = $(domDiv);

# 2.4 Jquery转Dom

jQuery对象转Dom对象，只需要数组中取出元素即可。

	// 第一种方式 获取JQuery对象
    var divJqueryToDom = testDiv1[0];
    console.log(divJqueryToDom);

	// 第二种方式 
	$('div').get(index);

# 3.JQuery选择器

# 3.1 jQuery基础选择器

原生JS获取的元素方式很多，很复杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。

$("选择器") //里面直接写CSS选择器就可以 但是要加引号

名称	用法	描述
ID选择器	`$("#id")`	获取指定ID的元素
全选选择器	`$("*")`	匹配所有元素
类选择器	`$(".class")`	获取同一类class的元素
标签选择器	`$("div")`	获得同一类标签的所有元素
并集选择器	`$("div,p,li")`	选取多个标签
交集选择器	`$("li.current")`	交集标签

# 3.2 jQuery层级选择器

名称	语法	描述
子代选择器	`$("ul>li")`	使用`>`号，获取亲儿子的层级元素，不会获取子孙
后台选择器	`$("ul li")`	使用空格，代表后代选择器，获取ul下的所有li元素，包括子孙

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"  type="text/javascript" charset="UTF-8"></script>
<body>
<div>我是第一个div</div>
<div class="nav">我是nav div</div>
<div id="div2">这是id选择器</div>
<p>这是一个段落</p>
<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表1</li>
</ol>

<ul>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
</ul>

<script>
    $(function (){
        console.log($(".nav"));
        console.log($("#div2"));
        console.log($("ul li"));
        console.log($("p"));
    })
</script>
</body>
</html>

# 3.3 jQuery隐式迭代

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

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

<script>
    // 获取四个div的元素
    console.log($("div"));

    // 给四个div的设置背景颜色位粉色,jquery对象不支持使用style
    $("div").css("background","pink");
    // 隐式迭代就是吧匹配所有的元素内部进行遍历循环 给每一个元素添加css这个方法
    $("ul li").css("color","red");
</script>

# 3.4 jQuery筛选选择器

语法	用法	描述
:first	`$("li:first")`	获取第一个li元素
:last	`$("li:last")`	获取最后一个li元素
:eq(index)	`$("li:eq(2)")`	获取到的li元素中，选择索引号位2的
:odd	`$("li:odd")`	获取到的li元素中，选择索引号为奇数的元素
:even	`$("li:even")`	获取到的li元素中，选择索引号为偶数的元素

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"  type="text/javascript" charset="UTF-8"></script>
<body>
<ul>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
</ul>
<ol>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
</ol>
<script>
    $(function (){
        $("ul li:first").css("background","red");
        $("ul li:last").css("background","blue");
        $("ul li:eq(2)").css("background","green");
        $("ol li:odd").css("background","green");
    })
</script>
</body>
</html>

# 3.5 JQuery筛选方法

这部分是重点部分

语法	语法	说明
`parent()`	`$("li").parent();`	查找父级
`children(selector)`	`$("ul").children("li");`	相当于`$("ul<li")`,最近一级（亲儿子）
`find(selector)`	`$("ul").find("li");`	相当于`$("ul li")`,后代选择器
`siblings(selector)`	`$(".first").siblings("li");`	查找兄弟节点，不包括自己本身
`nextAll([expr])`	`$(".first").nextAll();`	查找当前元素之后的所有同辈元素
`prevtAll([expr])`	`$(".last").prevAll();`	查找当前元素之前的所有的同辈元素
`hasClass(class)`	`$("div").hasClass("protected");`	检查当前的元素是否含有某个特定的类，如过有，则返回true
`eq(index)`	`$("li").eq(2);`	相当于`$("li:eq(2)")`

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"  type="text/javascript" charset="UTF-8"></script>
<body>
<div class="grandfather">
    <div class="father">
        <div class="son">儿子</div>
    </div>
</div>

<div class="nav">
    <p>我是屁</p>
    <div>
        <p>我是P</p>
    </div>
</div>
<script>
    $(function (){
        // 1. 父 parent()
        console.log($(".son").parent());
        // 2.子
        // (1) 亲儿子 children
        console.log($(".nav").children("p").css("color","red"));
        // (2) 子孙后代
        console.log($(".nav").find("p").css("color","green"));
    })
</script>
</body>
</html>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"  type="text/javascript" charset="UTF-8"></script>
<body>
<ul>
    <li>我是ul 的li</li>
    <li>我是ul 的li</li>
    <li class="item">我是ul 的li</li>
    <li>我是ul 的li</li>
    <li>我是ul 的li</li>
</ul>
<ol>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
</ol>
<div class="current"></div>
</body>
<script>
    $(function (){
        // 兄弟元素siblings 除了自身元素之外的所有亲兄弟
        $("ul .item").siblings("li").css("color","red");

        // 第n个元素
        var index = 2;
        $("ul li:eq(2)").css("color","red");
        // 可以利用选择方法的方式选择 更推荐这种方法
        $("ul li").eq(index).css("color","yellow");

        // 判断是否有某个类名
        console.log($("div:first").hasClass("current"));
    })
</script>
</html>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"  type="text/javascript" charset="UTF-8"></script>

<body>

<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>

<script>
    $(function (){
        // 使用隐式迭代 给所有的按钮绑定点击事件
        $("button").click(function (){
            // 当前的元素变化背景颜色
            $(this).css("background","pink");
            // 其余的兄弟去掉背景颜色
            $(this).siblings("button").css("background","");
        })
    })
</script>
</body>
</html>

# 4.JQuery样式

# 4.1 操作css方法

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

1.参数只写属性名，则是返回的属性值

$(this).css("color");

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加上引号，值如果是数字可以不用跟单位和引号。

$(this).css("color","red");

3.参数是可以是对象的形式，方便设置多组样式，属性名和属性值可以用冒号隔开，属性可以不用加引号。

$(this).css({
    width: 400,
    height: 400,
    backgroundColor: "red"
})

# 4.2 设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。addClass相当于追加一个className，不会删除之前的className。

<style>
    .color{
        background: yellow;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"  type="text/javascript" charset="UTF-8"></script>
<body>
<button>快速</button>

<script>
    $(function (){
        $("button").click(function (){
            // 添加类 addClass
            $(this).addClass("color");
            // 删除类 removeClass 
            $(this).removeClass("color"); 
            // 切换类 toggleClass
            $(this).toggleClass("current");
        })
    })
</script>
</body>

# 5.JQuery效果

# 3.1 显示隐藏效果

1.显示语法规范

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

2.显示参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    button {
        width: 50px;
        height: 30px;
    }
    .box {
        width: 100px;
        height: 300px;
        background-color: pink;
        margin-top: 20px;

    }
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"  type="text/javascript" charset="UTF-8"></script>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div class="box"></div>
<script>
    $(function (){
        $("button").eq(0).click(function (){
            $(".box").show(1000,function (){
               alert(1);
            });
        })
        $("button").eq(1).click(function (){
            $(".box").hide(1000,function (){
                alert(1);
            });
        })
        $("button").eq(2).click(function (){
            $(".box").toggle(1000);
        })
    })
</script>
</body>
</html>

# 5.2 滑动效果

1.下滑效果的语法规范

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

2.示例效果：

<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div class="box"></div>
<script>
    $(function (){
        $("button").eq(0).click(function (){
            $(".box").slideDown(1000,function (){
               alert(1);
            });
        })
        $("button").eq(1).click(function (){
            $(".box").slideUp(1000,function (){
                alert(1);
            });
        })
        $("button").eq(2).click(function (){
            $(".box").slideToggle (10 00);
        })
    })
</script>

# 5.3 动画队列问题

动画或效果队列

动画或效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。

停止排队

stop()方法用于停止动画或者效果
注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

stop()

$(".nav>li").hover(function (){
            $(this).children("ul").stop().slideToggle();
        })

# 5.4 淡入淡出效果

1.淡入效果语法规范

fadeIn([speed,[easing],[fn]]);

示例：

<script>
    $(function (){
        $("button").eq(0).click(function (){
            $(".box").fadeIn(1000);
        })
        $("button").eq(1).click(function (){
            $(".box").fadeOut(1000);
        })
        $("button").eq(2).click(function (){
            $(".box").fadeToggle (1000);
        })
    })
</script>

# 5.5 自定义动画

自定义动画animate

1.语法

animate(params,[speed],[easing],[fn]);

2.参数

params: 想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。

示例：

<button>启动</button>
<div class="box"></div>
<script>
    $(function (){
        $("button").click(function (){
            $(".box").animate({
                left: 500,
                top: 300,
                opacity: .4
            },500);
        })
    })
</script>

# 6.JQuery属性操作

# 6.1 获取元素固有属性

所谓元素固有的属性就是元素本身自带的属性，比如<a>元素里面的href，比如input元素里面的type。

语法：

prop("属性")

prop("属性","属性值")

示例：

<a href="http://www.baidu.com">获取链接</a>
<input type="checkbox" name="" id="" checked>
</body>
<script>
    $(function (){
        // 获取属性值
        console.log($("a").prop("href"));

        $("a").prop("title","我们都挺好");
        $("input").change(function (){
            console.log($(this).prop("checked"));
        }) 
    })
</script>

# 6.2 自定义属性

自定义属性attr()

用户给元素添加的属性，称之为自定义属性，比如给div添加index= "1"。

语法：

attr("属性")  // 类似原生getAttribute()

attr("属性","属性值")

示例：

		console.log($("div").attr("index"));
        $("div").attr("index",4);
        console.log($("div").attr("data-index"));

# 6.3 添加内容

        // 1.获取设置元素内容 html()
        console.log($("div").html());

        // 2.获取设置元素文本内容
        console.log($("div").text());
        $("div").text("123");

        // 3.获取设置表单值
        console.log($("input").val());
        $("input").val("123");

# 7. JQuery元素操作

# 7.1 遍历元素一

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

语法1：

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

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

示例：

<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
<script>
$(function (){
    var sum = 0;
    // each() 方法遍历元素
    var arr = ["red","green","blue"];
    $("div").each(function (i,domEle){
        // 回调函数第一个参数一定是索引号
        console.log(i);
        // 回调函数第二个参数一定是dom元素对象
        console.log(domEle);
        $(domEle).css("color",arr[i]);
        sum += parseInt($(domEle).text());
    })
    console.log(sum);
})

</script>

# 7.2 遍历元素二

语法1：

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

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

示例：

var arr = ["red","green","blue"];

$(function (){
    $.each($("div"),function (i,ele){
        console.log(i);
        console.log(ele);
    });

    $.each(arr,function (i,ele){
        console.log(i);
        console.log(ele);
    })

    $.each({
        name: "andy",
        age: 18
    },function (i,ele){
        console.log(i);
        console.log(ele);
    })
})

# 7.3 创建元素

语法：

动态创建一个列表标签元素

$("<li></li>")

内部添加：

element.append("内容")  // 放到内容的最后面

外部添加：

element.after("内容")   // 把内容放入目标的元素后面

element.before("内容")  // 把内容放入目标元素的前面

删除元素：

element.remove() // 删除匹配元素 本身

element.empty() // 删除匹配的元素集合中所有的子节点

element.html("") // 清空匹配的元素内容

<script>
    $(function(){
    // 创建元素
    var li = $("<li>这是后来添加的</li>"); 
	
   // 内部添加
    $("ul").prepend(li);
    
    // 外部添加
    var div = $("<div>这是后妈生的</div>");
    $(".test").before(div);
    
    // 删除元素
    $("ul").remove();
    $("ul").empty();
    $("ul").html();
    })
</script>

# 8.JQuery事件

# 8.1 JQuery事件注册

语法：

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

示例：

<script>
    $(function(){
    	// 注册单个事件
        $("div").click(function(){
            $(this).css("background","purple");
        });
        $("div").mouseenter(function(){
            $(this).css("background","yellow");
        });
    })
</script>

# 8.2 JQuery事件处理

on()绑定事件

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

语法：

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

events: 一个或者多个用空格分隔的事件类型，如 "click"或者"keydown"。
selector: 元素的子元素选择器
fn: 回调函数即绑定在元素身上的侦听函数

示例：

<script>
    $(function(){
        // // 事件注册
        // $("div").click(function(){
        //     $(this).css("background","purple");
        // });
        // $("div").mouseenter(function(){
        //     $(this).css("background","yellow");
        // });

        // 事件处理
        $("div").on({
            mouseenter: function (){
                $(this).css("background","red");
            },
            click: function (){
                $(this).css("background","blue");
            },
            mouseleave: function (){
                $(this).css("background","yellow");
            }
        });
  		// $("div").on("mouseenter mouseleave",function(){
    	// 		 $(this).addClass("color");
		// })
    })
</script>

on()方法优势

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

$("ul").on("click","li",function(){
    alert("hello word!"); 
})

off()解绑事件

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

<script>
     $(function (){
         $("div").on({
             click: function (){
                 console.log("我点击了");
             },
             onmouseover: function (){
                 console.log("我鼠标经过了");
             }
         });
         // 事件解绑
         $("div").off("click");
    	 // 一次性
    	 $("div").one("click");
     })
</script>

# 8.3 JQuery事件对象

事件被触发，就会有事件对象的产生。

element.on(event,[selector],function(event){})

阻止默认行为： event.preventDefault() 或者 return false

阻止冒泡： event.stopPropagation()

示例：

<script>
	$(function (){
         $(document).on("click",function (){
             console.log("点击了document")
         })
         $("div").on("click",function (){
             console.log("点击了div");
             event.stopPropagation();
         })
     })
</script>

# 9 JQuery其他方法

# 9.1 对象的拷贝

如果需要把某个对象拷贝，或者是合并，给另外一个对象使用，此时可以使用$.extend()方法

语法：

$.extend([deep],target,object1,[objectN])

deep:如果设为true为深拷贝，默认为false浅拷贝
target：要拷贝的目标对象
object1: 待拷贝到第一个对象的对象
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝的对象。

# 9.2 多库共存

jQuery使用$作为标识符，随着jQuery的流行，其他的js库也会用这$作为标识符，这样一起使用起来就会冲突。

解决方案：

把$换成jQuery

jQuery变量规定新的名称

     $(function (){
         function $(ele){
             return document.querySelector(ele);
         }
         console.log($("div"));
         jQuery.each();
         var suibian = jQuery.noConflict();
         console.log(suibian("span"));
     })

# 9.3 JQuery插件

推荐网站：

# 10 JQuery位置

# 10.1 JQuery 位置

位置主要是有三个： offset() 、position()、scrollTop() / scrollLeft()

1.获取设置距离文档的位置（偏移）offset

$(function(){
    console.log($(".son").offset());
    console.log($(".son").offset().top);
    
    $(".son").offset({
        top: 200,
        left: 200
    });
})

2.获取距离带有定位父级的位置（偏移）position 如果没有带有定位的父级，则以文档为准

这个方法只能获取不能设置

console.log($(".son").position());
$(".son").position({
    top: 200,
    left: 200
})

3.scrollTop()/scrollLeft()设置或获取元素被卷进去的头部和左侧

$(function(){
    var boxTop  = $(".container").offset().top;
    $(window).scroll(function(){
        console.log($(document).scrollTop());
        if ($(document).scrollTop() >= boxTop){
            $(".back").fadeIn();
        }else {
            $(".back").fadeOut();
        }
    })
})

上次更新: 2023/11/28, 22:03:59

← JavaScript DOM的基本使用 Ajax的基本使用→