jquery基础知识

jQuery入门

今日内容介绍

u 重写

u jQuery校验插件

 

 

今日内容学习目标

u jquery基本使用

 

 

第1章    重写：隔行换色

1.1      需求

l  隔行换色

l  鼠标移上变色

1.2      相关知识点

1.2.1    jQuery概述

l  jQuery是JavaScript框架（工具类）

n  1，必须解决浏览器兼容问题。

n  2，支持CSS3

n  3，提供大量的插件。（www.jquery.com/plugins）

n  4，提供完善的帮助文档。

 

l  那些人使用jQuery（占这个互联网半壁江山）

n  百度

n  微软

n  京东

n  网易

n  淘宝没有用（http://docs.kissyui.com/）

 

l  版本，jQuery目的3大类版本

n  1.* ，支持所有浏览器。

n  2.*，不支持IE6、7、8，其他与1.*一样。

n  3.*，没有研究

 

1.2.2    导入jQuery类库

l  导入必须在使用之前。

<!--导入类库-->

<script src="../js/jquery-1.11.3.js"type="text/javascript" charset="utf-8"></script>

 

1.2.3    基本语法

l  基本语法

n  方式1：$("选择器")

n  方式2：jQuery("选择器");

n  注意，在jQuery的使用中：$==jQuery

var v = $("#inputId").val();

 

1.2.4    jQuery对象与JS dom对象转换

/*1.js DOM对象：js 获得 value的值 */

var obj =document.getElementById("inputId");

//alert(obj.value);

 

/*2.将dom转换jQuery对象

 * * 语法：$(dom对象)

 */

var obj2 = $(obj);

//alert(obj2.val());

 

 

/*3.将jQuery对象转换成dom对象

 * * jQuery对象内部使用一个数组，存符号“选择器”条件的所有元素。

 * * 通过下标获得就是dom对象

 */

var obj3 = obj2[0];     //下标方式

//alert(obj3.value);

var obj4 = obj2.get(0); //函数方式

alert(obj4.value);

 

 

/*注意：必须区分“js dom对象”和“jQuery对象”，两个对象的函数或属性不通用。*/

1.2.5    页面加载

l  方式1：标准版

$(document).ready(function(){

    //代码

});

l  方式2：简化版

$(function(){

    //代码

});

 

 

l  总结

n  js页面加载只能设置一个

n  jQuery页面加载可以设置多个

 

1.2.6    选择器：基本选择器

 

#id，id选择器。<xxx id=””>

element，标签选择器。<xxx>

.class，类选择器。<xxx class=””>

-------------------------------

* ，表示所有

s1,s2,s3,….，多选择器，将不同选择器获得内容，同时添加到jquery数组中。

 

1.2.7   选择器：基本过滤

第2章    

过滤就是从jquery数组进行内容筛选。

 

:first，第一个

:last，最后一个

:not(...)，删除指定内容。例如：1234 ， not(3) ,结果为124

:even，索引号偶数，从0开始。

:odd，索引号为奇数，从0开始。

:eq(..)获得等于指定索引号

:gt(..)获得大于指定索引号

:lt(..)获得小于指定索引号

 

 

 

 

 

2.1      案例实现

<script src="../js/jquery-1.11.3.js"type="text/javascript" charset="utf-8"></script>

 

<script type="text/javascript">

    $(function(){

        //隔行换色

        $("tr:gt(1):odd").css("background-color","#ddd");

    });

</script>

 

2.2      扩展实现

<script type="text/javascript">

    $(function(){

        //隔行换色

        $("tr:gt(1):odd").css("background-color","#ddd");

        //鼠标移上变色 ：移上添加class，移出删除class。给当前行添加或删除 this(dom对象)

        //$("tr:gt(1)").mouseover(fn).mouseout(fn);

        $("tr:gt(1)").mouseover(function(){

            //鼠标移上 : addClass 追加样式

            $(this).addClass("active");

        }).mouseout(function(){

            //鼠标移出 ：removeClass 删除指定样式

            $(this).removeClass("active");

        });

    });

</script>

 

 

第3章    重写：左右选择

3.1      需求

 

3.2      相关知识点

3.2.1    层级选择器

 

A B ，获得A内部所有B后代。（爷孙）

A>B ，获得A内部所有B子元素。（父子）

A+B，获得A下一个兄弟B。

A~B，获得A下面所有兄弟B

 

3.2.2    属性选择器

[attr]         ，获得由“attr”属性名的元素。

[attr=val] ，获得属性名等于 值的元素。【】

[attr!=val] ，获得属性名 不等于 值的元素。

[as1][as2][as3]… ，复合属性选择器，多条件筛选。

---------------------

[attr^=val] ，获得属性值 以 val开头。<inputname=”username”>   [name^=’user’] 以“user”开头

[attr$=val] ，获得属性值 以 val结尾。

[attr*=val] ，获得属性值 含有 val。

 

 

 

3.2.3   表单对象属性选择器

:enabled，可以元素（默认）

:disabled  ，不可用元素。<xxx disabled=”disabled”>

:checked ，单选或多选选中

:selected，下列框选中

 

3.2.4   文档处理：内部插入

l  A.append(B) ，将B插入到A的内部后面

<A>

         ….

         <B></B>

</A>

l  A.prepend(B) ，将B插入到A的内部的前面

<A>

         <B></B>

         ….

</A>

------------------------------------

l  A.appendTo(B) ，将A插入到B的内部后面

<B>

         ….

         <A></A>

</B>

l  A.prependTo(B) ，将A 插入到B的内部的前面

<B>

         <A></A>

….

</B>

3.2.5    文档处理：外部插入

l  A.after(B)将B插入到A的外部后面

<A></A>

<B></B>

l  A.before(B) 将B插入到A的外部前面

<B></B>

<A></A>

 

 

 

3.3      案例实现

//1 选中第一个

$("#left1").click(function(){

    $("#leftSelectId>option:selected:first").appendTo($("#rightSelectId") );

});

 

//2 选中的所有

$("#left2").click(function(){

    $("#leftSelectId>option:selected").appendTo($("#rightSelectId") );

});

 

//3 全部

$("#left3").click(function(){

    $("#leftSelectId>option").appendTo($("#rightSelectId") );

   

    //$("#rightSelectId").append($("#leftSelectId>option") );

});

 

 

 

 

 

 

 

 

 

第4章    重写：弹出广告

4.1      需求

 

 

4.2      相关知识点

4.2.1    效果（了解）

l  基本效果，通过改变高度和宽度 进行显示或隐藏

n  show() 显示

n  hide() 隐藏

n  toggle() 切换（如果显示的将隐藏，如果是隐藏的将显示）

 

l  滑动效果：通过改变高度 进行显示或隐藏

n  slideDown()    显示

n  slideUp() 隐藏

n  slideToggle() 切换

l  淡入淡出：通过改变透明度 进行显示或隐藏

n  fadeIn() 显示

n  fadeout() 隐藏

n  fadeToggle() 切换

 

l  以上函数参数

n  参数1：操作(显示/隐藏)速度，单位：毫秒。但有3个固定字符串："slow","normal",or "fast"

n  参数2：操作成功后回调函数。

 

 

 

 

4.3      案例分析

 

4.4      案例实现

 

 

 

 

 

第5章    重写：全选/全不选

5.1      需求

 

 

5.2      案例实现

$(function(){

    /*prop(name,value) 设置属性 （状态）--property

     * removeProp(name) 删除属性

     * -----------

     * attr(name,value) 设置属性 （数据）--attribute

     * removeAttr(name) 删除属性

     * 建议：先使用prop ，再使用attr

     * */

    $("#inputId").click(function(){

        //将其他复选框的状态与当前复选框的状态保持一致

        $(".itemSelect").prop("checked",this.checked);

    });

});

 

5.3      扩展：反选

//反选

$("#reverseId").click(function(){

    $(".itemSelect").each(function(){

        //this 遍历的每一个复选框

        // * 修改自己的状态，为自己之前状态相反

        $(this).prop("checked",!this.checked );

    });

});

 

5.4      扩展：反选--女神版

//反选

$("#reverseId").click(function(){

    //修改自己的状态，为自己之前状态相反

    // * 直接编写 this 表示超链接

    // * prop提供匿名函数，使用是函数的返回值

    $(".itemSelect").prop("checked",function(){return !this.checked});

});

 

 

第6章    重写：省市联动

6.1      需求

 

 

6.2      相关知识点

6.2.1    HTML代码/文本/值

l  val() 获得value值

l  val(…)  设置value的值

l  text() 以文本的方式，获得标签体的内容。如果获得内容中有标签，将忽略。

l  text(…) 以文本的方式，设置标签体的内容。如果设置的内容有标签，将原样输出（被转义）

&lt; 小于  &gt;大于  &amp; &本身   &nbsp; 空格

l  html() 以html的方式，获得标签体的内容。如果获得内容中有标签，直接获得。

l  html(…) 以html的方式，设置标签体的内容。如果设置的内容有标签，将被浏览器解析。

 

 

 

6.3      案例实现

<script type="text/javascript">

    // 定义二维数组:

    var arr =new Array(5);

    arr[0] =new Array("市辖区","县");

    arr[1] =new Array("长春市","四平市","松原市");

    arr[2] =new Array("济南市","青岛市","日照市");

    arr[3] =new Array("石家庄市","唐山市","沧州市");

    arr[4] =new Array("韶关市","深圳市","东莞市");

   

    // 页面加载成功，给省绑定 change事件

    $(function(){

        $("#provinceId").change(function(){

            varindex = this.value;

            //获得选中省对应的市

            varallCity = arr[index];

            //恢复默认值

            $("#cityId").html("<optionvalue=''>----请-选-择-市----</option>");

            //循环

            $(allCity).each(function(){

                //this循环时遍历每一项，此处就是一个字符串

                //* 给市的select 追加内容

                $("#cityId").append("<optionvalue=''>"+this+"</option>");

            });

        });

    });

   

   

</script>

 

 

 

第7章    表单校验

7.1      需求

l  采用jQuery validate 校验插件，对表单进行校验。

 

7.2      相关知识点

7.2.1    插件：validation概述

l  目录结构

l  需要validate的类库

 

7.2.2    JS校验

l  步骤1：必须使用validate()函数

$("#formId").validate();

l  步骤2：通过固定的格式，对指定的字段确定校验规则，并对指定的字段进行相应提示。

n  通过rules 设置规则

n  通过messages设置提示信息

$("#formId").validate({

    "rules":"",

    "messages":""

});

l  步骤3：确定需要对那些表单字段进行校验

$("#formId").validate({

    "rules":{

        "username":"",

        "userpwd":""

    },

    "messages":""

});

l  步骤4：对指定的字段使用什么样的校验规则（validate插件规定好的）

$("#formId").validate({

    "rules":{

        "username":{

            "required":true

        },

        "userpwd":{

            "required":true

        }

    },

    "messages":""

});

 

 

 

 

7.3      案例分析

 

7.4      案例实现