jQuery基础

1.jQuery是js的一个库，vue.js（目前前端最主流）->网站， angular（将代码转换为安卓）->app
2.使用jQuery
第一步：在HTML中引入jQuery
步骤：
3.语法
基础：$(selector).action()
selector->选择器 id-># class->.
action:动作 即程序所要表现的效果

      1.定义变量：c++中 int a=1;则在jQuery中 var a=1;
        声明变量的关键字：var
       2、输出：console.log()：按F12显示控制台->选择console输出
                       alert():弹框输出
                       推荐使用：console.log原因：因为在输出js对象时，alert只显示[Object Object]            看不到详细信息
      3、+  -    /    * %  &   |   !   =              
      4、字符串拼接（动态生成HTML代码的关键一步）
                       var str="1";
                       var reason="2";
                       alert(str+reason);
                       js里面没有字符,只有字符串   
                       
	                   var num  ="hello";
	                   var str = "<div>"+num+"</div>";
	                   var $demo = $(str);
	                   var $body = $("body");
	                   $body.append($demo)
     5、分号问题：js对分号很友好，写不写在编译的时候都会自动加上，但不能写错
     6、获取dom元素目的：建立HTML与js桥梁
                       jq选择器:获取dom元素
                       id：<div id="name">啦啦啦</div>  var $name = $("#name");
		                      i只有d选择器只能获得一个；
                	  class选择器
		                      <span class="yinweisha">？</span>
		                      <span class="yinweisha">那天我看到他</span>
		                       var $yinweisha = $(".yinweisha");
		              标签选择器
		                       <p >在主楼广场打电话，笑嘻嘻的</p>
		                       <p >green</p>
		                       var $p = $("p");
	                  直接子元素选择器
		                       <div id="name">啦啦啦
			                   <span>帅</span>
		                       </div>
		                       var $name = $("#name>span");
	                  所有子元素选择器
		                       <div id="name">啦啦啦
			                   <span>帅
				               <span>啦啦啦</span>
			                   </span>
		                       </div>
	                           var $name = $("#name span");
	                           等等（在css中用到的选择器都可以在jq中使用
 	   7、函数
 	                关键字：function
 	                函数定义：function（）{
 	                                                alert（"aaa");
 	                                                     }//不带参
 	                函数执行：
 	                                 tanchu();
 	                另一种定义方式
 	                var tanchu=function(){
 	                                      alert("aaa")；
 	                                                  }//不带参
 	               var demo=function(a,b）{
 	               alert（a+b）；
 	               }//带参
 	               demo(1,2);
 	   8、事件
 	               $("#genggu").on("click",function(){
                                                         alert('? 绿色”）
                   }）
       9、显示与隐藏
                   $(selector).hide()=>display:none;
                   $(selsctor).show()=>display:block或者inline或者inline-block
                   思考：
                           <span id="hide">点击</sapn>
                                       <div>haha</div>
                           <script type="text/javascript" src="jquery.js"></script>
                           <script type="text/javascript">
                                       function test(){
                                                             $（#hide").on("click",function(){
                                                                                               $("div").hide();
                                                                                               this.id="show";
                                                                                               test();
                                                                                               })
                                                            $("#show‘").on("click",function(){
                                                                                               $("div").show();
                                                                                               this.id="hide";
                                                                                               test();
                                                                                               })
                                                           }
                                                           test();
                                                   </script>
     10、
                         $(function(){
                                           $("#hide").on("click",function(){
                                                                            alert("点击");
                                           })
                         })
                         在html代码解析完成之后在解析js代码
                         等同于
                         $(document).ready(function(){
                                              $("#hide").on("click",function(){
                                                                               alert("点击"); 
                                                })
                         });
     11、淡入淡出：原理改变的是css中的透明度opcity
                               淡入：
                                         $("#div1").fadeln();
                                         $("#div2").fadeln("show");
                                         $("#div3").fadeln(3000);
                              淡出：
                                        $("#div1").fadeOut():
                                        $ ("#div2").fadeOut();
                                        $("#div3").fadeOut(); 
     12、滑动
                                        $("div").animate({
                                                                  left:'250px',
                                                                  height:"200px",
                                                                  width:"300px"
                                        });
                                        扩展：
                                                {
                                                  left:'230px'
                                                  height:"200px",
                                                  width:"300px"
                                                  }
                                                  ->js的json对象。
                                       $("div").animate(
                                                                 {left:'233px'},
                                                                 function(){
                                                                                 alert("动画执行完毕")
                                      });
                                      function是回调函数
     14、stop方法一共有三种闯处理方式
     15、链
	             $("#p1").slideUp(2000).slideDown(2000);