Jquery的基本使用
$说明
如何使用Jquery：
day-01
$Jquery
Jquery官方网站下载：http://jquery.com/
引入Jquery的js文件
并在html中加入（以我的为例）
<script type="text/javascript" src="jquery-3.3.1.js"></script>
1.隐藏部分标签-（JQ-01）
1 <html> 2 <head> 3 <script type="text/javascript" src="jquery-3.3.1.js"></script> 4 <script type="text/javascript"> 5 $(document).ready(function(){ //这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 6 $("button").click(function(){ 7 $(this).hide(); //隐藏button标签 8 $("p").hide(); //隐藏所有p标签 9 10 }); 11 }); 12 </script> 13 <meta charset="utf-8"> 14 <!-- 防止中文乱码--> 15 </head> 16 17 <body> 18 <button type="button" >点击清除type</button> 19 <p class="class">p1</p> 20 <p class="class">p2</p> 21 <p>p3</p> 22 </body> 23 24 </html>
2.隐藏相同class标签,通过使用.click点击事件调用.hide隐藏-（JQ-02）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script type="text/javascript" src="jquery-3.3.1.js"></script> 6 <script> 7 $(document).ready(function () { //防止jq预先加载 8 $("button").click(function () { //点击事件 9 $(".jq02").hide(); //隐藏同class 10 }); 11 12 }) 13 </script> 14 15 <title>jq-02</title> 16 </head> 17 <body> 18 <button type="button" >click me</button> 19 <p class="jq02">1</p> 20 <p class="jq02">2</p> 21 <p>3</p> 22 </body> 23 </html>
3.通过使用.click点击事件并用.css改变属性样式-（JQ-03）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-03</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $(".button1").click(function () { 10 $(".color").css("background","red") //改变css样式 11 $("[href]").css("background","blue") //通过属性改变样式 12 }) 13 $(".button2").click(function () { 14 $(".color").css("background","blue") //改变css样式 15 $("[href]").css("background","red") //通过属性改变样式 16 }) 17 }) 18 19 </script> 20 </head> 21 <body> 22 <p class="color">1</p> 23 <p class="color">2</p> 24 <button type="button" class="button1">click me</button><br> 25 <span href="#">链接1</span><br> 26 <span href="#">链接2</span><br> 27 <button type="button" class="button2">click me</button><br> 28 </body> 29 </html>
4.鼠标悬停，通过使用.mousemove使悬停改变属性-（JQ-04）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-04</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $(".div1").mousemove(function () { //鼠标悬停事件 10 $(".div3").css("border","red solid") 11 }) 12 $(".div2").mousemove(function () { //鼠标悬停事件 13 $(".div3").css("border","blue solid") 14 }) 15 }) 16 </script> 17 </head> 18 <body> 19 <div class="div1" style=" border: solid red; height: 100px; width: 100px;">鼠标悬停1</div> 20 <div class="div2" style=" border: solid blue; height: 100px; width: 100px;">鼠标悬停2</div> 21 <div class="div3" style=" height: 200px; width: 200px;">鼠标悬停2</div> 22 </body> 23 </html>
5.隐藏于显示切换，使用toggle（speed，callback）切换。-（JQ-05）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-05</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $(".div1").click(function () { 10 $(".div2").toggle(1000); //隐藏于显示的切换 11 }) 12 }) 13 14 </script> 15 </head> 16 <body> 17 <div class="div1" style="border: solid wheat; height: 100px; width:300px;" align="center">点此获取其他登录方式</div> 18 <div class="div2" style=" border: solid wheat;height: 50px; width: 300px" align="center"> 19 QQ 微信 微博 20 </div> 21 </body> 22 </html>
6.使用fadeIn,fadeOut,fadeToggle,fadeTo进行渐变效果-（JQ-06）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-06</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $("#button1").click(function () { 10 $(".danru1").fadeIn(); //淡入效果 11 $(".danru2").fadeIn("slow"); 12 $(".danru3").fadeIn(2000); 13 }); 14 $("#button2").click(function () { 15 $(".danchu1").fadeOut(); //淡出效果 16 $(".danchu2").fadeOut("slow"); 17 $(".danchu3").fadeOut(2000); 18 }); 19 $("#button3").click(function () { 20 $(".qiehuan1").fadeToggle(); //淡入淡出切换效果 21 $(".qiehuan2").fadeToggle("slow"); 22 $(".qiehuan3").fadeToggle(3000); 23 }); 24 $("#button4").click(function () { 25 $(".jianbian1").fadeTo("slow", 0.25); //渐变效果 26 $(".jianbian2").fadeTo("slow", 0.5); 27 $(".jianbian3").fadeTo("slow", 0.75); 28 }); 29 }); 30 </script> 31 </head> 32 <body> 33 <button type="button" id="button1">淡入效果</button> 34 <div class="danru1" style="height: 100px; width: 100px; display: none; background:red;"></div> 35 <div class="danru2" style="height: 100px; width: 100px; display: none; background:beige;"></div> 36 <div class="danru3" style="height: 100px; width: 100px; display: none; background:wheat;"></div> 37 <button type="button" id="button2">淡出效果</button> 38 <div class="danchu1" style="height: 100px; width: 100px; background:red;"></div> 39 <div class="danchu2" style="height: 100px; width: 100px; background:beige;"></div> 40 <div class="danchu3" style="height: 100px; width: 100px; background:wheat;"></div> 41 <button type="button" id="button3">切换效果</button> 42 <div class="qiehuan1" style="height: 100px; width: 100px; background:red;"></div> 43 <div class="qiehuan2" style="height: 100px; width: 100px; background:beige;"></div> 44 <div class="qiehuan3" style="height: 100px; width: 100px; background:wheat;"></div> 45 <button type="button" id="button4">渐变效果</button> 46 <div class="jianbian1" style="height: 100px; width: 100px; background:red;"></div> 47 <div class="jianbian2" style="height: 100px; width: 100px; background:beige;"></div> 48 <div class="jianbian3" style="height: 100px; width: 100px; background:wheat;"></div> 49 </body> 50 </html>
7.上下滑动切换-(JQ-07)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-07</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $(".div1").click(function () { 10 $(".div2").slideToggle(2000); //上下滑动切换 11 //slideDown() 向下滑动 12 //slideUp() 向上滑动 13 }); 14 }) 15 </script> 16 </head> 17 <body> 18 <div class="div1" style="background: wheat; height: 100px; width: 300px;" align="center"></div> 19 <div class="div2" style="background: honeydew; height: 100px; width: 300px;" align="center"></div> 20 </body> 21 </html>
$总结
<script type="text/javascript" src="jquery-3.3.1.js"></script> 此为引用Jquery库的必填选项 src中引用你的jquery地址
$(document).ready(function () {防止文档在完全加载（就绪）之前运行 jQuery 代码。
