1 jquery 是一个js的库

1、查询dom
2、Ajax

  1. <div id="app">div</div>
  2.     <script>
  3.         var app = $("#app");   //$为找到的意思
  4.         console.log(app);
  5.     </script>

2.jquery 支持所有的css选择器.

  1. <ul class="parent">
  2.         <li></li>
  3.         <li></li>
  4.         <li></li>
  5.         <li></li>
  6.         <li></li>
  7.     </ul>
  8.     <script>
  9.         //jquery  支持所有的css选择器
  10.         var lis = $(".parent li");
  11.         console.log(lis);
  12.     </script>

3.事件

  1. <script src="./jquery-3.6.0.js"></script>
  2. </head>
  3. <body>
  4.     <div id="app">hello world</div>
  5.     <script>
  6.         $("#app").click(function(){
  7.             $(this).html("change")
  8.         })
  9.     </script>
  1. <input type="text" id="app">
  2.     <script>
  3.         $("#app").focus(function(){
  4.             $(this).css({backgroundColor:"red",with:"100px"})
  5.         })
  6.         $("#app").blur(function(){
  7.             $(this).css({backgroundColor:"yellow"})
  8.         })
  9.     </script>

4.链式调用

  1. <input type="text" id="app">
  2.     <script>
  3.         $("#app").focus(function () {
  4.             $(this).css({ backgroundColor: "red", with: "100px" })
  5.         }).blur(function () {
  6.             $(this).css({ backgroundColor: "yellow" })
  7.         })
  8.     </script>

5.效果

  1. <div>hello world</div>
  2.     <button id="btn">按钮</button>
  3.     <script>
  4.         $("#btn").click(function(){
  5.             $("div").hide(3000)     //动画时间
  6.         })
  7.     </script>

6.切换效果

.is(“:visible”) 判断元素是否隐藏

  1. <div>hello world</div>
  2.     <button id="btn">按钮</button>
  3.     <script>
  4.         $("#btn").click(function () {
  5.             //判断元素是否显示
  6.             //.is(":visible") 判断元素是否隐藏
  7.             var isShow = $("div").is(":visible");
  8.             console.log(isShow)
  9.             if(isShow){
  10.                 $("div").hide(1000)
  11.             }else{
  12.                 $("div").show(1000)
  13.             }
  14.         })
  15.     </script>

6.1.用js实现

  1. <div id="div" style="display: block;">hello world</div>
  2.     <button id = btn>按钮</button>
  3.     <script>
  4.         var div = document.getElementById("div");
  5.         var btn = document.getElementById("btn");
  6.         btn.onclick = function(){
  7.             if(div.style.display == "block"){
  8.                 div.style.display = "none"
  9.             }else{
  10.                 div.style.display = "block"
  11.             }
  12.         }
  13.     </script>

7.toggle 融合hide和show方法

  1. <div>hello world</div>
  2.     <button id=btn>按钮</button>
  3.     <script>
  4.         $("#btn").click(function(){
  5.             $("div").toggle(1000)
  6.         })
  7.     </script>