一、jquery
1.简介
A.就是对js的一个简单的封装 优化Html文档操作 事件处理 动画设计 ajax交互
B.适配了各种主流的浏览器
C.轻量级的前端框架
2.下载
官网下载地址:https://jquery.com/
二、引入jquery
1.1 step01 将jquery.js放入到js文件夹下
step03 新建html界面 引入js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
<body>
</body>
</html>
1.2 CDN引入
使用网站中的jquery文件 可以不用进行下载 直接引入网站中资源
1.2.1 百度 CDN
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
1.2.2 新浪 CDN
<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
1.2.2 Google CDN
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
- jquery的准备函数
1.jquery的符号:$
2.准备函数的特点:
A.准备函数有多种写法
B.js的window.onload准备函数优先于jquery的准备函数执行
C.jquery的准备函数可以定义多个 都会执行 js中准备函数只执行一次
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
<body>
<script>
window.onload=function(){
alert("2222");
};
window.onload=function(){
alert("333");
}
$(function(){
alert("1111");
});
$(document).ready(function(){
alert("44444444");
});
</script>
</body>
</html>
三、 jquery与js之间的相互转换
1.jquery 转换为js ==> jquery[0] 或者 jquery.get(0);
2.js 转换为jquery ==>$(js对象)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
<body>
<input type="text" value="aaaaaaaaa" id="tv_uname" />
<input type="button" value="点击" onclick="show()"/>
<script>
function show(){
alert(document.getElementById("tv_uname").value);
var uname= document.getElementById("tv_uname");
alert($(uname).val())
var juname =$(uname);
alert(juname[0].value);
alert(juname.get(0).value);
}
</script>
</body>
</html>
四、 jquery 的三种基本选择器
和css三种选择器一样
注意点:类选择器与标签选择器 返回多个还是单个都是js对象数组 id选择器返回一个是jquery对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<body>
<input type="button" value="点击01" onclick="show01()" />
<input type="button" value="点击02" onclick="show02()" />
<input type="button" value="点击03" onclick="show03()" />
<p>
<input type="checkbox" class="tv_class" value="球王邓灯" />球王邓灯
<input type="checkbox" value="睡王程奔" />睡王程奔
<input type="checkbox" value="嫖王雷凌" />嫖王雷凌
</p>
<input type="text" id="tv_uname" />
<script>
function show01(){
alert($("#tv_uname").val());
}
function show02(){
//alert($(".tv_calss").val());
//返回的是一个js数组
var arrays = $(".tv_class");
for (var i = 0; i < arrays.length; i++) {
alert(arrays[i].value);
}
}
function show03(){
var arrays=$("input");
for (var i = 0; i < arrays.length; i++) {
alert(arrays[i].value);
}
}
</script>
</body>
</html>
五.jquery 的事件
注意点:jquery中事件同js时间比将on去除
理解代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<body>
<input type="button" id="tv_but01" value="点击" />
<input type="button" id="tv_but02" value="双击" />
<p>昆明飞往广州</p>
<input type="text" id="tv_u" />
<h3>周末反反复复放</h3>
<script>
$("#tv_but01").click(function(){
alert("点击事件");
});
$("#tv_but02").dblclick(function(){
alert("双击");
});
$("p").mouseout(function(){
console.log("移出")
}).mouseover(function(){
console.log("移入");
});
$("#tv_u").blur(function(){
$(this).css({"background-color":"red"});
}).focus(function(){
$(this).css({"background-color":"#ffffff"});
});
$("h3").hover(function(){
console.log("1111");
},function(){
console.log("22222");
});
</script>
</body>
</html>
六.jquery 特效
8.1 显示与隐藏
8.2 淡入淡出
8.3 滑动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" value="显示" id="tv_show" />
<input type="button" value="隐藏" id="tv_hide" />
<input type="button" value="显示隐藏" id="tv_show_hide" />
<div></div>
<script>
$("#tv_hide").click(function() {
/*$("div").hide(1000,function(){
alert("11111");
})*/
// $("div").fadeOut(5000);
$("div").slideUp(2000);
});
$("#tv_show").click(function() {
// $("div").show(1000,function(){
// alert("22222");
// })
// $("div").fadeIn(5000);
$("div").slideDown(2000);
});
$("#tv_show_hide").click(function() {
//$("div").toggle(2000);
$("div").slideToggle(2000);
})
</script>
</body>
</html>
七、jquery动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
<style>
div{
width: 200px;
height:200px;
background-color: red;
position: relative;
}
</style>
<body>
<div></div>
<button id="tv_id">点击</button>
<button id="tv_stop">停止</button>
<script>
$("#tv_id").click(function(){
$("div").animate({
/*left:"250px",
opacity:"0.5",
height:"+=150px",*/
width:"toggle"
},4000);
});
$("#tv_stop").click(function(){
$("div").stop();
});
</script>
</body>
</html>
八、jquery 操作DOM
8.1 属性操作方法
和js的innerHtml innertext value 属性名="" 的作用一样,不过js是写在()内 例如:获取属性值 js是 标签对象.属性名 jquery是标签对象.attr(属性名) 更改 js是 标签对象.属性名=更改的值 jquery是标签对象.attr(属性名,更改的值)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
</head>
<body>
<input type="button" value="点击01" onclick="show01()" />
<input type="text" id="tv_uname" />
<input type="checkbox" id="tv_check" value="槟榔" />槟榔
<div id="tv_div"><span>睡着了</span></div>
<img src="img/gm01.jpg" />
<script>
function show01() {
//alert($("img").attr("src"));//img/gm01.jpg
//alert($("img").prop("src"));//http://127.0.0.1:8020/day06/img/gm01.jpg
//$("#tv_check").attr("checked",true);//勾选选择框
$("#tv_check").prop("checked",true);//勾选选择框
//alert($("#tv_div").html());//<span>睡着了</span>
//alert($("#tv_div").text());//睡着了
//$("#tv_div").html("<span style='color:red'>太难了</span>");//将睡着了换成红色的睡着了
//$("#tv_div").text("<span style='color:red'>太难了</span>");//<span style='color:red'>太难了</span>
//alert($("#tv_uname").val());//弹出输入框里的值
//$("#tv_uname").val("呵呵呵");//输入框填入呵呵呵
}
</script>
</body>
</html>