一、简介
1.jquery是什么
jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。
2.jquery主要学习什么
目前这个阶段，主要学习如何来使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能方法。
3.jquery版本
版本一：1.x版本
版本二：2.x版本
版本三: 3.x版本
两个版本的区别：2.x版本，不再支持IE6、7、8
同版本两个文件的区别：
同版本两个文件的区别：
min：压缩版，压缩过后，体积会更小
压缩指的是：把注释、空格、换行全部去掉，把变量名称尽可能的换成更
加简短的字符。
压缩的主要目的：就是让文件变的更小。
平时开发过程中，这两个文件使用哪个都可以；但是，项目上线的时候
推荐使用压缩版。
4.获取jquery资源
wget https://code.jquery.com/jquery-3.4.1.min.js
5.使用jquery的步骤
5.1 引入jquery
<head>
<meta charset="utf-8">
<script type="text/javascript" src="lib/jquery-3.4.1.min.js"></script>
</head>
5.2 入口函数
入口函数：就是浏览器加载完文档后一定会调用入口函数中的内容并且执行。正常我们写的函数是必须需要调用才能执行
<script>
$(document).ready(function(){
alert(11111);
});
</script>
解释：
1.$(document) : $是jquery种的函数名称，document是函数的参数，作用是将document对象变成jquery函数库中可以使用的对象
2.ready: ready是jquery中的函数，当页面dom对象加载成功后会执行ready函数的内容。ready相当于onload事件。
3.function(): 自定义的函数，表示onload后要执行的功能
可以简写为：
<script>
$(function(){
代码
})
</script>
5.jquery的第一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert('hello world')
})
</script>
</head>
<body>
</body>
</html
二、DOM对象和jquery对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="lib/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
#使用原生js获取对象元素
var data1 = document.querySelector("#test");
#使用jquery获取对象元素
var data2 = $("#test");
console.log(data1);
console.log(data2);
})
</script>
</head>
<body>
<div id='test'></div>
</body>
</html>
1.jquery对象
Jquery对象是一个数组，数组中包含着原生js中的DOM对象。
这里的data2就是jquery对象
var data2 = $("#test");
使用jquery获取后的对象是这样的：
k.fn.init [div#test] ：是一个数组
2.DOM对象
使用javascrip的语法常见的对象就叫做DOM对象。
这里的data1就是DOM对象
var data1 = document.querySelector("#test");
使用DOM 获取的对象原始是这样的
<div id='test'></div>
3.jquery和DOM对象的相互转换
为什么要互相转换, 当你是DOM对象时，可以使用DOM对象的属性或者方法，如果你要使用jquery提供的的函数，就必须要转换成jquery才行。
3.1 dom转jquery
语法：
$(dom对象)
3.2 jquery转换成dom
取出jquery数组中的第一个对象 就是DOM对象
三、jquery选择器
| 选择器名称 | 语法格式 | 注释 |
|---|---|---|
| id选择器 | $(“#id名”) | 基本选择器 |
| 类选择器 | $(“.class名称”) | 基本选择器 |
| 标签选择器 | $(“标签名称”) | 基本选择器 |
| 混合选择器 | $(“#id名,.类名,标签”) | 可以同时选择多个不同类型的元素 |
| 子代选择器 | $(“父标签 子标签”) | 包含所有的子标签，不论层级 |
| 后代选择器 | $(“父标签 > 子标签”) | 包含一级子标签。不包含子子标签 子子子标签 |
| 表单选择器 | $(“:type的属性值”) | 比如：$(“:text”) 选取所有单排文本框 |
| $(“:password”) 选取所有的密码框 | ||
| $(“:radio”)选取所有的单选框 等等 | ||
例子1: 基本选择器
button按钮的onclick事件分别调用test和div函数就能看到 我们通过jquery对象获取到了3个不同的div元素
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="lib/jquery-3.4.1.min.js"></script>
<style>
div {
width:200px;
height:200px;
background:pink;
border: solid 1px blue;
}
button {
width:50px;
height:30px;
background: yellow;
}
</style>
</head>
<body>
<div id="test"></div>
<div class="test1"></div>
<div ></div>
<button onclick="div()">按钮</button>
</body>
<script type="text/javascript">
function test(){
var test = $("#test");
var test1 = $(".test1")
test.css("background",'red');
test1.css("background",'red');
}
function div(){
var div_all = $("div");
div_all.css("background","yellow");
}
</script>
</html>
例子2：混合选择器
function test(){
var test = $("#test,.test1,span");
test.css("background",'red');
}
例子3：子代选择器
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="lib/jquery-3.4.1.min.js"></script>
<style>
ul,ol {
margin:0px;
padding:0px;
list-style:none;
background: red;
}
span,div {
width:200px;
height:200px;
background:pink;
border: solid 1px blue;
}
button {
width:50px;
height:30px;
background: yellow;
}
</style>
</head>
<body>
<ul>
<ul>
<li>无需列表</li>
</ul>
<ol>
<li>有序列表</li>
<ol>
<li>有序列表1</li>
</ol>
</ol>
</ul>
<button onclick="test()">按钮</button>
</body>
<script type="text/javascript">
function test(){
var test = $("ul > ol");
test.css("background",'yellow');
}
</script>
</html>
四、过滤器
过滤器不能单独用，必须要在选择器的基础上结合使用
| 过滤器 | 含义 |
|---|---|
| $(“选择器:first”) | 获取第一个dom对象 |
| $(“选择器:last”) | 获取最后一个dom对象 |
| $(“选择器:eq(数组中的下标)”) | 获取指定下标的dom对象 |
| $(“选择器:lt(下标)”) | 获取小于下标的所有dom对象 |
| $(“选择器:gt(下标)”) | 获取小于下标的所有dom对象 |
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试项目</title>
<script src="./lib/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
div {
background-color: gray;
width: 100px;
height: 100px;
border-bottom: solid 1px red;
}
</style>
</head>
<body>
<div>我是第1个div</div>
<div>我是第2个div</div>
<div>我是第3个div</div>
<div>我是第4个div</div>
<button type="button" onclick="d1()">选择第1个div</button>
<button type="button" onclick="d2()">选择第2个div</button>
<button type="button" onclick="c1()">选择第3个div</button>
<button type="button" onclick="c2()">选择第4个div</button>
</body>
<script type="text/javascript">
function d1() {
var div1 = $("div:first");
div1.css("background","red");
}
function d2(){
var div2 = $("div:eq(1)")
div2.css("background","red");
}
function c1(){
var div3 = $("div:lt(3)");
div3.css("background","red");
}
function c2(){
var div4 = $("div:last");
div4.css("background","red");
}
</script>
</html>
五、jquery中的事件绑定方式
| 事件函数 | 含义 |
|---|---|
| click() | 鼠标点击事件 |
| mouseover() | 鼠标移入事件 |
| mouseout() | 鼠标移出事件 |
语法：
$(选择器).事件名称(处理函数)
jquery提供了事件函数，就不需要在标签中使用onclick调用函数了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试项目</title>
<script src="./lib/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
div {
background-color: gray;
width: 100px;
height: 100px;
border-bottom: solid 1px red;
}
</style>
</head>
<body>
<div>我是第1个div</div>
<div>我是第2个div</div>
<div>我是第3个div</div>
<div>我是第4个div</div>
<button type="button">选择第1个div</button>
<button type="button">选择第2个div</button>
<button type="button">选择第3个div</button>
<button type="button">选择第4个div</button>
</body>
<!-- 这里就是使用jquery的事件绑定语法写的绑定事件 -->
<script type="text/javascript">
$("button:first").click(function(){
$("div:first").css("background","red");
})
</script>
</html>
六、jquery常用函数
| 函数名 | 含义 |
|---|---|
| $(‘选择器’).css（） | 上边的的例子中都用到这个函数了，修改元素的CSS样式 |
| $(“选择器”).val() | 获取标签的value属性值 |
| $(“选择器”).text() | 获取所有dom对象的文字显示内容 |
| $(“选择器”).attr(“属性名”) | 获取DOM对象的属性值 |
1.val函数
<input type="text" name="zhangfei" id="zf" value="张飞" />
<input type="text" name="liubei" id="lb" value="刘备" />
<input type="text" name="guanyu" id="gy" value="关羽" />
<script type="text/javascript">
var data = $("input:eq(1)").val();
console.log(data);
// 修改value的value值
$("input:eq(1)").val("刘备1");
console.log($("input:eq(1)").val());
</script>
2.text()函数
<body>
<div>我是第一个div</div>
<div>我是第二个div</div>
<div>我是第三个div</div>
<button>大按钮</button>
</body>
<script type="text/javascript">
$("button").click(function(){
var data = $("div:eq(1)").text();
alert(data);
$("div:eq(1)").text('我是修改后的第二个div');
})
</script>
3.attr()函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试项目</title>
<script src="./lib/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
div {
background-color: gray;
width: 100px;
height: 100px;
border-bottom: solid 1px red;
}
.test {
background: red;
}
</style>
</head>
<body>
<div>我是第一个div</div>
<div>我是第二个div</div>
<div>我是第三个div</div>
<button>大按钮</button>
</body>
<script type="text/javascript">
$("button").click(function(){
$("div:eq(1)").attr('class','test');
})
</script>
</html>
4.each函数
这个函数主要是可以循环js数据、dom对象数据、json数据
语法：
$("选择器").each(function(自定义索引变量,自定义数据变量){
语句
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试项目</title>
<script src="./lib/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
div {
background-color: gray;
width: 100px;
height: 100px;
border-bottom: solid 1px red;
}
.test {
background: red;
}
</style>
</head>
<body>
<div id="t1">我是第一个div</div>
<div id="t2">我是第二个div</div>
<div id="t3">我是第三个div</div>
<button>大按钮</button>
</body>
<script type="text/javascript">
$("button").click(function(){
$("div").each(function(index,data){
alert('索引为' + index + '的div的值为' + $(data).text());
})
})
</script>
</html>
注意：这里的data之所有加上$()是为了把data转换成jquery对象。
七、jquery的ajax函数
$相当于一个类
1.$.ajax()
jquery中实现ajax的核心函数。他的参数是个json的结构
格式是这样的格式，但是返回的结果被浏览器阻止了
<script type="text/javascript">
$.ajax({
url: "https://www.baidu.com",
method: 'POST',
data: {name: 'zhangsan',age: 18},
success: function(res){
console.log(res);
}
})
</script>
2.$.post()
使用post的方式发送ajax请求
3.$.get()
使用get的方式发送请求
扫一扫
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
