Day05-jQuery01

jQuery的概述

---

什么是JQuery

jQuery是一个轻量级的JavaScript框架。它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多（validation校验，BootStrap）。 实际开发中更常用的其实是jQuery；
核心理念：write less，do more

---

jQuery的引入

学习jQuery只需要将对应js库下载，并导入到我们项目下，在html页面使用<script>导入
为了保证兼容性，一般用1.11.0或者1.8.3；越新的版本对于ie6/7/8不兼容。
引用的方式和我们的js外部引用是一样的。

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

下述的这两个js文件其实是一样的，但是含有min的没有良好的格式，却有较小的文件大小。如果要研究源码，就用没有min的文件，如果是项目上线，就用含有min的即可。

---

jQuery的几个注意要点：

1）jQuery中都是调用方法，而js中是设置属性。
比如，在jQuery中，设置属性的时候不能够用 .value ，需要用 val( ) 函数
比如，js中的innerHTML属性在jQuery中需要用html（）函数来替代。
jQuery底层也是js写的。

2）jQuery的对象命名最好加一个$符号用于区分js对象和其他对象，让人一看到就知道这是个jQuery对象。

3）jQuery对象不能够调用js的方法和属性。
但jQuery中也有length属性；checked属性。

4）jQuery中获取某个属性的话就只调用某个方法或者只传入属性名参数，要设置的话就在方法中传入参数。

5）this是js的对象，在jQuery中需要转换成为jQuery对象。$(this);

6）jQuery中的对象数组具有自动遍历功能。这是写在了框架里面的。

下述写法没有问题。

var $x = $("form ~ input");
$x.val("hhaha");

在一个jQuery对象数组的外层加上一个alert（）函数的时候，不能够打印出数组中每个对象的值，因为alert是不带有遍历功能的，只有jQuery对象数组才有自动遍历的功能，最后只能打印出第一个元素的值。

var $x = $("form ~ input");
alert($x.val());

7）jQuery中的属性操作：

---

jQuery的整体印象：

     var $bt = jQuery("#btn");
     $bt.click( function() {
          $bt.val("按钮1");
     })

其实，上述案例中的jQuery（“#btn”），就相当于$(“#btn”)

     var $bt = $("#btn");
     $bt.click( function() {
          $bt.val("按钮1");
     }

---

基本语法/对象获取

• 在js中document.getElementById(“id”);还有通过tagName等等获取对象
  而在jQuery中，获取jQuery的对象格式如下：
  第一种方式：
  jQuery(选择器)
  第二种方式：
  $(选择器)

  • 在jQuery中，”jQuery == $”，区分大小写

  • jQuery中对象变量命名建议以&开头，便于区分。

  • 比如通过id找到某个标签对象，

var $demoId = $("#demoId");

• jQuery中的注释和js中一样: // /* */

---

jQuery的基本操作

---

jQuery页面加载

• $(document).ready(当页面加载完成时要执行的函数)
  可以执行多次，且比js中的onload方法速度快。

• 更加简版的写法：$(当页面加载完成时要执行的函数)

  简便写法：文档加载完成的时候执行，且可以执行多次。也就是写多个。

     <script>
          $( function(){
          })
     </script>

原型：

     <script>
          $(document).ready( function () {
          })
     </script>

js中onload和jQuery中的ready方法的区别：
1）jQuery中的ready函数可以执行多次。而onload只能够执行一次
2）jQuery中的ready函数是在文档加载完毕的时候执行的，而onload是在窗体加载完成的时候执行的。所以ready函数执行是在onload之前执行的。在所有的ready执行完成之后onload才会执行。

---

js对象和jQuery对象相互转换

---

• 把jQuery对象（$q）转换成js对象

     $q[0]
     $q.get(0)

• 把js对象（p）转换成jQuery对象：括号不可以省略

     $(p)

css中的选择器是
书写规范：

     <style>
          选择器 {
                属性名:属性值;
                color: red;
                font-size: 40px;
            }
     </style>

js中是通过函数，并在函数中传入参数来获取来获取，getElementById（），getElementsByTagName（）
jQuery中的选择器都存在“”，这点不能够省略

---

jQuery的三种基本选择器

---

• ID选择器：$(“#id名”) 注意引号不能够省略。
• 类选择器：$(“.类名”)
• 元素选择器：$(“标签名” )

---

jQuery的其他选择器

---

1）层级选择器：
$(“A B”)
获取A元素内部的所有的B元素，包含内部的所有后代标签（祖孙关系）

$(“A > B”)
获取A元素下面的所有B元素，仅仅包含子元素，不包含孙子元素

$(“A + B”)
获取A元素同级的第一个B元素

$(“A ~ B”)
获取A元素同级的所有B元素

2）基本过滤选择器
* $("选择器:first"),表示找到所有符合该选择器的第一个元素。

     $(function() {
          $("tr : first").css("background-color","red");
     })

• $("选择器:last"),表示找到所有符合该选择器的最后一个元素。
• $("选择器:even"),表示找到所有符合该选择器的下标为偶数的元素。
• $("选择器:odd"),表示找到所有符合该选择器的下标为奇数的元素。
• $("选择器:eq(index)"),表示找到符合该选择器的第index个元素。
• $("选择器：gt(index)"),表示找到符合该选择器的并且下标大于index的所有元素。
• $("选择器：lt(index)"),表示找到符合该选择器的并且下标小于于index的所有元素。
• $("：header"),找到所有标题元素。

• $(" : empty"),找到所有空元素（不包含子元素和文本的元素）

  ---

  例图：
  

3）属性选择器
* [属性名p]：获取有属性名p的元素，只要有这个属性，都会被选出来，不管属性值。
* [属性名=属性值]：获取属性名 = 属性值的元素
* [属性名 ！= 属性值]：获取属性名 ！= 属性值的元素，属性值用单引号括起来
* […][…][…]多重属性选择器
* [属性名^=属性值]：获得 属性名 以属性值开头的所有元素
* [属性名$=属性值]：获得 属性名 以属性值结尾的所有元素
* [属性名*=属性值]：获得 属性名 含有属性值的所有元素
案例：

含有class属性的都会被选择出来

含有type属性且同一属性的才会被选择出来。

---

表单类型选择器

表单属性选择器（在用于筛选出已经选择的表单select中的option时用得到。）

如果select表单中被选中的，也就是存在selected属性的，就会被选择器选择出来。
用法有点类似过滤选择器。

$("#add").click(function() {
     $("#selectLeft option:selected").each(function(index, element) {
            $("#selectRight").append(element);
     });
})
$("#remove").click(function() {
      $("#selectRight option:selected").each(function(index, element) {
            $("#selectLeft").append(element);
      });
})

---

jQuery的事件 绑定

先复习一下js的事件两种绑定方式：
事件的两种绑定方式：
第一种：使用类似onclick这样的属性进行绑定。

第二种：
1先找到按钮2；
2给其绑定点击事件
给bt2的onclick中赋值的时候，只能够赋值为匿名函数，不然会认为是调用fn函数；

jQuery的事件绑定：

方法一：调用jQuery中的方法绑定事件
如下例，本质上是调用jQuery对象的click（）函数来绑定事件的。

     $("#btn").click( function(){
          $("#user").val("李四");
     });

再举一个例子，
注意，this是js中的对象，在使用的时候需要转化成为jQuery对象。

     $("#btn").mouseover( function (){
          $(this).val("change");
     })

方法二：利用bind（）函数绑定事件
bind(事件类型，函数),通过bind方法可以绑定多个事件
绑定一个函数的时候：

     $("#btn").bind("事件类型",function(){
     });

    $("#btn").bind("click",function(){
          //打印改变后的值
          alert("hahaha");
    });

$("#user").bind("change",function(){
       //打印改变后的值
       alert("hahaha");
});

change函数要注意，要获取焦点，改变文本，失去焦点才能够触发这个函数，如果是利用函数修改的话，change不会触发。

绑定多个函数的时候：
jason格式，其实里面就是键值对的形式存在的参数。

     $("#btn").bind({
          click : function(){
              $("#user").val("李四");
          },
          mouserover:function(){
          },
          mouserout : function(){
          }，
     });

$("#user").bind({
        mouseover : function(){
                   $("#user").val("lisioooo");
         },
         mouseout : function(){
                   $("#user").val("change");
         }
 })

---

jQuery的效果

---

显示隐藏 show ，hide， toggle

• show(speed，callback)，显示
  
  • speed，速度 ，用毫秒值表示的速度。
  • callback，表示显示后要进行的操作(回调) 。这里是传入函数，表示效果完成后的一个反馈或操作。
• hide(speed，callback)，隐藏
• toggle()，显示隐藏的切换开关 ，切换某个标签的显示与隐藏

滑动 slideDown、 slideUp、 slideToggle

• slideDown(speed，callback),滑动显示
• slideUp(speed，callback)，滑动隐藏
• slideToggle(speed，callback)，滑动进行显示隐藏的切换

淡入淡出 fadeIn、 fadeOut、 fadeTo、 fadeToggle

• fadeIn(speed,callback),淡入
• fadeOut(speed，callback)，淡出
• fadeTo( speed, opacity, callback),由不透明变成指定的透明度：透明度由0-1表示
  
  • opacity：指定透明度
• fadeToggle(speed，callback),切换淡入淡出

---

jQuery的属性

---

• $(selector).attr(attribute)：返回指定元素的某个属性值，少用，会存在某种bug
• $(selector).attr(attribute，value):给指定元素设置属性
• $(selector).prop(attribute)：返回指定元素的某个属性值
• $(selector).prop(attribute，value):给指定元素设置属性
• html():往标签体中写HTML内容
• val():设置或返回Value属性的属性值
• hasClass(“类名”)：指定元素是否包含某个类
• addClass(“类名”):给指定元素添加某个类

实例：
val方法只能够获取和设置内置有value属性的。val（）只适用于input和option属性。

                    $(button_input).click(function() {
                          $(text_input).val("zhangsan");
                    })

通用的获取和设置属性
attr（）方法。少用，会有一些bug

                    $(button_input).click(function(){
                          $(text_input).attr("value","zhangsan");
                    })

prop方法：
prop方法是jQuery1.6之后提出替换attr方法的。

                    $(button_input).click(function(){
                          $(text_input).prop("value","lisi");
                    })

---

设置css属性：
.css() 只能用于设置css属性，不能够用于设置value等的值

$("#btn").click(function(){
          $("#user").css("background-color","blue");
})

调用一次只能够设置一个属性。如果要添加多个属性，可以为标签添加类名，addClass（“类名”）

addClass（“类名”）方法
给某个标签传入类名
在类名中设置多种格式，然后把这个类添加到某个标签中，这样可以实现添加多个属性。

定时弹广告案例

利用回调

隔行换色案例

全选和反选的案例