Jquery总结内容三jquery的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--导入jquery文件-->
<script src="jquery-3.6.js"></script>
<title>操作综合练习题</title>
<style>
*{
margin: 0px;
padding: 0px;
font-size: 20px;
font-weight: bold;
text-shadow: 5px 5px 5px red;
background-color: #CCFFFF;
}
button{
background: #FF0000;
color: white;
font-weight: bolder;
margin-right: 200px;
padding: 2px;
border: solid 1px dodgerblue;
height: 80px;
width: 200px;
}
div{
height: 100px;
width: 400px;
background: pink;
color:yellow ;
text-shadow: 6px 5px 5px red;
float: right;
padding: 4px;
}
article{
padding: 3px;
}
div1{
height: 200px;
width: 200px;
background-color: lightblue;
}
div2{
margin: auto;
float: left;
}
/*样式内容*/
</style>
</head>
<body>
<h1>
<marquee>
本案例讲述
1设置单样式
2 设置多样式
3 淡入淡出切换
4切换向上/向下slideDown/Up
5显示/隐藏show/hide
6 增加类 删除类 切换类
</marquee>
</h1>
<div style="background-color: #e5eecc;margin: auto">
<div>Happy birthday</div>
<div>中文:生日快乐</div>
<div>Happy birthday</div>
<div>Happy birthday</div>
<div>Happy birthday</div>
<div>中文:生日快乐</div>
<div>Happy birthday</div>
<div>Happy birthday to you me </div>
<div>笑一笑是年少</div>
<div>想一想今天是多少号</div>
<div1>Hello Wworld</div1>
<div1>想一想今天是多少号</div1>
</div>
<br>
<div2 style="margin: auto ; height: 50px;width: 200px;float: left" >
<button>设置单样式</button>
<button>设置多样式</button>
<button>淡入fadeIn</button>
<button>淡出fadeOut</button>
<button>切换淡入fadeToggle/淡出</button>
<button>向上slideUp</button>
<button>向下slideDown</button>
<button>切换向上/向下slideDown/Up</button>
<button>隐藏hide(4000)</button>
<button>显示show(4000)</button>
<button>显示/隐藏show/hide</button>
<button>增加类</button>
<button>删除类</button>
<button>切换类</button>
</div2>
<!--样式操作题-->
<script>
$(function () {
$('button').eq(0).click(function () {
$('div').css('width',400);
});
$('button').eq(1).click(function () {
$('div').css({
width: 500,
color: 'red',
height: 200,
backgroundColor: 'yellow',
fontSize: 46,
});
$('button').eq(2).click(function () {
$('div').fadeIn(2000)
});
$('button').eq(3).click(function () {
$('div').fadeOut(3000)
});
$('button').eq(4).click(function () {
$('div').fadeToggle(3000)
});
$('button').eq(5).click(function () {
$('div').slideUp(3000);
});
$('button').eq(6).click(function () {
$('div').slideDown(3000);
});
$('button').eq(7).click(function () {
$('div').slideToggle(4000);
});
$('button').eq(8).click(function () {
$('div').hide(4000);
});
$('button').eq(9).click(function () {
$('div').show()
});
$('button').eq(10).click(function () {
$('div').toggle(3000);
});
})
})
</script>
</body>
</html>观察上面的代码。仔细思考用到了拿些内容，那些事件，那些效果。
本案例讲述
1设置单样式
2 设置多样式
3 淡入淡出切换
4切换向上/向下slideDown/Up
5显示/隐藏show/hide
6 增加类 删除类 切换类
@1ctrl+E
<script>
$(function () {
var $li =$('<li style="color: greenyellow;">我是修改内容的结果</li>');
$('li:first').replaceWith($li);
$li.replaceAll('.li4');
});
</script>代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ctrl+e</title>
<style>
*{
font-size: 30px;
font-weight: bolder;
}
</style>
<script src="../jquery-3.6.js"></script>
</head>
<body>
<input type="button" value="修改内容" id="btn1">
<ul>
<li>我是第一个li1</li>
<li>我是第一个li12</li>
<li>我是第一个li13</li>
<li>我是第一个li14</li>
</ul>
<script>
$(function () {
var $li =$('<li style="color: greenyellow;">我是修改内容的结果</li>');
$('li:first').replaceWith($li);
$li.replaceAll('.li4');
});
</script>
<script>
$(function () {
var $li =$('<li style="color: red;">我是修改内容的结果</li>');
$('li:last').replaceWith($li);
$li.replaceAll('.li4');
});
</script>
</body>
</html>@2Jquery的标尺
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="Jquery选择器/jquery-3.6.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<h1>jQuery 提供多个处理尺寸的重要方法：
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()</h1>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>
<article>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div2").width() + "</br>";
txt+="Height of div: " + $("#div2").height() + "</br>";
txt+="Inner width of div: " + $("#div2").innerWidth() + "</br>";
txt+="Inner height of div: " + $("#div2").innerHeight();
$("#div2").html(txt);
});
});
</script>
</head>
<body>
<div id="div2" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:#9198e5;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>innerWidth() - 返回元素的宽度（包括内边距）。</p>
<p>innerHeight() - 返回元素的高度（包括内边距）。</p>
</body>
</html>
</article>
<article>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div3").width() + "</br>";
txt+="Height of div: " + $("#div3").height() + "</br>";
txt+="Outer width of div: " + $("#div3").outerWidth() + "</br>";
txt+="Outer height of div: " + $("#div3").outerHeight();
$("#div3").html(txt);
});
});
</script>
</head>
<body>
<h1>3</h1>
<div id="div3" style="height:100px;width:300px;padding:10px;margin:3px;border:5px solid yellow;background-color:lightcoral;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>
<p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p>
</body>
</html>
</article>
<h1>4</h1>
<article>
<html>
<head>
<script src="Jquery选择器/jquery-3.6.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Document width/height: " + $(document).width();
txt+="x" + $(document).height() + "n";
txt+="Window width/height: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});
});
</script>
</head>
<body>
<button>显示文档和窗口的尺寸</button>
</body>
</html>
</article>
<h1>5</h1>
<article>
<!DOCTYPE html>
<html>
<head>
<script src="Jquery选择器/jqueryui.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div5").width(320).height(320);
});
});
</script>
</head>
<body>
<div id="div5" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>调整 div 的尺寸</button>
</body>
</html>
</article>
</body>
</html>
效果
@3jquery效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script></script>
<title>Jquery效果-div 高度自己调 </title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
border: 0px;
}
.header{
height: 100px;
line-height: 100px;
background: #00BFFF;
}
.content{
margin-top:6px;
overflow: hidden;
}
.content .left{
width: 20%;
height: 100%;
background: #FF66CC;
float: left;
}
.content .right{
width: 80%;
height: 100%;
background: #98bf21;
float: right;
}
</style>
<script src="Jquery选择器/jquery-3.6.js"></script>
<script type="text/javascript">
function setHeight() {
var winh=$(window).height();
$(".left").css("height",winh-100+"px")
}
$(function () {
setHeight();
})
</script>
</head>
<body>
<div class="header">HEADER</div>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>代码
@4向上向下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jquery-3.6.js"></script>
<title>jquery滑动的三方</title>
<h1 style="color:darkred;">jQuery slideDown()
演示 jQuery slideDown() 方法。<br>
jQuery slideUp()
演示 jQuery slideUp() 方法。<br>
jQuery slideToggle()
演示 jQuery slideToggle() 方法。<br></h1>
</head>
<body>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("hide");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。</div>
</body>
</html>
@5显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jquery-3.6.js"></script>
<style>
*{
font-size: 50px;
color: green;
background-color: pink;
}
span2{
color: palevioletred;
}
</style>
<title>Jquery效果显示隐藏</title>
</head>
<body>
<span style="color: red;">今天朝有酒今早岁,来日无酒来日风</span>
<span2>我自横刀笑天笑，留下很多哈问题</span2>
<br>
<h1>
<!--显示-->
$('span').show(4000); 显示的效果为4秒
<hr>
$("span").hide(4000,function(){}隐藏的时间为四秒
<hr>
$('span2').toggle(3000); 显示的效果和隐藏的时间转换时间为3秒
</h1>
<p>hellow</p>
<script>
$("p").show("fast",function(){
$('p').show(4000);
$(this).text("<h1>Animation Done! Hellow world word do you me seee you<h1/>");
$(this).click(function () {
$(this).css("color:red");
alert("hellow");
})
});
$("p").hide(4000,function(){
$(this).text("Animation Done...");
});
$("span").hide(4000,function(){
$('span').show(4000);
$('span').show(4000);
});
$('span2').toggle(3000);
$('span2').toggle(4000);
</script>
</body>
</html>
@6内容操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容操作</title>
<style>
*{
font-size: 30px;
}
</style>
<script src="../jquery-3.6.js"></script>
</head>
<body>
<div>
<span>我是内容</span>
</div>
<div1>
11111111111111
</div1>
<!--<div>
<span>第二个div内容</span>
</div>-->
<input type="text" value="请输入内容">
<script>
$(function () {
console.log($('div').html());
console.log($('div1').text());
$('div').html('<div style="color: red">我是修改后的内容11111</div>');
$('div1').text('<div>我是修改后的内容</div>');
alert(div1);
});
console.log($('input').val());
$('input').val('我是修改的内容aaaaa');
</script>
</body>
</html>@7节点的增删
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
font-size: 50px;
}
</style>
<title>获取设置移除属性操作</title>
</head>
<body>
<script src="../jquery-3.6.js"></script>
<input type="button"value="获得属性" id="btn">
<input type="button"value="设置属性" id="btn1">
<input type="button"value="移除属性" id="btn2">
<br>
<br>
<img src="../img/jquery/666.jpg" alt="白天不息" title="晚上不睡" aaaa="aaaa" width="300" b="hellow">
<script>
$(function () {
/*设置属性*/
$("#btn1").click(function () {
$('img').attr('src', 'img/jquery/999.png');
$('img').attr('ccc', 'xinghjfjf');
$('img').attr('b', 'hellow');
$('img').attr({
width:600,
title:'你好'
});
console.log($('img').attr('src', 'img/jquery/999.png'));
console.log($('img').attr('ccc', 'xinghjfjf'));
console.log( $('img').attr({
width:600,
title:'你好'
}));
});
$("#btn").click(function () {
/*获取属性*/
console.log($('img').attr('src'));
console.log($('img').attr('aaaa'));
console.log($('img').attr('title'));
console.log ($('img').attr('b', 'hellow'));
});
$("#btn2").click(function () {
/*删除属性*/
console.log($('img').removeAttr('aaaa'));
console.log($('img').removeAttr('title'));
$('img').removeAttr('src');
$('img').removeAttr('src aaaa')
})
})
</script>
</body>
</html>@8淡入淡出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../jquery-3.6.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function () {
$("#div1").fadeIn("hide");
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
$("#div4").fadeIn();
$("#div5").fadeIn("hide");
$("#div6").fadeIn(3000);
});
$("#www").click(function () {
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
$("#div4").fadeOut();
$("#div5").fadeOut("hide");
$("#div6").fadeOut(3000);
});
$("#qqq").click(function () {
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
$("#div4").fadeTo("slow", 0.11);
$("#div5").fadeTo("slow", 0.14);
$("#div6").fadeToggle("slow", 0.27);
});
$("#er").click(function () {
$("#div6").fadeToggle(4000);
});
});
</script>
<title>淡入淡出不透明度fadeToggle</title>
</head>
<body>
<h1 style="background-color:yellowgreen ">
fadeIn()淡入
<hr>
fadeOut淡出
<hr>
fadeTo不透明度
<hr>
fadeToggle淡入/淡出
</h1>
<h1>以下实例演示了 fadeIn() 使用了不同参数的效果。</h1>
<button style="height: 200px">点击淡入 div 元素。</button>
<button style="height: 200px" id="www">点击淡出 div 元素。</button>
<button style="height: 200px" id="qqq">点击淡出 div 元素。</button>
<button style="height: 200px" id="er">fadeToggle</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><br>
<div id="div4" style="width:80px;height:80px;display:none;background-color:yellow;"></div><br>
<div id="div5" style="width:80px;height:80px;display:none;background-color:black;"></div><br>
<div id="div6" style="width:80px;height:80px;display:none;background-color:grey;"></div><br>
</body>
</html>@9类的增删改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
font-size: 60px;
}
div{
height: 200px;
width: 200px;
background: black;
}
.e{
height: 500px;
background: pink;
width: 400px;
}
.we{
background-color: royalblue;
color: #FF66CC;
}
</style>
<title>类的增加删除单多样式</title>
</head>
<script src="../jquery-3.6.js"></script>
<body>
<div></div>
<button>设置单样式</button>
<button>设置多样式</button>
<button>增加类</button>
<button>删除类</button>
<button>切类</button>
<script>
$(function () {
/* $('button').eq(0).click(function () {
$('div').css('width',300);
$('div').css('height',300);
});
$('button').eq(1).click(function () {
$('div').css({
width:400,
backgroundColor:'red'
});*/
$('button').eq(2).click(function () {
$('div').addClass('e');
$('div').addClass('we');
})
});
$('button').eq(3).click(function () {
$('div').removeClass('e')
});
$('button').eq(4).click(function () {
$('div').toggleClass('e')
});
/* });*/
</script>
</body>
</html>
@10遍历节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历节点</title>
<script src="../jquery-3.6.js"></script>
</head>
<body>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<script>
$(function () {
// 1. 隐式迭代 同一类元素做同样的操作
// $('h1').css('color', 'red');
// 2. 遍历 同一类元素做不同操作 （类似for 比for强大）
// 方法1 each()方法 回调函数第一个参数必须是索引号 回调函数第二个参数行必须是 dom元素对象
var sum = 0;
var arr = ['red', 'green', 'blue'];
$('h1').each(function (i, domEle) {
console.log(i);
console.log($(domEle));
$(domEle).css('color', arr[i]);
sum += $(domEle).text(); // 字符相连
sum += parseInt($(domEle).text());
});
console.log(sum);
// 方法2 $.each 主要用于遍历数据 处理数据
$.each($('h1'), function (i, ele) {
console.log(i);
console.log(ele);
});
// 遍历数组
$.each(arr, function (i, ele) {
console.log(i);
console.log(ele);
});
// 遍历对象
$.each({
name: 'nihao',
age: 18
}, function (i, ele) {
console.log(i);
console.log(ele);
});
});
</script>
</body>
</html>