jQuery学习
01 jQuery安装
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：
从 jquery.com 下载 jQuery 库
或从https://www.jq22.com/jquery-info122下载压缩包
有两个版本
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
引用
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
02页面加载函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script>
//第一种写法
jQuery(document).ready(function()
{
var domS1=document.getElementById("s1");
console.log(domS1.innerText);
})
//第二种写法
//jQuery也可以用$来表示
$(document).ready(function(){
var domS1=document.getElementById("s1");
console.log(domS1.innerText);
})
//第三中写法（推荐使用）
$(function(){
var domS1=document.getElementById("s1");
console.log(domS1.innerText);
})
</script>
</head>
</head>
<body>
<span id="s1">helloword</span>
</body>
</html>
03jQuery选择器的引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.y {border: 1px solid red;
width: 100px;
height: 100px;
}
.x {
background-color: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
var d1=$("#d1");
d1.addClass("x");
})//选择id=d1，然后在class中加入x
//进一步化简
$(function(){
$("#d1").addClass("x");
})
</script>
</head>
<body>
<div id="d1" class="y"></div>
</body>
</html>
04基本选择器
// 必须自己会使用的选择器 id选择器 $("#id") 类选择器 $('.class属性值') 标签选择器 $("标签名")
$(function(){
//标签选择器 $("a")
//$("h3").addClass("myClass");
//$("p").addClass("myClass");
//ID选择器 $("#id") $("p#id")
//$("#h31").addClass("myClass");
//$("h3#h31").addClass("myClass");
//类选择器 $(".class") $("h2.class")
//$(".red1").addClass("myClass");
//通配选择器 $("*")
//$("*").addClass("myClass");
//并集选择器$("elem1,elem2,elem3")
//$("#h31,span,div").addClass("myClass");
//后代选择器$(ul li)
//$("p span").addClass("myClass");
//父子选择器 $(ul>li)
//$("p>span").addClass("myClass");
//后面第一个兄弟元素 prev + next
//$("h3+p").addClass("myClass");
//后面所有的兄弟元素 prev ~ next 同一级
$("h3~p").addClass("myClass");
});
05属性选择器
$(function() {
//[attribute]
//$("a").addClass("myClass");
//$("a[href]").addClass("myClass");
//[attribute1][attribute2]
//$("a[href][title]").addClass("myClass");
//[attribute=value]
//$("a[href='film-2.html']").addClass("myClass");
//[attribute!=value]
$("a[href][href!='film-2.html']").addClass("myClass");
//[attribute^=value] ^表示以（hhtp）什么开头
//$("a[href^='http']").addClass("myClass");
//[attribute$=value] href$=htm表示以htm结尾的
//$("a[href$='htm']").addClass("myClass");
//[attribute*=value] *包含什么元素
//$("a[href*='mashibing']").addClass("myClass");
});
06位置选择器
$(function(){
//位置针对整个页面
//:first :last :odd(奇数) :even(偶数)
//$("p:first").addClass("myClass");
//$("p:last").addClass("myClass");
//$("p:odd").addClass("myClass");//索引从0开始 奇数的索引 1 3 5 第偶数的元素
//$("p:even").addClass("myClass");
//:eq(n) :gt(n) :lt(n) 从0开始数
//$("p:eq(4)").addClass("myClass"); //equals
//$("p:lt(4)").addClass("myClass");//less than
//$("p:gt(4)").addClass("myClass");//greater than
//位置针对上级标签
//:first-child（同一级第一个） :last-child :only-child（同一级只有一个）
//$("p:first-child").addClass("myClass");
//$("p:last-child").addClass("myClass");
//$("p:only-child").addClass("myClass");
//:nth-child(n)第几个 :nth-child(odd|even) :nth-child(xn+y)
//索引从0开始 只有此处从1开始
//$("p:nth-child(2)").addClass("myClass");
//$("p:nth-child(odd)").addClass("myClass");
//$("p:nth-child(even)").addClass("myClass");
$("p:nth-child(3n+1)").addClass("myClass");//n=0,1,2,3
});
07表单选择器
$(function() {
//:text :password :radio :checkbox :hidden :file :submit
//var arr =$("input"); // 标签名选择器
//var arr = $("input[type=hidden]");
//var arr = $("input:hidden");
//:input 匹配所有 input, textarea, select 和 button 元素
//var arr = $("input,select,textarea,button");
//var arr = $(":input");
//:selected :checked :enabled :disabled
//var arr = $(":disabled");
//var arr = $(":enabled");
//var arr = $(":input:not(:disabled)");
//var arr = $(":checked");
//var arr = $(":selected");
//:hidden :visible
var arr = $("input:hidden")
//var arr = $(":input:visible")
for(var i = 0; i < arr.length; i++) {
console.info(arr[i]);
}
});
08操作元素属性
点击按钮获得属性，修改属性，删除属性和添加属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a{
background-color: aqua;
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.min.js" ></script>
<script>
/*
*attr()
*
* */
function fun1(){
console.log($("#f1").attr("color"))
console.log($("#f1").attr("id"))
console.log($("#f1").attr("size"))
}
function fun2(){
$("#f1").attr("color","green")
$("#f1").attr("size","5")
}
function fun3(){
$("#f1").removeAttr("color")
}
function fun4(){
$("#f1").attr("class","a")
}
</script>
</head>
<body>
<font id='f1' color="red" size="7" >牛气冲天</font>
<hr />
<input type="button" value="获得属性" onclick="fun1()" />
<input type="button" value="修改属性" onclick="fun2()" />
<input type="button" value="删除属性" onclick="fun3()" />
<input type="button" value="添加属性" onclick="fun4()" />
</body>
</html>
操作样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<style>
.a {
width: 100px;
height: 100px;
background-color: pink;
}
.b{
border: 10px solid green;
border-radius: 20px;
}
</style>
<script>
function fun1(){
//获取d1的css样式
console.log($("#d1").css("width"));
console.log($("#d1").css("height"));
console.log($("#d1").css("background-color"));
//修改样式
$("#d1").css("width","200px");
$("#d1").css("height","200px");
$("#d1").css("background-color","yellow");
}
function fun2(){
//添加class
$("#d2").addClass("b");
}
function fun3(){
//删除class
$("#d2").removeClass("b");
}
function fun4(){
//切换class
$("#d2").toggleClass("b") //原来有b就删除，没有b就添加
}
</script>
</head>
<body>
<div id="d1" class="a">
</div>
<input type="button" value="修改样式" onclick="fun1()" />
<div id="d2" class="a">
d2
</div>
<input type="button" value="添加class" onclick="fun2()" />
<input type="button" value="删除class" onclick="fun3()" />
<input type="button" value="切换class" onclick="fun4()" />
</body>
</html>
10操作文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<style>
.a {
width: 100px;
height: 100px;
background-color: pink;
}
.b{
border: 10px solid green;
border-radius: 20px;
}
</style>
<script>
function fun1(){
/*
innerText >>> text()
innerHTML >>> huml()
value >>> val
*/
console.log($("#d1").text());
console.log($("#d1").html());
console.log($("#i1").val());
}
function fun2(){
//修改文字内容
console.log($("#d1").text("<h1>niubi</h1>"));
//修改html内容
console.log($("#d1").html("<h1>niubi</h1>"));
//修改value值
console.log($("#i1").val("你好"));
}
function fun3(){
//删除标签内容
//$("#d1").html("");
//或者
$("#d1").empty("");
$("#i1").val("");
}
</script>
</head>
<body>
<input type="text" value="这里是文字" id="i1" />
<div id="d1" class="a">
a
<span>xxx</span>
b
</div>
<input type="button" value="获得标签内容" onclick="fun1()" />
<input type="button" value="修改标签内容" onclick="fun2()" />
<input type="button" value="删除标签内容" onclick="fun3()" />
</body>
</html>
11增删元素
append和appendTo
before和insertBefore
After和InsertAfter
都是主谓互换关系
$("#d1").append(span1);
h1.appendTo($("#d1"));
$("#d1").before(span2);
span3.insertBefore($("#d1"));
#### 12事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<style>
#d1 {
width: 200px;
height:200px;
border: 1px solid pink;
}
</style>
<script>
function fun1(){
//创建元素
var span1=$("<span></span>");
//设置样式
span1.css("color","red");
span1.css("border","1px solid blue");
span1.css("background-color","lightgray");
//设置内部文字
span1.text("今天天气很哈皮");
$("#d1").append(span1);
}
function fun2(){
//创建元素 //设置样式 //设置内部文字
var h1=$("<h3>今天天气很哈皮</h3>").css("color","green").css("order","1px solid yellow");
h1.appendTo($("#d1"));
}
function fun3(){
var span2=$('<span style="color: red;border:1px solid orangered;">测试文字</span>')
$("#d1").before(span2);
}
function fun4(){
var span3=$('<span style="color: red;border:1px solid orangered;">测试文字</span>')
span3.insertBefore($("#d1"));
}
function fun5(){
var span4=$('<span style="color: red;border:1px solid orangered;">测试文字</span>')
$("#d1").before(span4);
}
function fun6(){
var span5=$('<span style="color: red;border:1px solid orangered;">测试文字</span>')
span5.insertAfter($("#d1"));
}
function fun7(){
//清空div内部的所有元素
$("#d1").empty();
}
function fun8(){
//移除当前元素本身
$("#d1").remove();
}
</script>
</head>
<body>
<div id="d1" class="a">
</div>
<input type="button" value="testAppend" onclick="fun1()" />
<input type="button" value="testAppendTo" onclick="fun2()" />
<input type="button" value="testbefore" onclick="fun3()" />
<input type="button" value="testinsertBefore" onclick="fun4()" />
<input type="button" value="testafter" onclick="fun5()" />
<input type="button" value="testInsertAfter" onclick="fun6()" />
<input type="button" value="empty" onclick="fun7()" />
<input type="button" value="remove" onclick="fun8()" />
</body>
</html>
12事件处理
在jQuery中事件和js不一样(去掉on)
onmouseover--->mouseover
onmouseleave-->mouseleave
onclick-->click
三钟事件绑定方式
1.bind
$("#id").bind("mouseover",function(){
$("#id").css("background-color","green")
});
2.事件名
$("#id").mouseover(function(){
$("#id").css("background-color","green")
});
3.one (只绑定一次)
$("#id").one("mouseover",function(){
$("#id").css("background-color","green")
});
解除绑定
unbind()：解除绑定的所有事件
unbind("mouseover"):解除指定事件
触发事件
相当于发生了这件事
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<style>
#d1 {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script>
function fun1(){
//bind绑定
$("#d1").bind("mouseover",function(){
$("#d1").css("background-color","green");
});
//事件绑定
$("#d1").mouseleave(function(){
$("#d1").css("background-color","red");
});
//one:只绑定一次
}
function fun2(){
//解除所有绑定
$("#d1").unbind();
//解除指定绑定
$("#d1").unbind("mousevoer");
}
function fun3(){
$("#i1").focus();
}
function fun4(){
console.log("你好胖");
}
</script>
</head>
<body>
<div id="d1" class="a">
</div>
<input type="button" value="添加事件" onclick="fun1()" />
<input type="button" value="解除事件" onclick="fun2()" />
<br/>
<input type="text" id="i1" onfocus="fun4()" />
<input type="button" value="触发事件" onclick="fun3()" />
</body>
</html>
13jQuery对象和DOM对象的转换
DOM对象和jQuery对象之间的方法和属性是不通的
$(function(){
//原生DOM对象
var dom1=document.getElementById("d1");
console.log(dom1.innerText);
//Jquery对象
var dom2=$("#d1");
console.log(dom2.text());
console.log(dom1);
console.log(dom2);
//注意：不能直接使用console.log(dom1.text())或console.log(dom2.innerText)，需要转换
//原生DOM对象转换成jQuery对象
console.log($(dom1).text());
//jquery对象转换为DOM对象
console.log(dom2.get(0).innerText);
console.log(dom2[0].innerText);
})
<div id="d1">nihao</div>
14jQuery迭代方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery遍历方式</title>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
var $lis = $("li");
//复杂方法
console.log($lis);
for(var i=0;i<$lis.length;i++){
console.log($lis.get(i))
}
//e是一个原生DOM对象
$lis.each(function(i,e){
console.log(i+">"+$(e).text())
});
$.each($lis,function(i,e){
console.log(i+">"+$(e).text())
})
})
</script>
</head>
<body>
<ul>
<li>kobe</li>
<li>neymar</li>
<li>ronaldo</li>
<li>messi</li>
</ul>
</body>
</html>
15动画效果
| 属性 | 含义 |
|---|---|
| show | 显示 |
| hide | 隐藏 |
| toggle | 切换 |
| slideUp | 向上滑动 |
| slideDown | 向下滑动 |
| slideToggle | 滑动切换 |
| fadeIn | 淡入 |
| fadeOut | 淡出 |
| fadetoggle | 淡入淡出 |
| fadeTo | 逐渐变深/淡 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画效果</title>
<style>
#d1 {
height: 100px;
width: 100px;
background-color: red;
display: none;//隐藏
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script>
function fun1(){
/**
$("#d1").show(3000,function(){
alert('xss');
})**/
//show:显示
$("#d1").show(2000);
}
//hide:隐藏
function fun2(){
$("#d1").hide(3000);
}
//toggle:切换
function fun3(){
$("#d1").toggle(3000);
}
//变淡
function fun4(){
$("#d1").fadeTo(3000,0.4);
}
</script>
</head>
<body>
<div id="d1"></div>
<input type="button" value="show" onclick="fun1()">
<input type="button" value="hide" onclick="fun2()">
<input type="button" value="toggle" onclick="fun3()">
</body>
</html>
自定义动画
自定义动画$("").animate({动画内容}.执行时间，动画结束后执行的方法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义动画</title>
<style>
#d1 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script>
//自定义动画$("").animate({动画内容}.执行时间，动画结束后执行的方法)
$(function () {
$("#d1").animate({
width: "100px",
height: "100px",
opcity: 0.5,//透明度
borderRadius:"50px"//边框弧度
}, 2000, function () {
alert('xss');
})
})
</script>
</head>
<body>
<div id="d1"></div>
</body>
</html>
表单校验
正则表达式
| 代码 | 说明 |
|---|---|
| . | 匹配除换行符以外的任意字符 |
| \w | 匹配字母或数字或下划线或汉字 |
| \s | 匹配任意的空白符 |
| \d | 匹配数字 |
| \b | 匹配单词的开始或结束 |
| ^ | 匹配字符串的开始（在集合字符里[^a]表示非（不匹配）的意思 |
| $ | 匹配字符串的结束 |
常用的反义字符
| 代码 | 说明 |
|---|---|
| \W | 匹配任意不是字母，数字，下划线，汉字的字符 |
| \S | 匹配任意不是空白符的字符 |
| \D | 匹配任意非数字的字符 |
| \B | 匹配不是单词开头或结束的位置 |
| [^x] | 匹配除了x以外的任意字符 |
| [^aeiou] | 匹配除了aeiou这几个字母以外的任意字符 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单校验</title>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<style>
.myClass {
background-color: red;
}
</style>
<script>
$(function () {
$("#rb1").addClass("myClass");
})
function checkUsername() {
var reg1 = /^\D{6,}$/
var username = $("#user").val();
if (!reg1.test(username)) {
$('#usertip').html("<font color= 'red'>格式必须是6位非数字</font>");
return false;
}
$("#usertip").html("<font color='green'>填写正确</font>")
return true;
}
function checkPasswd() {
var reg2 = /^\S{5,}$/
var pwd = $("#pwd").val();
if (!reg2.test(pwd)) {
$("#pwdtip").html("<font color='red'>至少五位密码</font>")
return false;
}
$("#pwdtip").html("<font color='green'>OK</font>");
return true;
}
function checkRepwd() {
var p1 = $("#pwd").val();
var p2 = $("#repwd").val();
if (p1.length < 5 || p1 != p2) {
$("#repwdtip").html("<font color='red'>两次密码不一致</font>");
return false;
}
$("#repwdtip").html("<font color='green'>密码一致</font>");
return true;
}
function checkPhone() {
var reg3 = /^1[3456789]\d{9}$/
var p3 = $("#phone").val();
if (!reg3.test(p3)) {
$("#phonetip").html("<font color='red'>手机号不正确</font>")
return false;
}
$("#phonetip").html("<font color='green'>手机号正确</font>")
return true;
}
function checkForm() {
return checkUsername() && checkPasswd() && checkPhone() && checkRepwd();
}
</script>
</head>
<body>
<table>
<form action="http://www.baidu.com" method="get" onsubmit="return checkForm()">
<tr>
<td>姓名：</td>
<td>
<input type="text" name="username" id="user" onblur="checkUsername()">
<div id="usertip" style="display: inline;"></div>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd" id="pwd" onblur="checkPasswd()">
<div id="pwdtip" style="display: inline;"></div>
</tr>
<tr>
<td>
再次输入密码：
</td>
<td>
<input type="password" name="repwd" id="repwd" onblur="checkRepwd()">
<div id="repwdtip" style="display: inline;"></div>
</td>
</tr>
<tr>
<td>手机号：</td>
<td>
<input type="text" name="phone" id="phone" onblur="checkPhone()">
<div id="phonetip" style="display: inline;"></div>
</td>
</tr>
<tr>
<td><input type="submit" name="注册" id="rb1"></td>
</tr>
</form>
</table>
</body>
</html>
bootstrap
下载地址：https://v5.bootcss.com/docs/getting-started/download/
导入项目、配置
<!--bootscrpt样式库-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--jQuery-->
<script src="js/jquery-3.5.1.min.js"></script>
<!--popper-->
<script src="js/bootstrap.bundle.min.js"> </script>
<!--核心js文件-->
<script src="js/bootstrap.min.js"></script>
容器
<!--固定容器和流容器-->
<div class="container-sm" style="border:1px solid darkgreen;">
<h1 style:="background-color:gainsboro;">固定容器</h1>
<p>测试文字</p>
</div>
栅格系统(具有自适应窗口功能)
<div class="col-sm" style="background-color: lavender;border: 1px solid red;">
<body>
<div class="container">
<div class="row">
<div class="col-sm" style="background-color: lavender;border: 1px solid red;">
one of three columns
</div>
<div class="col-sm" style="background-color: lavender;border: 1px solid red;">
one of three columns
</div>
<div class="col-sm" style="background-color: lavender;border: 1px solid red;">
one of three columns
</div>
</div>
</div>
</body>
修改尺寸：class="col-sm-？"
开发之导航
查看菜鸟教程
导航栏使用下拉菜单
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
轮播
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/生活照2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/生活照3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/生活照4.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
