一、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对象返回
- 传入参数为[函数]是,在文档加载完成以后执行这个函数
表示页面加载完成之后,相当于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";
不会起效果