12、jQuery第1天 入门 导航菜单 标签页效果

2019年12月17日00:57:43 评论 47 次浏览

文件:/全栈教程/04_JS/JS核心第12天jQuery第1天/代码/2018-09-17

二、今日目标

  • 1、掌握常用的选择器
  • 2、掌握2~3个筛选方法
  • 3、掌握jQuery事件绑定方法(封装了之前学习过的dom事件,另外有新增的好多实用的事件)
  • 4、掌握toggle、hover事件的使用方法
  • 5、掌握常用事件的使用方法,如click、ready、mouseenter等
  • 6、掌握each遍历方法的使用
  • 7、掌握html()、text()、val()三个方法的用法(语法相同,用的地方不同)
  • 8、熟练查询jQuery手册

三、jQuery概述

1、什么是jQuery

jQuery是一个js框架。封装了很多实用的方法,基本解决了浏览器的兼容问题。
框架类似于现实生活中的毛坯房。比如说做一个项目好比盖一座房子。

2、特点

write less, do more. 写的更少,做的更多。
1.语法简练、语义易懂、学习快速、文档丰富。
2.jQuery 是一个轻量级的脚本,其代码非常小巧。
3.jQuery 支持 CSS1~CSS3 定义的属性和选择器
4.jQuery 是兼容浏览器的,它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。
5.能将 JavaScript (行为)脚本与 HTML (结构)源代码完全分离,便于后期编辑和维护。
6.插件丰富,除了 jQuery自身带有的一些特效外,可以通过插件实现更多功能

3、网站

官方地址为:http://jquery.com/
下载地址:http://www.jq22.com/jquery-info122 该网站内有很多插件的链接
新型版在线手册手册:http://jquery.cuishifeng.cn/
中文社区:http://jquery.org.cn/

4、发展史及版本介绍

jQuery 是继 Prototype 之后又一个优秀的 JavaScript 框架,由 John Resig 于 2006 年初创建,目前新型版本为 3.3.1。
jquery版本:
1.0.0 1.0.1 1.0.2 1.1.0 1.1.1 1.1.2 1.2.x 1.2.6 1.3.x 1.4.x 1.5.x 1.6.x 1.7.x
1.8.x 1.9.x 1.10.x 1.11.x 2.x 3.x
2.0版本以后,对IE6/7/8支持不好。但是市面上这些浏览器基本被淘汰了,所以无差别。
jQuery有一个非常大的缺点,就是不向下兼容。
每个jQuery版本都有开发版和产品版,开发版就是带空白和注释的,便于学习;产品版是去掉空白和注释的版本,体积更下,适用于线上。

5、其他类似框架

Prototype:与面向对象的原型继承关键字prototype一致,该框架的特点是功能扩展比较容易。
YUI:该框架可以实现各种页面布局效果。
Extjs : 是目前js框架包里边最为时尚、前沿的。通过该框架包可以实现许多非常绚丽的效果。
该框架可以实现效果之一:页面不同区域进行拖拽效果。由于实现的效果非常“绚丽”、导致其“实用”价值相对略低。
Mootools框架,一款短小精悍的框架,完全采用面向对象的思想进行封装,采用很多流行的技术,核心代码只有8kb,是一款非常好用的JS框架。
jQuery:使用前期,jquery侧重快速找到页面上各种节点。
后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。jQuery官方也提供了很多比较有效或有针对性的插件比如有jQueryUI、jQuery Mobile插件等。

四、快速入门

页面加载完毕,设置页面中的li标签的样式,要求字体颜色为red,背景颜色为#ccffcc。

<script src="jquery-3.3.1.js"></script>
    <script>
        //页面加载完毕,设置页面中的li标签的样式,要求字体颜色为red,背景颜色为#ccffcc。
        /** 用之前学习过的DOM方法 **/
        /*window.onload = function () {
            var lis = document.getElementsByTagName('li'); //返回数组
            for(var i=0; i<lis.length; i++){
                lis[i].style.color = 'red';
                lis[i].style.backgroundColor = '#ccffcc';
            }
        };*/

        /** 用jQuery **/
        $(); //$();是jQuery的一个函数,参数可以是一个dom对象,可以是选择器,也可以是标签。返回jQuery对象
        $(document); //返回一个jQuery对象,表示整个文档
        $(document).ready(); //ready() 是jQuery封装好的一个事件,表示页面加载完毕会触发的一个事件,它是参数是一个函数,表示事件处理函数
        $(document).ready(function(){
            //这里写你的代码
            console.log($('li')); // $('li'); 返回jquery对象,类数组的对象,当做数组用即可
            $('li').css('color', 'red'); //css是jQuery封装的一个方法,填一个参数,表示获取元素的css;填两个参数表示设置元素的css
            $('li').css('background-color', '#ccffcc'); //样式名称和css样式名称完全一致,不用去掉下划线和字母变大写
            //jQuery可以进行链式操作,对同一元素的设置可以写一行代码,如下:最终代码
            $('li').css('color', 'red').css('background-color', '#ccffcc');
        });
    </script>
    <ul>
    <li>刘备</li>
    <li>关羽</li>
    <li>张飞</li>
</ul>

五、可编辑的表格

1、开发思路

思路:
创建一个表格,当点击td的时候,创建一个input,设置input的样式和td的样式一致,然后将input放到td中。
给input在绑定事件,当前按回车键的时候表示确定修改,当失去焦点的时候,表示取消修改。
用jQuery来完成它。

2、用到的知识点

1、固定格式的jQuery事件

    $(选择器).事件方法(处理函数);
    $(document).ready(function(){});//比如

2、强大的选择器

    $('li'); //选择页面中所有的li
    $('li:first-child'); //选择页面中第一个li

3、超强的文档操作方法

$(完整的标签); //表示创建元素,比如$('<input />');
    td.append($('<input />')); //或
    $('<input />').appendTo(td);  //都表示将input放到td中

4、完美的链式操作
5、方便的事件对象

$(document).ready(function(evt){
        //这个function是事件处理函数
        //evt就是兼容的事件对象
});

3、创建各个文件

12、jQuery第1天 入门 导航菜单 标签页效果

4、HTML和css

HTML部分:

<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>曹浩</td>
    </tr>
    <tr>
        <td>2</td>
        <td>连浩</td>
    </tr>
    <tr>
        <td>3</td>
        <td>卫星</td>
    </tr>
    <tr>
        <td>4</td>
        <td>曹老板</td>
    </tr>
    <tr>
        <td>5</td>
        <td>陈冠希</td>
    </tr>
    </tbody>
</table>

CSS效果:

*{
    padding:0;
    margin:0;
    border:0 none;
}
table,td,th{
    border:solid 1px #041b28;
    border-collapse: collapse; /*合并边框*/
}

table{
    width:400px;
    margin:10px auto;
}
th,td{
    width:50%;
    padding:3px 0;
}

页面效果:
12、jQuery第1天 入门 导航菜单 标签页效果

5、选择td,绑定单击事件

12、jQuery第1天 入门 导航菜单 标签页效果

6、单击事件中,设置td的内容

12、jQuery第1天 入门 导航菜单 标签页效果

7、链式操作

12、jQuery第1天 入门 导航菜单 标签页效果

8、给input添加键盘事件

12、jQuery第1天 入门 导航菜单 标签页效果
全部源代码:

//页面加载完毕,执行...代码
$(document).ready(function(){
    //alert(123);
    //①、选择每个tr下面的最后一个td
    //$('tr td:last-child').css('color', 'red');
    //②、选择奇数个td,下标从0开始
    //$('td:odd').css('color','green');
    //③、找所有tr中的第2个td或2的倍数个td
    //$('td:nth-child(2)').css('color','green');
    //$('td:nth-child(2n)').css('color','green');
    //选择好td,然后为其绑定单击事件
    $('td:odd').click(function(){
        //alert(234);
        //将点击的td保存
        var td = $(this); //如同dom中的this
        //判断td中是否有一个input
        if(td.children().length >= 1){
            return false;
        }
        //保存td中原来的值
        var text = td.text(); //不填参数表示获取td里面的文本值,填参数表示设置td里面的文本值
        //清空td
        td.html('');
        //创建input
        //设置input的value值
        //设置input的样式
        //把input放到td中 //td.append(input);
        //让input获取焦点
        var input = $('<input />');
        input
            .val(text)
            .css('width', td.css('width'))
            .css('height', td.css('height'))
            .css('font-size', td.css('font-size'))
            .css('outline', '0')
            .appendTo(td)
            .focus(); //获取焦点这行要放到最后

        //给input绑定键盘事件
        input.keyup(function(evt){
            //alert(1233);
            var keyCode = evt.which; //用which属性来获取keyCode
            if(keyCode == 13){
                //表示确定修改,把input框中的值放到td中
                //$(this).val(); //表示获取input的value值
                td.text($(this).val());
            }
            if(keyCode == 27){
                //按ESC键,表示取消修改。把之前td中的值再次放回到td中
                td.text(text);
            }
        });
    });
});

9、案例总结

1、选择器

选择器一定要写到$()函数中,写法基本上和css选择器一样。
$('li'); //元素选择器,表示选择所有的li
$('td:odd'); //表示选择奇数个td,下标从0开始
$('tr td:last-child'); //表示找每个tr中的最后一个td
$('td:nth-child(2n)'); //表示找偶数个td

$(document); //把之前的dom对象,用$()函数处理后,形参jQuery对象
$(this); //把之前的dom对象,用$()函数处理后,形参jQuery对象

2、事件绑定方法

$('选择器').事件方法(function(evt){
    //这就是jQuery中事件的绑定方式
});

3、css、html、text、val方法

css():一个参数,表示获取元素的css;两个参数表示设置元素的css。
html():0个参数,表示获取元素的html内容;1个参数表示设置元素的html内容。
text():0个参数,表示获取元素的文本内容;1个参数表示设置元素的文本内容。
val():0个参数,表示获取元素的value值;1个参数表示设置元素的value值,专门用于表单项。

4、筛选

筛选方法,用于对已经选择的元素的进一步筛选或过滤。

children():筛选方法,用于查询元素的子元素。参数可以指定要查找什么样的子元素。

5、which属性

jQuery中的事件对象中的which属性,用于获取键盘的keyCode值。

四、纵向导航菜单

1、开发思路

点击页面中的顶级菜单,会下拉它的子菜单。
首先要找到顶级菜单,然后绑定单击事件,点击顶级菜单的时候,让其对应的子菜单慢慢滑动下来;再次点击顶级菜单,其对应的子菜单慢慢滑动隐藏

2、用到的知识点

1、全新的事件

toggle

单击的时候被会触发,触发之后它会自动检查选择的元素是什么状态,如果是显示状态则隐藏,如果是隐藏状态则显示。也就是它会自动判断元素的显示和隐藏。
toggle()应该算一个效果,只不过和事件有关系,它必须是单击事件才能够触发。

2、优雅的效果

show():单纯的显示。参数是一个毫秒单位的时间,表示经过多少毫秒的变化让元素显示出来。
hide():单纯的隐藏。参数是一个毫秒单位的时间,表示经过多少毫秒的变化让元素隐藏起来。
toggle():是show和hide方法的一个综合体,可以自动根据元素原来的状态切换显示和隐藏。
slideDown():向下滑动,显示。参数是一个毫秒单位的时间,表示经过多少毫秒的变化让元素滑动出来。
slideUp():向上滑动,隐藏。参数是一个毫秒单位的时间,表示经过多少毫秒的变化让元素滑动隐藏。
slideToggle():slide效果的一个综合体。可以根据元素的原来的状态来自动切换显示和隐藏。

3、创建目录结构

12、jQuery第1天 入门 导航菜单 标签页效果

4、HTML和css

<ul>
    <li>
        <a href="#">顶级菜单一</a>
        <ul>
            <li>子菜单11</li>
            <li>子菜单12</li>
            <li>子菜单13</li>
        </ul>
    </li>

    <li>
        <a href="#">顶级菜单二</a>
        <ul>
            <li>子菜单21</li>
            <li>子菜单22</li>
            <li>子菜单23</li>
        </ul>
    </li>

    <li>
        <a href="#">顶级菜单三</a>
        <ul>
            <li>子菜单31</li>
            <li>子菜单32</li>
            <li>子菜单33</li>
        </ul>
    </li>
</ul>
*{
    margin:0;
    padding:0;
    border:0 none;
}
ul,li{
    list-style: none;
}
/*顶级菜单*/
a{
    display: block;
    width:120px;
    height:30px;
    line-height: 30px;
    text-decoration: none;
    background-color: black;
    color:white;
}

/*子菜单*/
ul ul>li{
    width:120px;
    height:30px;
    line-height: 30px;
    background-color: darkslategrey;
    color:yellow;
}
/*默认子菜单隐藏*/
ul ul{
    display: none;
}

5、JS实现效果

12、jQuery第1天 入门 导航菜单 标签页效果

//页面载入事件
$(document).ready(function(){
    //alert(123);
    //找到顶级菜单,绑定单击事件
    $('a').click(function () {
        //alert(46);
        //实现方式一:
        /*if($(this).next().css('display') == 'none'){
            $(this).next('ul').show(2000);
        }else{
            $(this).next('ul').hide(2000);
        }*/

        //实现方式二:
        //$(this).next().toggle(2000);

        //实现方式三:
        /*if($(this).next().css('display') == 'none'){
            $(this).next('ul').slideDown(2000);
        }else{
            $(this).next('ul').slideUp(2000);
        }*/

        //实现方式四:
        $(this).next().slideToggle(800);
    });
});

6、案例总结

效果:

show()
    hide()
    toggle()(注意,要和click事件配合使用)

    slideDown()
    slideUp()
    slideToggle();(注意,要和click事件配合使用)

五、横向导航菜单

1、开发思路

鼠标放到顶级菜单上,其子菜单滑动显示,鼠标移动到子菜单上,子菜单不能消失;
鼠标离开顶级菜的和子菜单之后,子菜单滑动隐藏;
鼠标必须放到顶级菜单上超过300毫秒,才显示子菜单;

2、用到的知识点

1、全新的事件

mouseover:鼠标放到元素及其子元素上,都会触发事件
mouseout:鼠标离开元素及其子元素,都会触发事件
mouseenter:鼠标放到元素上,会触发事件。移动到它的子元素上,不会再次触发事件。
mouseleave:鼠标离开元素,会触发事件。鼠标离开它的子元素,不会再次触发事件。
hover():参数有两个,两个都是函数,第一个表示鼠标移入执行的函数,第二个表示鼠标离开执行的函数。

2、开阔的思路

3、另类的定时器

定时器还可以优化代码,当然用到的也是定时效果。
文件结构和上一个案例一样,所以赋值一份,然后修改其中的css,让菜单横向显示即可。
12、jQuery第1天 入门 导航菜单 标签页效果
12、jQuery第1天 入门 导航菜单 标签页效果

4、JS实现基本的效果

12、jQuery第1天 入门 导航菜单 标签页效果

5、使用定时器解决BUG

目前的效果,鼠标快速的划来划去,下拉菜单不断显示隐藏。
解决办法是加入定时器,如果真的要显示下拉菜单,需要鼠标悬停300,如果真悬停了300毫秒则显示下拉菜单,如果300毫秒以内,鼠标离开,那么清除定时器,不让显示的代码执行了。
12、jQuery第1天 入门 导航菜单 标签页效果

//页面载入事件
$(document).ready(function(){
    //找到大的li,绑定鼠标移入事件
    //第一版,有BUG,因为使用了mouseover和mouseout事件
 $('body>ul>li').mouseover(function(){
        //鼠标移入,其子元素中的ul显示
        $(this).children('ul').slideDown(500);
    });

    $('body>ul>li').mouseout(function(){
        //鼠标离开,其子元素中的ul显示
        $(this).children('ul').slideUp(500);
    });

    //第二版:使用mouseenter和mouseleave事件
  $('body>ul>li').mouseenter(function(){
        //鼠标移入,其子元素中的ul显示
        $(this).children('ul').slideDown(500);
    });

    $('body>ul>li').mouseleave(function(){
        //鼠标离开,其子元素中的ul显示
        $(this).children('ul').slideUp(500);
    });

    //第三版:使用一个事件---hover
    var timer = null;
    $('body>ul>li').hover(function(){
        var li = $(this);
        //鼠标移入,其子元素中的ul显示
        timer = setTimeout(function(){
            li.children('ul').slideDown(500);
        }, 300);
    }, function(){
        //鼠标离开,其子元素中的ul显示
        clearTimeout(timer);
        $(this).children('ul').slideUp(500);
    });
});

6、mouseover和mouseenter事件对比

mouseover:鼠标放到元素及其子元素上,都会触发事件。
mouseout:鼠标离开元素及其子元素,都会触发事件。
mouseenter:鼠标放到元素上,会触发事件。移动到它的子元素上,不会再次触发事件。
mouseleave:鼠标离开元素,会触发事件。鼠标离开它的子元素,不会再次触发事件。
12、jQuery第1天 入门 导航菜单 标签页效果

六、标签页效果

1、开发思路

点击标签之后,让其对应的内容区显示,同时标签会有一个效果的变化;反之,另外的标签显示默认样式,另外的内容区要隐藏。

2、用到的知识点

1、人性化的遍历
2、超强的属性操作
3、便捷的筛选
4、想象不到的链式操作

3、HTML和css

12、jQuery第1天 入门 导航菜单 标签页效果12、jQuery第1天 入门 导航菜单 标签页效果

4、JS实现功能

12、jQuery第1天 入门 导航菜单 标签页效果

$(document).ready(function(){
    //选择li,绑定单击事件,单击的时候,为其添加tab类,移除其兄弟的tab类
    //但是无法找到它对应的div
    /*$('li').click(function(){
        $(this).addClass('tab');
        $(this).siblings().removeClass('tab');
    });*/

    //jQuery中提供了一个遍历的方法,each
    // each用法一:
    /*$('li').each(function(i, val){
        //i 表示li的下标
        //val 每次遍历时的li
        console.log(i, val);
    });*/

    // each用法二:
    $.each($('li'), function (i, val) {
        //i 表示li的下标
        //val 每次遍历时的li
        //console.log(i, val);

        //遍历的时候,为每个li单独绑定一个单击事件,1
        /*$('li').eq(i).click(function () {
            console.log(i);
        });*/
        //遍历的时候,为每个li单独绑定一个单击事件,2
        $(val).click(function(){
            //console.log(i);
            $('li').eq(i).addClass('tab').siblings().removeClass('tab');
            $('div').eq(i).addClass('show').siblings('div').removeClass('show');
        });

    });


    /*for(){
        lis[i].a = i;
        lis[i].onclick = function () {

        }
    }*/
});
继续阅读
weinxin
加我微信
微信扫一扫,加我微信好友,共同交流,共同进步! (备注:焦国强博客)
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: