js弹出框，点击切换事件，jQuery改变一部分css样式

js，声明变量注意点

  <script>
    // 声明多个变量 
    var age=18,
        addresss='火影忍者',
        gz=2000;
    // 只声明不赋值结果是'undefined'
    var sex;
    console.log(sex);//undefined
    // 不声明，不赋值直接使用某个变量会报错;
    console.log(tel);
    // 不声明直接赋值在js中可以执行     
    qq=110;
    console.log(qq);    
    // name具有特殊含义，尽量不要使用name作为变量名
    console.log(name);//可执行，不报错
    // 变量声明不可有空格
    // var q q=2;
</script>

js弹出框

弹出框的字符类型为字符串，注意后来使用函数方法，比如说加减的函数

• 警告框

<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
  alert("我是一个警告框！");
}
</script>

• 弹出框

 window.prompt("sometext","defaultText");

• 提示框

  window.confirm("sometext");

js、flag=0的使用

现在写的是当点击图片时来回会切换图片：

  <div class="night">
     <img src="img/night.svg" id="wanshang">
  </div>
  <script>
     var wan = document.getElementById('wanshang')
     var flag = 0;
      wan.onclick = function () {
             if (flag == 0) {
                 wan.src = "img/night.svg";                           
                 flag = 1;
              } else {
                 wan.src = 'img/sun.svg';
                 flag = 0;
              }
   }
  </script>

js，隐藏样式

但是要注意，当你点击按钮时，会隐藏文本，且按钮也会消失不见
注意是class=“box3”的div -webkit-appearance: none;改变系统按钮样式

  <div class="box3">
      <input type="checkbox" class="xuan">
        BUG反馈，沟通交流：WX：ChenAiLJX QQ：2041909905
      </div>
      <script>
      var xu = document.querySelector('.xuan');
      var box3 = document.querySelector('.box3');
          xu.onclick = function () {
          box3.style.display = 'none';
       }
      </script>

jquery改变css样式

注意点：

1. 默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
2. 注释：CSS 样式使用 DOM 名称（比如 “fontSize”）即驼峰式书写方式来设置，而非 CSS 名称（比如 “font-size”）。
   speed:毫秒，"slow","normal","fast"
   easing:swing,liner。

  $(".btn1").click(function () {
                $(".four").animate({ height: "400px" });
                $(".btn2").click(function () {
                    $(".four").animate({ width: "400px" });

                });
            });
       
            $(".btn3").click(function () {
                $(".div1").animate({
                    left: '200px',
                    opacity: '0.5',
                    height: '+=150px',
                    width: '+=150px'
                });
            });