看这里，看这里~~JQuery

🐖：文章是供自己平时学习时用，相当于学习笔记，如有错误，欢迎指正~~
思维导读：

正文：
一、什么是JQuery?
1、一个快速、简洁的JavaScript框架
2、设计的宗旨是“Write less, Do more”
3、jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
二、JQuery的版本
【🐖、以下区别参考https://www.cnblogs.com/osfipin/p/6211468.html】

版本	描述
1.x	兼容ie678,使用最为广泛的，官方只做bug维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了
2.x	不兼容ie678，很少人使用，官方只做bug维护，功能不再新增。如果不考虑兼容版本低的浏览器，可以使用2.x
3.x	不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的JQuery插件不支持这个版本

三、JQuery设计思想
1、选择网页元素

• 模拟css选择网页元素

  //#id
  $("#div1").css("background", "brown");
  //.class
  $(".box").css("backgroundColor", "pink");
  //TagName
  $("ol li").css("backgroundColor", "lightgray");
  //css属性
  $("[name=hello]").css("backgroundColor", "yellow");

• 独有表达式选择

   //表达式的写法
   $("li:first").css("backgroundColor", "brown");
   $("li:last").css("backgroundColor", "blue");

   //比较高级的表达式的写法
   $("li:even").css("backgroundColor", "yellow"); //偶数列为黄色
   $("li:odd").css("backgroundColor", "red"); //奇数列为红色

   //下标为2的元素背景色为粉色
   $("li:eq(2)").css("backgroundColor", "pink");

• 多种筛选方法

   // $("li:eq(2)").css("backgroundColor", "brown");
   $("li").eq(2).css("backgroundColor", "red");

   // $("li.box").css("backgroundColor", "yellow");  
   $("li").filter(".box").css("backgroundColor", "blue");

2、jQuery写法

• 方法函数化

   /* window.onload = function(){
           
      }
   */

    $(function(){
    	alert("相当于window.onload");
    }); //相当于window.onload

• 链式操作

    $(function(){
    	/*
            $("h1").click(function(){
                alert("hello world");
            })
            $("h1").css("backgroundColor", "pink");
            $("h1").mouseover(function(){
                this.style.backgroundColor = "red";
            })
            $("h1").mouseout(function(){
                this.style.backgroundColor = "brown";
            })
     	*/
        
        // 【🐖】我们可以通过链式操作，对以上操作进行简化
            $("h1").click(function(){
                alert("hello world");
            })
            .css("backgroundColor", "pink")
            .mouseover(function(){
                this.style.backgroundColor = "red";
            })
            .mouseout(function(){
                this.style.backgroundColor = "brown";
            })
     }); 

• 取值赋值合体

     $(function(){
         /*
             JS中: innerHTML
                   value
         */
         alert($("#div1").html());  //取值
         $("#div").html("<p>新赋值的内容");  //赋值
         
         alert($("input").val());  //取值
         $("input").val("hello world");  //赋值            
     }); 

3、jQuery和JS的关系

    $(function(){
       /*
            可以共存，不能混用
       */
        //innerHTML方法属于JS，
        alert($("#div1").innerHTML); //错误写法（❌），输出为：undefined。不能前半截用JQuery,后半截用JS
        alert($("#div1").html()); //正确写法              
    });