標籤：doctype padding ops back href 3.1 link har styles
動畫效果顯示隱藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> <script>$(document).ready(function() { $("#hide").click(function () { $("p").hide(1000); }); $("#show").click(function () { $("p").show(1000); });//用於切換被選元素的 hide() 與 show() 方法。 $("#toggle").click(function () { $("p").toggle(); });}) </script> <link type="text/css" rel="stylesheet" href="style.css"></head><body> <p>hello</p> <button id="hide">隱藏</button> <button id="show">顯示</button> <button id="toggle">切換</button></body></html>View Code滑動
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> <script> $(document).ready(function(){ $("#slideDown").click(function(){ $("#content").slideDown(1000); }); $("#slideUp").click(function(){ $("#content").slideUp(1000); }); $("#slideToggle").click(function(){ $("#content").slideToggle(1000); }) }); </script> <style> #content{ text-align: center; background-color: lightblue; border:solid 1px red; display: none; padding: 50px; } </style></head><body> <div id="slideDown">出現</div> <div id="slideUp">隱藏</div> <div id="slideToggle">toggle</div> <div id="content">helloworld</div></body></html>View Code淡入淡出
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> <script> $(document).ready(function(){ $("#in").click(function(){ $("#id1").fadeIn(1000); }); $("#out").click(function(){ $("#id1").fadeOut(1000); }); $("#toggle").click(function(){ $("#id1").fadeToggle(1000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); });}); </script></head><body> <button id="in">fadein</button> <button id="out">fadeout</button> <button id="toggle">fadetoggle</button> <button id="fadeto">fadeto</button> <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div></body></html>View Code回呼函數
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script></head><body> <button>hide</button> <p>helloworld helloworld helloworld</p> <script> $("button").click(function(){ $("p").hide(1000,function(){ alert($(this).html()) }) }) </script></body></html>View Codecss操作css位置操作
$("").offset([coordinates]) $("").position() $("").scrollTop([val]) $("").scrollLeft([val])
樣本1：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .test1{ width: 200px; height: 200px; background-color: wheat; } </style></head><body><h1>this is offset</h1><div class="test1"></div><p></p><button>change</button></body><script src="jquery-3.1.1.js"></script><script> var $offset=$(".test1").offset(); var lefts=$offset.left; var tops=$offset.top; $("p").text("Top:"+tops+" Left:"+lefts); $("button").click(function(){ $(".test1").offset({left:200,top:400}) })</script></html>View Code
樣本2:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .box1{ width: 200px; height: 200px; background-color: rebeccapurple; } .box2{ width: 200px; height: 200px; background-color: darkcyan; } .parent_box{ position: relative; } </style></head><body><div class="box1"></div><div class="parent_box"> <div class="box2"></div></div><p></p><script src="jquery-3.1.1.js"></script><script> var $position=$(".box2").position(); var $left=$position.left; var $top=$position.top; $("p").text("TOP:"+$top+"LEFT"+$left)</script></body></html>View Code
樣本3:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .returnTop{ height: 60px; width: 100px; background-color: peru; position: fixed; right: 0; bottom: 0; color: white; line-height: 60px; text-align: center; } .div1{ background-color: wheat; font-size: 5px; overflow: auto; width: 500px; height: 200px; } .div2{ background-color: darkgrey; height: 2400px; } .hide{ display: none; } </style></head><body> <div class="div1 div"> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> </div> <div class="div2 div"></div> <div class="returnTop hide">返回頂部</div> <script src="jquery-3.1.1.js"></script> <script> $(window).scroll(function(){ var current=$(window).scrollTop(); console.log(current); if (current>100){ $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } }); $(".returnTop").click(function(){ $(window).scrollTop(0) }); </script></body></html>View Code尺寸操作
$("").height([val|fn]) $("").width([val|fn]) $("").innerHeight() $("").innerWidth() $("").outerHeight([soptions]) $("").outerWidth([options])
樣本：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .box1{ width: 200px; height: 200px; background-color: wheat; padding: 50px; border: 50px solid rebeccapurple; margin: 50px; } </style></head><body><div class="box1"> DIVDIDVIDIV</div><p></p><script src="jquery-3.1.1.js"></script><script> var $height=$(".box1").height(); var $innerHeight=$(".box1").innerHeight(); var $outerHeight=$(".box1").outerHeight(); var $margin=$(".box1").outerHeight(true); $("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin)</script></body></html>View Code
jquery(三)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
