Java Web-JQuery学习

Java Web-JQuery学习

JQuery概念

是一个JS框架，可以用来简化JS的开发，设计宗旨是"write less,do more",即写更少的代码，做更多的事情。它封装了JS常用的代码、优化了文档操作(DOM)、事件处理、动画操作

什么是框架呢？从理论上来说，我们自己定义一个JS文件，将一些JS的实现放到里面，然后在HTML中通过标签引入该资源，也能叫一个框架。

快速入门

1. 下载JQuery文件
2. 在项目中导入js文件
3. 使用

JQuery的版本：

1. 1.x:兼容ie6\7\8,使用最为广泛。该版本官方不再更新功能，只做bug维护
2. 2.x,兼容ie6/7/8,但是很少有人用
3. 3.x,只支持最新的浏览器

我们在这里使用最新的版本，从该网站可以找到JQuery的所有版本的引用方式,压缩版引用可以用于部署，未压缩版可以用于开发调试和自己阅读

举一个例子：

如果不使用JQuery,直接使用JS默认方法调用div对象：

div1
div2

如果使用JQuery的话：

div1
div2

JQuery对象和JS对象的区别和转换

上面我们通过$获取出来的对象称为JQuery对象，它和直接获取的JS对象是有区别的

转换相关的内容我写在代码里面了:

div1
div2

JQuery选择器

用于筛选具有相似特征的元素

基本语法学习

1. 事件绑定

   
   div1
   div2
   
   
   

2. 入口函数

   入口函数是DOM文档加载完成之后默认执行的方法，将JS命令写到这个方法里的好处是这样的话我们就不必要非要将JS写在body的最下面了(可以保证不会出现因为JS代码执行时对象还没有创建而导致的执行失败问题)

   还是上面那个例子，如果将JS部分写到body前面，就需要写到入口函数中才能生效

   
       
       
       
       
   
   
   div1
   div2
   
   

   如果使用JS的方法来设置入口函数，应该是:
   window.onload=function(){
   
   }

   注意window.onload和$(function)的区别：

   1. 对于一个页面，window.onload()只能定义一次,多次绑定会覆盖前面的。而$(function)可以定义多个

3. CSS样式控制

   //写法1
   $("#div1").css("background-color","red");
   //写法2
   $("#div1").css("backgroundColor","red");

选择器的分类

1. 基本选择器
        1. 标签选择器（元素选择器）
            * 语法： $("html标签名") 获得所有匹配标签名称的元素
        2. id选择器 
            * 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
        3. 类选择器
            * 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
            这三个和我们之前学过的JS选择器规则一样
            
        4. 并集选择器：
            * 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
2. 层级选择器
        1. 后代选择器
            * 语法： $("A B ")，中间是个空格 选择A元素内部的所有B元素        
        2. 子选择器
            * 语法： $("A > B") 选择A元素内部的所有B子元素
        后代选择器和子选择器的区别：子选择器只选择子元素，不选择孙子元素及更后代的元素，而后代选择器都选择
3. 属性选择器
        1. 属性名称选择器 
            * 语法： $("A[属性名]") 包含指定属性的选择器
        2. 属性选择器
            * 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
        3. 复合属性选择器
            * 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
4. 过滤选择器
    过滤选择器指的是从已经选择好的元素中按条件再进行过滤
        1. 首元素选择器 
            * 语法： :first 获得选择的元素中的第一个元素
        2. 尾元素选择器 
            * 语法： :last 获得选择的元素中的最后一个元素
        3. 非元素选择器
            * 语法： :not(selector) 不包括指定内容的元素
            注意非元素选择器内部还需要一个选择器，你可以类比数据库SQL语句来学习
        4. 偶数选择器
            * 语法： :even 偶数，从 0 开始计数
            所有元素按书写顺序排列（包括后代元素），选择所有索引为偶数的元素
        5. 奇数选择器
            * 语法： :odd 奇数，从 0 开始计数
        6. 等于索引选择器
            * 语法： :eq(index) 指定索引元素
        7. 大于索引选择器 
            * 语法： :gt(index) 大于指定索引元素
        8. 小于索引选择器 
            * 语法： :lt(index) 小于指定索引元素
        9. 标题选择器
            * 语法： :header 获得标题（h1~h6）元素，固定写法
5. 表单过滤选择器
        1. 可用元素选择器 
            * 语法： :enabled 获得可用元素
        2. 不可用元素选择器 
            * 语法： :disabled 获得不可用元素
        3. 选中选择器 
            * 语法： :checked 获得单选/复选框选中的元素
        4. 选中选择器 
            * 语法： :selected 获得下拉框选中的元素
        3和4在表单中比较常用

DOM操作

1. 内容相关操作

   1. html():获取或设置元素的标签体内容
   2. text()：获取或设置元素的标签体纯文本内容
   3. val()：设置或获取元素的value属性值

   什么叫获取或设置？传递参数进去就是设置，不传参数进去、只接受返回值就是获取

2. 属性相关操作

   1. 通用属性操作

      1. attr():获取或设置元素的属性值
      2. removeAttr():删除属性
      3. prop():获取或设置元素的属性值
      4. removeProp()：删除属性

      attr()和prop()的区别：

      1. 如果操作的是元素的固有属性，则建议使用prop();自定义的属性建议使用attr()

      注意，获取属性时，只传入属性名即可；设置属性时，要同时传入属性名和属性值

   2. 针对class属性的操作

      1. addClass():添加class属性值

      2. removeClass()：删除class属性值

      3. toggleClass():切换class属性

         这个操作不太好理解：概况起来就是，存在即删除；不存在即添加:例如toggleClass("one"),如果该元素存在class="one",则删除该属性；如果不存在，则添加进来。

         它可以实现一个将“添加属性”和“删除当前属性”结合起来的操作，反复执行即可。

3. CRUD（增删改查）相关操作

   可以用于表格等操作中

   1. append():父元素将子元素追加到末尾

      例如:对象1.append(对象2)：表示将对象2添加到对象1的元素内部末尾处

      这里的对象1和对象2一般都是选择器，也就是使用的是选择器返回的对象，当然也可以先用选择器获取再传递给这些方法，只是一般没必要这么做而已

   2. prepend():父元素将子元素追加的开头

   3. appendTo():

      例如：对象1.appendTo(对象2)：将对象1添加到对象2内部的末尾。注意这里对象2是父元素

   4. prependTo():同理

   5. after():添加元素到特定的元素后面

      例如：对象1.after(对象2)，则对象2被添加到对象1的后面，对象1和对象2是兄弟关系

   6. before():添加元素到特定的元素前面

      同理

   7. insertAfter()

      例如:对象1.insertAfter(对象2)，将对象1添加到对象2后面

   8. insertBefore()：同理

      注意和after()\before()相区分，谁加到谁的关系不一样

   9. remove():删除元素

      例如：remove(元素1)，删除元素1

   10. empty():清空元素的所有后代元素，注意该元素是不清空的

   基础案例

   隔行换色

   全选和全不选

   
   而在body下：
            
                
                分类ID
                分类名称
                分类描述
                操作
            

   QQ表情选择

   多选下拉列表左右移动

JQuery高级

动画

三种方式显示和隐藏元素
    1. 默认显示和隐藏方式
        1. show([speed,[easing],[fn]])：显示
            1. 参数：
                1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
                2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
                    * swing：动画执行时效果是 先慢，中间快，最后又慢
                    * linear：动画执行时速度是匀速的
                3. fn：在动画完成时执行的函数，每个元素执行一次。

        2. hide([speed,[easing],[fn]])：隐藏
        3. toggle([speed],[easing],[fn])：切换
    
    2. 滑动显示和隐藏方式
        1. slideDown([speed],[easing],[fn])：滑动隐藏
        2. slideUp([speed,[easing],[fn]])：滑动显示
        3. slideToggle([speed],[easing],[fn]):滑动切换

    3. 淡入淡出显示和隐藏方式
        1. fadeIn([speed],[easing],[fn])
        2. fadeOut([speed],[easing],[fn])
        3. fadeToggle([speed,[easing],[fn]])

示例：

遍历

事件绑定

1. jquery标准的绑定方法

   jq对象.事件方法(回调函数)

   $(function () {
              //1.获取name对象，绑定click事件
              /*$("#name").click(function () {
                  alert("我被点击了...")
              });*/
   
              //给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
               /*$("#name").mouseover(function () {
                  alert("鼠标来了...")
               });
   
               $("#name").mouseout(function () {
                   alert("鼠标走了...")
               });*/
   
              /* //简化操作，链式编程
               $("#name").mouseover(function () {
                   alert("鼠标来了...")
               }).mouseout(function () {
                   alert("鼠标走了...")
               });*/
               alert("我要获得焦点了...")
               //$("#name").focus();//让文本输入框获得焦点
               //表单对象.submit();//让表单提交
           });

2. on绑定事件/off解除绑定

   jq对象.on("事件名称",回调函数)

   jq对象.off("事件名称")，不输入事件名称的话默认就是解除所有事件的绑定

   举例:

   $(function () {
              //1.使用on给按钮绑定单击事件  click
              $("#btn").on("click",function () {
                  alert("我被点击了。。。")
              }) ;
   
              //2. 使用off解除btn按钮的单击事件
               $("#btn2").click(function () {
                   //解除btn按钮的单击事件
                   //$("#btn").off("click");
                   $("#btn").off();//将组件上的所有事件全部解绑
               });
           });

3. 事件切换:jq.toggle(fn1,fn2)

   点击一次执行fn1,再点击执行fn2.当然也不是只能有两个事件

   举例:

   $(function () {
              //获取按钮，调用toggle方法
              $("#btn").toggle(function () {
                  //改变div背景色backgroundColor 颜色为 green
                  $("#myDiv").css("backgroundColor","green");
              },function () {
                  //改变div背景色backgroundColor 颜色为 pink
                  $("#myDiv").css("backgroundColor","pink");
              });
           });