jq基本语法

Original 2019-04-04 19:50:17 341
abstract:<!DOCTYPE html><html><head> <title>点一点</title> <meta charset="utf-8"> <style type="text/css"> span{border:2px solid #ccc;display: inline-

<!DOCTYPE html>

<html>

<head>

<title>点一点</title>

<meta charset="utf-8">

<style type="text/css">

span{border:2px solid #ccc;display: inline-block;width: 52px; margin:30px auto;}

div{width: 1600px;}

#center{width: 300px;height: 300px;margin: 30px auto;}

</style>

<script type="text/javascript" src="http://ph7.shengqianku.cn/jquery-3.3.1.min.js"></script>

</head>

<body>

     <script type="text/javascript">

         $(document).ready(function(){

         $("span").hide()

         $("#bt1").click(function(){

         $(".box1").show()

         })

         $("#bt2").click(function(){

         $(".box2").show()

         })

         $("#bt3").click(function(){

         $(".box3").show()

         })

         $("#bt4").click(function(){

         $(".box4").show()

         })

         })

     </script>

     <div>

         <div id="center">

             <span class="box1">师太</span>

            

             <span class="box2">声音</span>

            

             <span class="box3">真好听</span>

            

             <span class="box4">是不</span>

             <br>

             <button id="bt1">点一下</button>

             <button  id="bt2">点一下</button>

             <button id="bt3">点一下</button>

             <button id="bt4">点一下</button>

         </div>

    

     </div>

</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-04-08 09:23:03
Teacher's summary:jQuery的基本语法, 与其它的框架有很大的区别 , 也原生的差别也非常大, 要注意

Release Notes

Popular Entries