jQuery使用(超详细)

一、jQuery介绍

1.JQuery简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库,jQuery的宗旨:用最少的代码!

2.jQuery官网

官方地址:点击打开

官方文档:点击打开

二、jQuery的简单使用

1.JQuery的引用

本地引入:将jQuery下载下来,然后导入项目中,使用script标签进行引用

html 复制代码
<head>
    <script src="jquery-1.9.1.min.js"></script>
</head>    

CDN引入:使用远程CDN资源库在线引入,避免了文件下载(本教程所采用)

html 复制代码
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>    

2.JQuery快速使用

html 复制代码
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function(){		//表示页面加载完成之后,相当于window,onload =function(){}
				var $btnObj=$("#btnId");		//表示按id查询标签对象
				$btnObj.click(function(){		//绑定单击事件
					alert("jquery 的单击事件")
				});
			});
			
		</script>
	</head>
	<body>
		
		<button id="btnId">SayHello</button>
	</body>

运行结果

是jQuery的核心函数,能完成jquery的很多功能。()就是调用$这个函数

三、核心函数的四个作用

*1. 传入参数为[函数]是,在文档加载完成以后执行这个函数

* 2.传入参数为[HTML字符串]时,根据这个字符串创建元素节点对象

* 3.传入参数为[选择器字符串]时,根据这个字符串查找元素节点对象

* 4.传入参数为[DOM对象]时,将DOM对象包装为jQuery对象返回

  1. 传入参数为[函数]是,在文档加载完成以后执行这个函数

表示页面加载完成之后,相当于window.οnlοad=function(){}

2.传入参数为[HTML字符串]时,根据这个字符串创建元素节点对象

会对我们创建这个html标签对象

html 复制代码
<script>
$(function(){
            // 2.传入参数为[HTML 字符串]时:根据这个字符串创建元素节点对象
            $("<span>div-span1</span>").append("body");
        })
</script>

3.传入参数为[选择器字符串]时,根据这个字符串查找元素节点对象

$("#id属性值") id选择器,根据id查询标签对象

$("标签名") 标签名选择器,根绝指定的标签名查询标签对象

$(".class属性值") 类型选择器,可以根据class属性查询标签对象

4、传入参数为 [DOM对象] 时,

会把这个dom对象转换成jQuery对象,即 [object HTMLSpanElement] ======> [object Object]

实例:

html 复制代码
<script>
$(function(){
				// alert("页面加载完成之后,自动调用");
				$(" <div>"+
				"<span>div-span1</span>"+
				"<span>div-span2</span>"+
					"</div>").appendTo("body");
			
			var span01=document.getElementById("s01");
			
			alert(span01);
			alert($(span01));
			
			
			});
</script>

            <body>
		<span id="s01"></span>
	        </body>

结果

四、DOM对象和JQuery对象

1.DOM对象形式

2.jQuery对象

jQuery对象的本质

jQuery对象的本质是dom对象的数组+jQuery提供的一系列的功能函数

实例

代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a03_JQuery/a02_DOM对象和JQuery对象.html</title>
    <script src="js/jquery-3.7.0.js"></script>
    <script>
        $(function(){
            var arr=[12,"abc",true];
            var $btns=$("button")
            alert(1);
        });
    </script>
</head>
<body>
    <button id="btn1">very Good!!</button>
    <button id="btn2">使用DOM</button>
    <button id="btn3">使用Jquery对象调用JQuery方法</button>
    <button id="btn4">使用jQuery对象调用DOM方法</button>
    
</body>
</html>

代码运行调试,弄断点重新刷新页面进行调试

3.jQuery对象和DOM对象相互转换

jQuery和DOM的使用方法是不一样的,不能混淆使用

就比如说,

js当中是

document.getElementById("testDiv").innerHTML="这个就是DOM对象的属性值innerHTML";

JQuery当中就没有这个,写

$("#testDiv").innerHTML="这个就是DOM对象的属性值innerHTML";

不会起效果

五、选择器

1.id选择器

2.标签选择器

3.类选择器

4.组合选择器

5.全选选择器

相关推荐
熊的猫39 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel