<!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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/387921.html
標籤：其他
上一篇：在C#中檢查ifthen的空值
下一篇：前端面試題