JQuey学习笔记

jQuery Api: http://www.css88.com/jqapi-1.9/animate/

官网： www.jquery.com

demo： www.jq22.com

百度静态资源库： http://cdn.code.baidu.com/       常用插件连接如bootstrap等

1.JQuery:   导库文件：jquery-3.1.1.min.js

   优点：1.对js做了封装，屏蔽浏览器之间的差异

              2.书写简便，写的更少，做的更多

              3.对ajax做了封装

   页面中优先执行jquery(比onload先执行),并且不会被覆盖

   页面加载完执行：

      a.$(function(){ alert("jqqq")  }; );

     b. $( document ).ready( function (){  alert( "jquery03" );  });

2.js与jquery获取元素区别

   var jsGet=document.getElementById("uname").value;

   var jqGet=$("#uname").val();  

    var divText=$("#uname").text();           //jq获取div文本

   var divText=document.getElementById("uname").innerText;   //js获取div文本

    var divHtml=$(" #uname ").html();          //jq获取html             

    var divHtml=document.getElementById("uname").innerHTML;      //js获取html 

    $(" #uname ").html("<h3>文本</h3>");     

    document.getElementById("uname").innerHTML="<h4>文本</h4>";  

   var html01=document.getElementById("sss").attributes["id"].value;  

   var html02=$("#sss").attr("id");  

    $(" #uname ").attr("id");        //获取id属性

    $(" #uname ").attr("id","div02");   //设置id属性，div02       

3 .JQ转JS:  转成JS后可以调用JS的方法和属性

   1.[0]下标获取

         var tojs=$("#uname") [0] ;

         alert(tojs.value);

   2.get方法获取

         var tojs02=$("#uname") .get( 0) ;

         alert(tojs02.value);

  JS转JQ：可以使用JQ的方法和属性

    1.var tojq=$(document.getElementById("unameId"));

4.选择器：css中的选择基本都可以使用

     //选择id

     $("#id");  

    //类选择            

     $(".class").css("background-color","red");     //修改样式

    //元素选择

     $("div").css("background-color","red");

    //全部选择

     $("*").css("background-color","red");

    //组合选择 

    $("#mid,h2").css("background-color","aqua");    //选取id为mid和h2

    //包含选择

    var mcontain=$("#mid h2").css("background-color","aqua");   //选取mid的h2

   //子包含

    $( "#mid>h2" ). css ( "background-color" , "aqua" );    // 选取mid的 h2

   //选择下一个同级元素（元素类型要相同）

    $( "#mid+div" ). css ( "background-color" , "aqua" );    

  //选择当前元素下所有同级元素

  $( "#mid~div" ). css ( "background-color" , "aqua" );

5.修改样式属性：

  a)对象.css("样式"，"样式的值");

      $( ".class" ). css ( "background-color" , "red" ); 

   b)对象.addClass("mclass");

     $(".class").addClass("myclass");

     .myclass{

          width:100px;

     }

     $(".class").removeClass("myclass other");     //移除myclass 和other样式

     $(".class").toggleClass("myclass");           //切换样式

6.操作dom节点：

  //添加节点 

    var old=$("#oid");

    var var01=   $("<li title='pingguo'>苹果</li>");

    old.append(var01);

  //移除节点

     old.remove();              //移除全部        

  //移除子节点

     old.empty()         

  //复制节点

     $("#old  li").click(function(){

          $(this).clone().appendTo(old);      //复制追加到old节点之下

     });

  //替换

      $("#appleId").replaceWith("<li>orange</li>");

7.事件绑定：

   //单个事件绑定 

      $(function(){

        $("#mid02").bind("click",function(){

            $("#mid02").css("color","red");

        });

    });

  $("#mid02").show();     //显示元素

    //多个事件绑定

$(function(){

        $("#mid02").bind("click",function(){

            $("#mid02").css("color","red");

        }).bind("mouseenter",alertInfo=function(){

            alert("aaaa");

        });

    });

//取消绑定

function ubindss(){

      $("#mid02").unbind("mouseenter", alertInfo );       //动态取消绑定 alertInfo
  }  

8.动画效果：

   $("#div01").show(3000); //3秒显示  

   $("#div01").hide(3000);  //3秒隐藏

   $("#div01").slideDown();  //从上到下3秒显示

   $("#div01").slideUp();    //从下到上3秒显示

   $("#div01").fadeIn();    //淡入,慢慢加载进来

   $("#div01").fadeOut(); //淡出

9.左边移动到右边

   $(function(){

            $("#btnRight").bind("click",function(){

                var toR=$("#sel002");

                $("#sel001 option:selected").appendTo(toR);      //选项被选中

           });

        });  

10. jquery底层原理

      jquery底层是一个闭包(匿名自调用函数)

      格式：  

               （function(形参){

                           alert(形参);  

                  }）（实参）;

                （function(num){

                           alert(num);

                  }）(123);

          为什么使用$作为开头：window.jQuery=window.$=JQuery;

         

11. $(this)和this关键字在Jquery区别

// this其实是一个Html 元素。能调用元素属性，例如this.id,this.value。

// $this 只是个变量名，加$是为说明其是个jquery对象。$(this)能调用jquery的方法，例如click(), keyup()。

// 而$(this)是个转换，将this表示的dom对象转为jquery对象，这样就可以使用jquery提供的方法操作。