学习目标

在页面中直接写js代码的情况很少，项目中大量使用js框架，jquery是最常见的js框架
使用js完成可一个功能可能要使用到20行代码，但是使用jquery可能一行就搞定
1.能够理解js框架的概念
2.能够引入jQuery
3能够使用jQuery的选择器
4.能够使用jQuery的DOM操作的方法
5.能够完成隔行换色案例
6.能够完成全选全不选案例

jquery的介绍

（1）一个网页可以有几部分组成？
开发前端的三剑客: HTML CSS JS
（2）jquery是什么
1:jquery是js的一个框架，jquery是对js的封装，jquery是第三方组织写的一个js文件
2:jquery和js的关系类似：JDBC和Mybatis关系
（3）有什么特点？
jquery是为了简化js的书写
jquery的宗旨：写的更少，做的更多
（4）如何使用jquery
你如果想要使用jquery，引入这个js文件，使用选择器查找元素，再调用函数

jquery的版本介绍***

jquery下载

jQuery的官方下载地址：http://www.jquery.com
（2）如何选择版本
1.x：兼容IE678，使用最为广泛的（一般项目来说，使用1.x版本就可以了）
2.x：不兼容IE678，很少有人使用（如果不考虑兼容低版本的浏览器可以使用2.x）
3.x：不兼容IE678，只支持最新的浏览器（除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本）
（3）什么是开发版本
jQuery-x.x.x.js为开发版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大
jQuery-x.x.x.min.js为生产版本，生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小。

jquery的入门***

（1）使用步骤
》引入

  <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

》调用

$(function(){
    
    
	//加载完成
});
$(“#inputId”)

》》特点

html逐行执行的，只有读进内存的对象才能被获取到
script标签写到任意位置都可以，但是我们一般是在head标签里

jquery和js的转换

（1）将js对象转为jquery对象
document.getElementById(“inputId”);
$(js对象) ----->jquery对象
（2）jquery对象的本质是一个数组
jquery对象 = [js对象,js对象,js对象]
（3）将jquery对象转为js
jquery对象[0] ----->js对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">
      //------------1:js代码-----------
      // window.onload = function () {
     
     
      //    var inputIdEle =  document.getElementById("inputId");
      //    // alert(inputIdEle.value);
      //    /*
      //      1:inputIdEle被称为js对象
      //      2:将js对象转为jquery对象
      //        $(js对象)  ----->jquery对象
      //     */
      //     alert($(inputIdEle).val());
      // }

      //------------2:jquery代码-----------
        $(function () {
     
     
            var inputIdEle = $("#inputId");
            /*
              1:inputIdEle是一个jquery对象
              2:将jquery对象转为js
                jquery对象[0]   ----->js对象
              3：jquery对象的本质是一个数组
                 jquery对象 = [js对象,js对象,js对象]
             */
            alert(inputIdEle[0].value);
        });


    </script>
</head>
<body>
        用户名:<input id="inputId" type="text" name="username" value="我是WZX"/>
</body>
</html>

jquery和js的事件绑定的不同

（1）juqery的按钮点击事件

js对象.onXxx=function(){
    
    

}

jquery对象.xxx(function(){
    
    
});

（2）juqery的其他事件，只修改函数名
（3）jquery的代码更像是对象名.成员方法名()

Day09JavaWeb【Jquery】jquery入门