Web前端知识(四)

4.Web前端框架

4.1. jQuery框架

4.1.1.jQuery概述

4.1.1.1.jQuery框架概述

jQuery是一款优秀的javaScript库.jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。它可以用最少的代码, 完成更多复杂而困难的功能

jQuery的主旨:write less, do more.

写的更少, 干的更多

以更少的代码,实现更多的功能.

4.1.1.2.jQuery作者-John Resig

John Resig：第一次编程大概是在初中，14、15岁

2006年8月发布jQuery (22岁)

2007年2月加入Mozilla

2011年5月，John Resig离职Mozilla，加入在线教育集团Khan Academy。在那里，他仍继续从事jQuery相关工作，同时负责该组织的开源项目及未来的iPad应用的开发。

4.1.1.3.jQuery特点

1.轻量级

2.强大的选择器

3.出色的Dom封装

4.可靠的事件处理

5.浏览器兼容性强

6.链式操作方式

7.隐式迭代

4.1.2.jQuery代码风格

l在jQuery程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“”来起 始的。而这个“”就是jQuery当中最重要且独有的对象:jQuery对象

$(function () {}); 执行一个匿名函数

$(‘#idName’); 进行执行的ID元素选择

$(‘#idName’).css(‘color’, ‘red’); 执行功能函数

都要使用“$”把它们包裹起来.

可以写做:

执行功能函数

jQuery(function () {});

jQuery(‘#idName’);

jQuery(‘#idName’).css(‘color’, ‘red’);

4.1.3. jQuery基本使用

第一步:下载jQuery库

第二步:引入下载的jQuery库

第三步:编写jQuery代码

4.1.4.jQuery获取标签

4.1.5.jQuery中事件介绍

鼠标单击事件 click

鼠标进入事件 mouseover

鼠标离开事件 mouseout

鼠标移动事件 mousemove

4.1.6. jQuery操作CSS

l通过jQuery可以很方便的来操作CSS样式.直接设置 CSS 样式、增加 CSS 类别、类别切换、删除等操作.

直接操作

<< span="">script>
    $(document).ready(function () {
         $("button").click(function () {
             $("p").css("width","200");
             $("p").css("height","200");
             $("p").css("background","blue");
        })
    });
script>

链式写法

<< span="">script>
    $(document).ready(function () {
         $("button").click(function () {
//             $("p").css("width","200");
//             $("p").css("height","200");
//             $("p").css("background","blue");
             $("p").css("width","200").css("height","200").css("background","red");
        })
    });
script>

键值对key:value写法

案例：百度换肤实现

4.1.7. jQuery操作类

1)添加类

- 添加一个类

addClass(class)给某个元素添加一个 CSS 类

$('div').addClass('myClass1');

代码:

注意:类名没有”点”

-添加多个类

addClass(class1 class2 class3...)给某个元素添加多个 CSS 类

添加多个类时, 类名使用空格隔开

$ (‘div’).addClass(‘myClass1 myClass2');

升级版:

牛逼版:

2)删除类

-删除一个类

removeClass(class)删除某个元素的一个 CSS 类

$('div').removeClass('myClass1');

-删除多个类

removeClass(class1 class2 class3…)删除某个元素的多个 CSS 类

$('div').removeClass('myClass1 myClass2');

3)切换类

toggleClass(class)来回切换默认样式和指定样式

$('div').toggleClass('myClass1');

同样也可以在多个类之前进行切换

$('div').toggleClass('myClass1 myClass2');

4.1.7.1.特殊CSS方法

jQuery 不但提供了 CSS 的核心操作方法,比如.css()、.addClass()等。还封装了一些特殊功能的 CSS 操作方法

1.获取与修改宽高.

不带值为获取,带值为修改.

width()

width(value)

height()

height(value)

2.获取元素偏移

offset() 获取某个元素相对于视口的偏移位置

offset().left;

offset().top;

position()获取某个元素相对于父元素的偏移位置

position().left

position().top

4.1.7.2.操作HTML

l使用jQuery可以给一个标签内部添加标签以及获取标签

没有值代表获取,有值代表添加标签

html();

html(value);

获取标签当中的内容

text();

text(value);

4.1.8.jQuery选择器(***)

4.1.8.1.选择器简介

jQuery 最核心的组成部分就是:选择器引擎。

它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名、属性名、状态等进行快速准确的选择,并且不必担心浏览器的兼容性,写法更加简洁。

jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种 特殊状态的选择。

4.1.8.2.选择器分类

l1.基本选择器

l2.层级选择器

l3.属性选择器

l4.筛选(过滤)选择器

l5.表单选择器

4.1.8.3.基本选择器

实战代码:

4.1.8.4.层级选择器

间接后代：

直接后代:

紧跟第一个兄弟:

选取紧跟后面所有兄弟元素

【注意点】:一定是紧跟着(紧挨着)的，中间不能有插队！！！

.next

.nextAll

4.1.8.5.属性选择器

实战代码:

<< span="">html lang="en">
<< span="">head>
    << span="">meta charset="UTF-8">
    << span="">title>属性选择器title>

    << span="">script src='../jquery-2.1.0.min.js'>script>
    << span="">script>
        $(function () {

            $('button').eq(0).click(function () {
               $('a[href]').css({
                   'color':'red'
               });
            });

            $('button').eq(1).click(function () {
                $('a[href="www.baidu.com"]').css({
                    'color':'red'
                });
            });

            $('button').eq(2).click(function () {
                $('a[href!="www.baidu.com"]').css({
                    'color':'red'
                });
            });
            $('button').eq(3).click(function () {
                $('a[href^="www"]').css({
                    'color':'red'
                });
            });
            $('button').eq(4).click(function () {
                $('a[href$="cn"]').css({
                    'color':'red'
                });
            });
            $('button').eq(5).click(function () {
                $('a[href*="it"]').css({
                    'color':'red'
                });
            });
            $('button').eq(6).click(function () {
                $('a[href^="www"][title*="是"]').css({
                    'color':'red'
                });
            });


        });
    script>


head>
<< span="">body>

<< span="">button>获取具有href属性的 DOM 对象button><< span="">br>
<< span="">button>获取属性值为www.baidu.com对象button><< span="">br>
<< span="">button>获取属性值不为www.baidu.com对象button><< span="">br>
<< span="">button>获取属性值以www开头的对象button><< span="">br>
<< span="">button>获取属性值以cn结尾的对象button><< span="">br>
<< span="">button>获取属性值包涵it的对象button><< span="">br>
<< span="">button>获取属性值包涵www的对象并且title包含"是"的对象button><< span="">br><< span="">br><< span="">br>


<< span="">div class="divItem">
    << span="">a href="www.baidu.com" title="谁啊？">www.baidu.com百度a><< span="">br/>

<< span="">a href="www.888it.com">www.888it.com做技术888a><< span="">br/>
    << span="">a href="www.it.com" title="我是title的内容">www.it.com做技术a><< span="">br/>
    << span="">a href="sina.com.cn">sina.com.cn新浪a><< span="">br/>
    << span="">a>我没有hrefa>
div>


body>
html>

4.1.8.6.筛选(过滤)选择器

4.1.8.7.父子兄弟选择

案例:百度风云排行榜

4.1.8.8.表单选择器

4.1.9.jQuery中动画(***)

4.1.9.1.jq中动画简介

通过jQuery动画方法,能够很轻松地为网页添加非常精彩的视觉效果,给用户一种全新体验.

4.1.9.2.jq中动画分类

1.显示、隐藏

2.滑动、卷动

3.淡入、淡出

4.自定义动画

4.1.9.3.jq的显示与隐藏动画

hide()方法隐藏元素

格式:hide(speed,callback)方法

参数:

speed,动画执行的速度 要求传入一个毫秒值. 1秒等于1000毫秒

callback:动画完成时调用的方法名称.

代码:

最基本的

传入speed时间参数

传入speed和回调函数

(document).ready(function () { ("button").eq(0).click(function () {

show()方法显示元素

格式:show(speed,callback)方法

参数:

speed,动画执行的速度 要求传入一个毫秒值. 1秒等于1000毫秒

callback:动画完成时调用的方法名称.

代码实战:

切换显示隐藏

我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判 断。而 jQuery 提供给我们一个类似功能的独立方法:

toggle() 方法用来切换显示隐藏

代码实战:

【隐藏和显示以及切换动画总结】:

Ø注意:在无参数的时候,只是硬性的显 示内容和隐藏内容。

Ø.hide()方法其实就是在行内设置 CSS 代码:display:none;

Ø.show()方法要根据原 来元素是区块还是内联来决定.

如果是区块,则设置 CSS 代码:display:block;

如果是内联, 则设置 CSS 代码:display:inline;

4.1.9.4.jq中的滑动、卷起动画

jQuery 提供了一组改变元素高度的方法:

.slideUp()

.slideDown()

.slideToggle()。

顾名 思义,向上收缩(卷动)和向下展开(滑动)

注意:滑动、卷动效果和显示、隐藏效果一样,具有相同的参数。

4.1.9.5.jq动画综合案例

4.1.9.5.1.二级下拉菜单

【效果图】：

Html和css代码:

接下来：先隐藏起来所有的二级菜单

Js代码思路:

对于上面的代码，下拉菜单基本已经实现了，但是如果用户滑动鼠标太快了，会出现，前面动画没有执行完毕，后面动画就开始执行，导致动画很乱！

在每一个动画开始之前，先停止调之前所有的动画，只保留自己的动画！！

4.9.5.2.折叠菜单

效果图:

Html和css

Js代码

4.1.9.6.淡入和淡出动画

jQuery 提供了一组专门用于透明度变化的方法:

.fadeIn() 淡入

.fadeOut() 淡出

分别表示淡入、 淡出,当然还有一个自动切换的方法:

.fadeToggle() 切换淡入淡出

上面三个透明度方法只能是从 0 到 100,或者从 100 到 0,如果我们想设置指定值就没 有办法了。

而 jQuery 为了解决这个问题提供了

.fadeTo()方法

注意:淡入、淡出效果和显示、隐藏效果一样,具有相同的参数。对于.fadeTo()方法, 如果本身透明度大于指定值,会淡出,否则相反。

代码实战:

4.1.9.7.jq中自定义动画

4.1.9.7.1.自定义动画-基本使用

jQuery 提供了几种简单常用的固定动画方面我们使用。但有些时候,这些简单动画无法 满足我们更加复杂的需求。这个时候,jQuery 提供了一个.animate()方法来创建我们的自定义动画,满足更多复杂多变的要求。

语法：$(selector).animate({params},speed,callback);

参数说明:

params:必须参数,定义形成动画的 CSS 属性。

speed:可选参数,规定效果的时长,可取值 “slow”、“fast” 或毫秒。

callback:可选参数,是动画完成后所执行的函数名称。

代码实战:

使用相对值：

动画时间：设置speed参数

语法：$(selector).animate({params},speed,callback);

参数说明:

params:必须参数,定义形成动画的 CSS 属性。

speed:可选参数,规定效果的时长,可取值 “slow”、“fast” 或毫秒。

callback:可选参数,是动画完成后所执行的函数名称。

动画设置回调函数

语法：$(selector).animate({params},speed,callback);

参数说明:

params:必须参数,定义形成动画的 CSS 属性。

speed:可选参数,规定效果的时长,可取值 “slow”、“fast” 或毫秒。

callback:可选参数,是动画完成后所执行的函数名称。

4.1.9.7.2.自定义动画-队列

$("button").click(function(){

                var div=$("div");

                div.animate({height:'300px',opacity:'0.4'},"slow");

                div.animate({width:'300px',opacity:'0.8'},"slow");

                div.animate({height:'100px',opacity:'0.4'},"slow");

                div.animate({width:'100px',opacity:'0.8'},"slow");

       });

4.1.9.7.3.自定义动画-延迟

4.1.9.7.4.自定义动画-停止动画

4.1.9.7.5.综合案例-轮播图

4.2.0.jq中事件深入

4.2.0.1.事件介绍

鼠标单击事件 click

鼠标进入事件 mouseover

鼠标离开事件 mouseout

鼠标移动事件 mousemove

浏览器窗口滚动事件

$(window).scroll(function () {

}

页面卷起的部分：

1）垂直方向=》 $(window).scrollTop()

2）水平方向=》$(window).scrollLeft()

4.2.0.2.案例-固定导航案例