Jquery学习笔记
网页模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery学习</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-3.5.1.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="container">
<div id="top">
</div>
<div id="center">
<div class="box-container">
<h1>用户注册</h1>
<form name="myform">
<input class="inbox" type="text" placeholder="用户名"><br><br>
<input class="inbox" type="password" placeholder="密码"><br><br>
<input class="inbox" type="email" placeholder="邮箱"><br><br>
<input class="inbox" type="tel" placeholder="电话"><br><br>
</form>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
Jquery选择器
$(function () {
console.log($("#center").prop("tagName"))
console.log($(".box").prop("tagName"))
console.log($(".box.bnbox").prop("tagName"))
console.log($(".box-container:first").prop("tagName"))
console.log($("[name]").prop("tagName"))
console.log($("[name='myform']").prop("tagName"))
console.log($("div").css( "background-color","orchid").prop("tagName"))
})
Jquery事件
jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
$("h1").click(function () {
alert("点击了1次")
})
$("h1").dblclick(function () {
alert("点击了2次")
})
Jquery显示/隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery学习</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-3.5.1.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="box">
</div>
<br>
<div style="text-align: center">
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="tog">显示/隐藏</button>
</div>
</body>
</html>
$(function () {
$("#show").click(function () {
$("#box").show()
})
})
show():
$("#hide").click(function () {
$("#box").hide()
})
hide():
$("#tog").click(function () {
$("#box").toggle()
})
toggle(speed,callback):
Jquery淡入淡出
<button id="fadein">FadeIn</button>
<button id="fadeout">FadeOut</button>
<button id="fadetog">FadeToggle</button>
<button id="fadeto">FadeTo</button>
fadeIn(speed,callback):
$(function () {
$("#fadein").click(function () {
$("#box").fadeIn()
})
})
fadeOut(speed,callback):
$("#fadeout").click(function () {
$("#box").fadeOut()
})
fadeToggle(speed,callback):
$("#fadetog").click(function () {
$("#box").fadeToggle()
})
fadeTo(speed,opacity,callback):
$("#fadeto").click(function () {
$("#box").fadeTo(1000,1,function () {
alert("ok")
})
})
Jquery滑动
<button id="slidedown">slideDown</button>
<button id="slideup">slideUp</button>
<button id="slidetoggle">slideToggle</button>
slideDown(speed,callback):
$("#slidedown").click(function () {
$("#box").slideDown(1000)
})
slideUp(speed,callback):
$("#slideup").click(function () {
$("#box").slideUp(1000)
})
slideToggle(speed,callback):
$("#slidetoggle").click(function () {
$("#box").slideToggle(1000)
})
Jquery动画
<button id="startAnime">startAnime</button>
<button id="reset">reset</button>
animate({params},speed,callback)
$("#startAnime").click(function () {
$("#box").animate({width:"25%"},1000)
})
$("#reset").click(function () {
$("#box").animate({width:"50%"},1000)
})
操作多个属性
$("#startAnime").click(function () {
$("#box").animate({
width:"25%",
opacity:"0.5",
},1000)
})
$("#reset").click(function () {
$("#box").animate({
width:"50%",
opacity:"1",
},1000)
})
animate队列
$("#startAnime").click(function () {
$("#box").animate({width:"25%",},1000)
$("#box").animate({height:"80%",},1000)
})
$("#reset").click(function () {
$("#box").animate({width:"50%",height:"50%", opacity:"1",},1000)
})
stop(stopAll,goToEnd)
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
<button id="startAnime">startAnime</button>
<button id="stop">stop</button>
<button id="reset">reset</button>
$("#startAnime").click(function () {
$("#box").animate({width:"25%",},1000)
$("#box").animate({height:"80%",},1000)
})
$("#stop").click(function () {
$("#box").stop(true)
})
$("#reset").click(function () {
$("#box").animate({width:"50%",height:"50%", opacity:"1",},1000)
})
Jquery链式编程
通过 jQuery,可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)
$("#box")
.animate({width:"25%",},1000)
.animate({height:"80%",},1000)
jQuery获取/设置 内容和属性
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值
prop() 如果有相应的属性,返回指定属性值,否则返回空串
(适用于HTML元素本身就带有的固有属性,如checked,disabled )
获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery学习</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-3.5.1.js"></script>
<script src="js/jq.js"></script>
</head>
<body>
<div id="box">
</div>
<br>
<div style="text-align: center">
<button id="startAnime">startAnime</button>
<button id="stop">st<br></br>op</button>
<button id="reset">reset</button>
<br>
<form>
<input type="checkbox" value="菜单1">菜单1
<input type="checkbox" value="菜单2">菜单2
<input type="checkbox" value="菜单3">菜单3
<input type="checkbox" value="菜单4">菜单4
<input type="checkbox" value="菜单5">菜单5
</form>
</div>
</body>
</html>
$(function () {
$("#startAnime").click(function () {
console.log( $("#startAnime").text())
})
$("#stop").click(function () {
console.log($("#stop").html())
})
$("#reset").click(function () {
console.log($(":checkbox:first").val())
})
})
设置
<form>
<input type="input" class="inp" value="菜单1">菜单1
<input type="checkbox" value="菜单2">菜单2
<input type="checkbox" value="菜单3">菜单3
<input type="checkbox" value="菜单4">菜单4
<input type="checkbox" value="菜单5">菜单5
</form>
$("#startAnime").click(function () {
console.log( $("#startAnime").text("ABC"))
})
$("#stop").click(function () {
console.log($("#stop").html("<br>vg"))
})
$("#reset").click(function () {
console.log($(".inp").val("checked"))
})
jQuery添加元素
append() - 在被选元素内部的结尾插入内容
prepend() - 在被选元素内部的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容