JQuery

一：什么是JQuery

1.1JQuery是一种轻量级的Javascript类库

1.2JQuery是一种类库

注1：就一个类“jQuery”，简写“$”

二：JQuery官网及下载地址

2.1官网：https://jquery.com/

2.2下载地址：http://jquery.com/download/

三：JQuery优点

3.1兼容性

    兼容所有的主流浏览器，如IE6+、Google、FireFox等。

3.2面向集合    

    jQuery以面向集合方式操作DOM元素，可以很快的找到你需要标签的对象

3.3链式调用   

    jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

四：如何使用JQuery

4.1导入Js类库

<script type="text/javascript" src="js库路径"></script>

4.2写程序入口

完整写法：jQuery(document).ready(function)

缩写：$(function（）{        

    alert(‘hello jQuery’);

})；

注：

以$(fn)为程序入口；

fn为匿名函数，不指定参数名的函数叫做匿名函数。

例如：

<script>

$(function(){

    alert("Hello JQuery");

});

</script>

4.2JQuery的三种工厂方法    

jQuery就是一个容器，用来装HTML元素。

三种工厂方法就是三种创建jQuery的方法。

*搞清楚什么是实例方法和类方法。

4.2.1选择器（类似CSS选择器，元素、类、ID等选择器）

        步骤就是在$()中放入"目标"，然后在.选择它的事件。

        例如下面： 

        元素选择器（Element）

        //通过元素选择器给页面中的所有a标签绑定click事件     

        $(“a”).click(function(){

                alert(“1234”);

        });

        类选择器（.Class）

        //通过类选择器给页面中的class=”a1”的标签绑定click事件

        $(“.a1”).click(function(){

            alert(“1234”);

        });

         ID选择器（#Id）

        //通过ID选择器给页面中的id=”a1”的标签绑定click事件

        $(“#a1”).click(function(){

            alert(“1234”);

        });

   组合选择器（E1,E2）  

        //通过组合选择器给页面中的class=”a1”和class=”a2”的标签绑定click事件

        $(“.a1,.a2”).click(function(){

            alert(“1234”);

        });

         属性选择器

        //通过属性选择器给页面中input元素name=”btn”的标签绑定click事件

        $(“input[name=’btn’]”).click(function(){

            alert(“1234”);

        });

   上下文/环境/容器 默认作用域：document

        //上下文默认：document

        //在document的容器中给所有a标签绑定click事件

        $(“a”,docment).click(function(){

            alert(“1234”);

        });

        //指定容器范围为div，在div容器中给所有a标签绑定click事件

        $(“a”,”div”).click(function(){

            alert(“1234”);

        });

    4.2.2jQuery(html) JQuery中放入HTML代码

    html：表示一个html的字符串

 示例1：点击add按钮往select中动态添加option元素

    <div>

    <select id=”s1”>

    <option>---------请选择--------</option>

    </select>

    <input name=”btn1” type=”button” value=”add” />

    </div>

    ...

    $(“input[name=’btn1’]”).click(function(){

    //appendTo：将option字符串加入到select标签

    $(“<option>value</option>”).appendTo(“#s1”);

    //append：往select标签中追加option字符串

    $(“#s1”).append(“<option>value2</option>”);

    });

  4.2.3jQuery(element)

    element：表示一个html元素对象；

 示例1：点击a标签给自身文本添加字体颜色样式

    $('a').click(function(){

            //this表示id=a3”a标签元素的html元素对象

            $(this).css({'color':'red'});

    });

五：this指针

5.1this的用法