WEB基础入门十二：JQuery

作者: 瘦不下去了 | 来源:发表于2018-09-20 08:03 被阅读0次

WEB基础入门十二：JQuery
JQuery
技术文章地址
jQuery 简介
jQuery 简介
jQuery基础入门
jQuery基础入门
jQuery基础入门
慕课视频
HTML-01

1、JQuery介绍

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

2、JQuery加载

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

JS写法
        window.onload = function(){
            var oDiv = document.getElementById('div');
            alert(oDiv.innerHTML);//这是一个div元素
jQuery的完整写法
比上面JS写法先弹出，因为window.onload是把页面元素加载、渲染完才弹出，而ready()是把所有页面的节点加载完之后就弹出了，不用等渲染了
$(document).ready(function(){
            var $div = $('#div');
            alert('jQuery:' + $div.html());//jQuery:这是一个div元素
简写方式
$(function(){
            var $div = $('#div');//CSS样式怎么写，这里就怎么写
            //html()方法相当于原生JS的innerHTML
            alert($div.html() + 'jQuery');
        })

3、JQuery选择器

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

$(document) //选择整个文档对象
$('li') //选择所有的li元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

对选择集进行修饰过滤(类似CSS伪类)

$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素

对选择集进行函数过滤

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素

选择集转移

$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素

4、JQuery样式操作

操作行间样式

// 获取div的样式
$("div").css("width");
$("div").css("color");


//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特别注意：选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

5、属性操作

1、html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();标签

// 设置html内容

$('#div1').html('<span>添加文字</span>');

2、text() 取出或设置text内容，纯文本

// 取出文本内容

var $htm = $('#div1').text();

// 设置文本内容

$('#div1').text('<span>添加文字</span>');

3、attr() 取出或设置某个属性的非布尔值值，读写值为布尔类型的属性用prop方法

// 取出图片的地址

var $src = $('#img1').attr('src');

// 设置图片的地址和alt属性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

6、click事件

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})
<style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .sty{
            background-color: green;
        }
</style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 给按钮绑定click事件
            $('#btn').click(function(){
                //重复切换sty样式
                $('.box').toggleClass('sty');
            })
        })
    </script>
</head>
<body>
    <input type="button" value="切换" id="btn">
    <div class="box"></div>
</body>

7、Jquery索引值

<head>
    <meta charset="UTF-8">
    <title>jQuery索引值</title>
    <style type="text/css">
        .list li{
            height: 30px;
            margin-bottom: 10px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.list li').click(function(){
                // alert(this.innerHTML);//弹出标签中的内容
                alert($(this).index());//弹出下标
            })
        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>

8、Jquery做选项卡

<head>
    <meta charset="UTF-8">
    <title>jQuery做选项卡</title>
    <style type="text/css">
        .btns{
            width: 500px;
            height: 50px;
        }
        /*选项卡的样式*/
        .btns input{
            width: 100px;
            height: 50px;
            background-color: #ddd;/*默认灰色*/
            color: #666;
            border: 0px;
        }
        /*被选中的选项卡的样式*/
        .btns input.cur{
            background-color: gold;
        }
        /*内容区的样式*/
        .contents div{
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;/*默认隐藏*/
            line-height: 300px;
            text-align: center;
        }
        /*被选中的内容区的样式*/
        .contents div.active{
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btns input').click(function() {
                //失去焦点，避免出现默认的蓝框
                $(this).blur();
                //this是原生的对象
                // alert(this);//弹出[object HTMLInputElement]，说明this就是当前点击的input元素

                //jQuery的this对象使用时要用$()包起来，这样就可以调用jQuery的方法了
                //给当前元素添加选中样式，为兄弟元素移除选中样式
                $(this).addClass('cur').siblings().removeClass('cur');

                //$(this).index()获取当前按钮所在层级范围的索引值
                //显示对应索引的内容区，隐藏其它兄弟内容区
                $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
            });
        })
    </script>
</head>
<body>
    <div class="btns" id="btns">
        <input type="button" value="tab01" class="cur">
        <input type="button" value="tab02">
        <input type="button" value="tab03">
    </div>
    <div class="contents" id="contents">
        <div class="active">tab文字内容一</div>
        <div>tab文字内容二</div>
        <div>tab文字内容三</div>
    </div>
</body>

10、特殊效果

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

11、动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

<head>
    <meta charset="UTF-8">
    <title>jQuery动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            参数：
            1、什么属性做动画，属性设置{param1: value1, param2: value2}
            2、动画执行的时间，单位毫秒
            3、动画曲线：
                swing（默认值）开始和结束慢，中间快
                linear匀速
                可省略不写
            4、回调函数，动画完成之后要做的事情，可无限嵌套
            */
            $('#div1').animate({
                width: 200,
                height: 200},
                1000,
                function(){
                    // alert('动画完了！');
                    $(this).animate(
                        {marginLeft: 500},
                        1000,
                        function(){
                            $(this).animate(
                                {marginTop: 500},
                                1000
                            )
                        }
                    )
                }
            );
        })
    </script>
</head>
<body>
    <div id="div1" class="box"></div>
</body>

12、JQuery循环

        $(function(){
            // //给全部的li设置内容和样式
            // $('.list li').html('111');
            // $('.list li').css({background:'gold'});

            //第一个参数index是索引值
            $('.list li').each(function(index) {
                // alert(index);//弹出索引值
                
                //$(this)是每一个li
                $(this).html(index);
            });
        })

13、鼠标移入移出

    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            margin: 100px auto 0;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*进入子元素也触发*/
            /*$('#div1').mouseover(function() {
                $(this).animate({marginTop: 50});//.stop()
            });
            $('#div1').mouseout(function() {
                $(this).animate({marginTop: 100});//.stop()
            });*/

            /*进入子元素不触发*/
            /*$('#div1').mouseenter(function() {
                $(this).stop().animate({marginTop: 50});//
            });
            $('#div1').mouseleave(function() {
                $(this).stop().animate({marginTop: 100});//
            });*/

            /*通过hover（mouseenter+mouseleave）实现简写*/
            $('#div1').hover(function() {
                $(this).stop().animate({marginTop: 50});
            }, function() {
                $(this).stop().animate({marginTop: 100});
            });
        })
    </script>
</head>
<body>
    <div id="div1" class="box">
        <div class="son"></div>
    </div>
</body>

14、JQuery事件

blur() 元素失去焦点
focus() 元素获得焦点
change() 表单元素的值发生变化
click() 鼠标单击
dblclick() 鼠标双击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
mouseup() 松开鼠标
mousedown() 按下鼠标
mousemove() 鼠标在元素内部移动
keydown() 按下键盘
keypress() 按下键盘
keyup() 松开键盘
load() 元素加载完毕
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
select() 用户选中文本框中的内容
submit() 用户递交表单
toggle() 根据鼠标点击的次数，依次运行多个函数
unload() 用户离开页面

绑定事件的其他方式：

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

取消绑定事件

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

15、其他事件

        // //JS原生写法
        // window.onload = function(){

        // }

        // //jQuery写法，等同于上面写法
        // $(window).load(function(){

        // })

        // //ready的写法
        // $(document).ready(function(){

        // })

        // //ready的简写
        // $(function(){

        // })

        // 窗口改变尺寸的时候，会高频触发
        $(window).resize(function() {
            console.log('3');
        });

16、主动触发与自定义事件

1、主动触发
可使用jquery对象上的trigger方法来触发对象上绑定的事件。
2、自定义事件
除了系统事件外，可以通过bind方法自定义事件，然后用tiggle方法触发这些事件。

//给element绑定hello事件
element.bind("hello",function(){
    alert("hello world!");
});

//触发hello事件
element.trigger("hello");

17、事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
作用：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
通过 event.stopPropagation() 来阻止

    <style type="text/css">
        .grandfather{
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 400px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('body').click(function() {
                alert(4);
            });
            $('.grandfather').click(function() {
                alert(3);
            });
            $('.father').click(function() {
                alert(2);
            });
            $('.son').click(function(event) {//event代表当前事件
                alert(1);
                // console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标
                // alert("X轴坐标：" + event.clientX);

                // //阻止事件冒泡
                // event.stopPropagation();

                //合并阻止操作：把阻止冒泡和阻止默认行为合并
                return false;
            });

            //阻止右键菜单
            $(document).contextmenu(function(event){
                // //阻止默认行为（原来右键能弹出菜单，阻止后无法弹出）
                // event.preventDefault();

                //合并阻止
                return false;
            })
        })
    </script>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>

18、事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
一般绑定事件的写法：

$(function(){
    $ali = $('#list li');
    $ali.click(function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件委托的写法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

取消事件委托

// ev.delegateTarge 委托对象
$(ev.delegateTarge).undelegate();

// 上面的例子可使用 $list.undelegate();

        $(function(){
            /*
            给每个li绑定事件，一共绑定了8次，性能不高
            $('.list li').click(function() {
                alert($(this).html());
            });
            */

            /*
            事件委托：方法delegate，只绑定一次事件，冒泡触发
                参数：
                    selector选择器：写入ul下面的所有要发生事件的元素，多个元素用空格隔开，例如‘li a span’
                    eventType事件
                    function要执行的操作
            
            $('.list').delegate('li', 'click', function() {
                //$(this)指发生事件的子集，即每个li
                alert($(this).html());

                //全部取消委托
                $('.list').undelegate();
            });
        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

19、节点操作

    $(function(){
            var $span = $('<span>span元素</span>');
            var $p = $('<p>p段落元素</p>');
            var $h = $('<h1>页面标题</h1>');

            /*插入子元素*/
            //div中插入span和p（末尾追加）
            // $('#div1').append($span);
            // $('#div1').append($p);

            // 把span和p插入div中
            $span.appendTo('#div1');
            $p.appendTo('#div1');

            //把子元素插入到父元素（前面追加）
            // $('#div1').prepend($span);
            // $('#div1').prepend($p);
            // $span.prependTo('#div1');
            // $p.prependTo('#div1');

            //在div前边插入兄弟h1标题
            // $('#div1').before($h);
            $h.insertBefore('#div1');

            //在后边插入兄弟元素
            //after()
            //insertAfter()

            //删除p标签
            $p.remove();    
        })
    </script>
</head>
<body>
    <div id="div1"></div>
</body>

计划列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计划列表</title>
    <style type="text/css">
        .list_con{
            width:400px;
            margin:50px auto 0;
        }

        .inputtxt{
            width:350px;
            height:30px;
            border:1px solid #ccc;
            padding:0px;
            text-indent:10px;
            
        }

        .inputbtn{
            width:40px;
            height:32px;
            padding:0px;
            border:1px solid #ccc;
        }

        .list{
            margin:0;
            padding:0;
            list-style:none;
            margin-top:20px;
        }

        .list li{
            height:30px;
            line-height:30px;
            border-bottom:1px solid #ccc;
        }

        .list li span{
            float:left;
        }

        .list li a{
            float:right;
            text-decoration:none;
            margin:0 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //绑定增加按钮的点击事件
            $('#btn1').click(function() {
                //获取文本框的内容
                var txt = $('#txt1').val();
                //清空文本框的内容
                $('#txt1').val('');

                //判断文本框的内容不允许为空
                if(txt == ''){
                    alert('请输入内容！');
                    return;
                }

                //按照用户输入的内容准备好一个li列表项（从结构中复制，并替换其中的文字）
                var $li = $('<li><span>' + txt + '</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
                //把li追加到ul中
                $li.appendTo('#list');
            });

            /*
            //删除的点击监听（这种方式绑定会导致后增加的条目无法删除，因为监听在页面ready的时候绑定，还没有产生后增加的条目，所以无法实现动态绑定）
            $('.del').click(function() {
                $(this).parent().remove();
            });
            */

            //使用事件委托可以实现动态绑定，并且性能更高
            $('#list').delegate('a', 'click', function() {
                //获取点击元素的class属性的值
                var handler = $(this).attr('class');

                //根据class属性的值判断点的是删除还是排序
                switch(handler){
                    case 'del'://删除
                        var txt = $(this).parent().children(':first').html();
                        if(confirm('你确定要删除"'+txt+'"吗？')){
                            $(this).parent().remove();
                        }
                        break;
                    case 'up'://向上
                        //如果当前元素之前的元素长度为0，说明前边没有其它元素了
                        if($(this).parent().prev().length == 0){
                            alert('到顶了！');
                            return;
                        }
                        //把当前li插到前边，谁的前边？它前一个元素的前边
                        $(this).parent().insertBefore($(this).parent().prev());
                        break;
                    case 'down'://向下
                        //如果当前元素之后的元素长度为0，说明后边没有其它元素了
                        if($(this).parent().next().length == 0){
                            alert('到底了！');
                            return;
                        }
                        //把当前li插到后边，谁的后边？它后一个元素的后边
                        $(this).parent().insertAfter($(this).parent().next());
                        break;
                }
            });
        })
    </script>
</head>
<body>
    <div class="list_con">
    <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn">
        
        <ul id="list" class="list">

            <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>

        </ul>

    </div>
</body>
</html>

层级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级菜单</title>
    <style type="text/css">
        body{
            font-family:'Microsoft Yahei';
        }
        body,ul{
            margin:0px;
            padding:0px;
        }
        ul{list-style:none;}
        .menu{
            width:200px;
            margin:20px auto 0;
        }
        .menu .level1,.menu li ul a{
            display:block;
            width:200px;
            height:30px;
            line-height:30px;
            text-decoration:none;
            background-color:#3366cc;
            color:#fff;
            font-size:16px;
            text-indent:10px;           
        }
        .menu .level1{
            border-bottom:1px solid #afc6f6;
            
        }
        .menu li ul a{
            font-size:14px;
            text-indent:20px;
            background-color:#7aa1ef;
                    
        }
        .menu li ul li{
            border-bottom:1px solid #afc6f6;
        }
        .menu li ul{
            display:none;
        }
        .menu li ul.current{
            display:block;
        }
        .menu li ul li a:hover{
            background-color:#f6b544;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //当点击标题的时候
            /*
            $('.level1').click(function(){
                //点击切换展开与收起
                $(this).next().toggleClass('current');
            })
            */

            /*
            $('.level1').click(function(){
                //以下展与上卷方式切换
                $(this).next().slideToggle();
            });
            */
            $('.level1').click(function(){
                //$(this)是当前点击的a元素
                //next()获取a元素的下一个元素，即ul
                //slideDown()当前ul的子类展开
                //parent()获取父类li
                //siblings()获取父类兄弟li
                //children('ul')获取其它li的子类ul
                //slideUp()其它子类收起
                $(this).next().slideDown().parent().siblings().children('ul').slideUp();
            });
        })
    </script>
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#" class="level1">水果</a>
            <ul class="current">
                <li><a href="#">苹果</a></li>
                <li><a href="#">梨子</a></li>
                <li><a href="#">葡萄</a></li>
                <li><a href="#">火龙果</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">海鲜</a>
            <ul>
                <li><a href="#">蛏子</a></li>
                <li><a href="#">扇贝</a></li>
                <li><a href="#">龙虾</a></li>
                <li><a href="#">象拔蚌</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">肉类</a>
            <ul>
                <li><a href="#">内蒙古羊肉</a></li>
                <li><a href="#">进口牛肉</a></li>
                <li><a href="#">野猪肉</a></li>                
            </ul>
        </li>
        <li>
            <a href="#" class="level1">蔬菜</a>
            <ul>
                <li><a href="#">娃娃菜</a></li>
                <li><a href="#">西红柿</a></li>
                <li><a href="#">西芹</a></li>
                <li><a href="#">胡萝卜</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">速冻</a>
            <ul>
                <li><a href="#">冰淇淋</a></li>
                <li><a href="#">湾仔码头</a></li>
                <li><a href="#">海参</a></li>
                <li><a href="#">牛肉丸</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

手风琴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
    <style>
    *{margin:0;padding:0;}
    body{font-size:12px;}
    #accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
    #accordion ul{list-style:none;}
    #accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}
    #accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
    #accordion ul li img{display:block; float:right;}
    .bar01{left:0px;}
    .bar02{left:643px;}
    .bar03{left:664px;}
    .bar04{left:685px;}
    .bar05{left:706px;}
    .bar01 span{background:#09E0B5;}
    .bar02 span{background:#3D7FBB;}
    .bar03 span{background:#5CA716;}
    .bar04 span{background:#F28B24;}
    .bar05 span{background:#7C0070;}
</style>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#accordion li').click(function() {
                $(this).animate(
                    {left: $(this).index()*21}
                );
                /*
                错误的索引用法
                    这里不能使用function(index)的索引，因为循环会先执行完，当点击事件执行时，会导致索引值不对，所以还应该使用已经保存在this当中的索引值
                
                $(this).prevAll().each(function(index){
                    alert(index);

                    $(this).animate(
                        {left: index*21}
                    );
                })
                */

                /*要使用保存在$(this)里边的索引值*/
                // 当前li之前的所有兄弟li都往左移
                // 由于每个li移动的距离不同，使用each循环分别设置left值
                $(this).prevAll().each(function(){
                    //要移动的每一个元素
                    $(this).animate(
                        {left: $(this).index()*21}
                    );
                })
                // 当前li之后的所有兄弟li都往右移
                $(this).nextAll().each(function(){
                    //要移动的每一个元素
                    $(this).animate(
                        {left: 727-(5-$(this).index())*21}
                    );
                })
            });
        })
    </script>
</head>
<body>
    <div id="accordion">
    <ul>
        <li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
        <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
        <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
        <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
        <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
    </ul>
</div>
</body>
</html>

无缝滚动


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style type="text/css">
        body,ul,li{margin:0;padding:0}
        ul{list-style:none;}
        .slide{
            width:500px;
            height:100px;
            border:1px solid #ddd;
            margin:20px auto 0;
            position:relative;
            overflow:hidden;
        }
        .slide ul{
            position:absolute;/*相对于slide进行绝对定位*/
            width:1000px;/*比slide宽度大一倍，做这种连续滚动效果的时候，要在后面把内容复制一份*/
            height:100px;
            left:0;/*可以改变该值让其动起来*/
            top:0;
        }
        .slide ul li{
            width:90px;
            height:90px;
            margin:5px;
            background-color:#ccc;
            line-height:90px;
            text-align: center;
            font-size:30px;
            float:left;
        }
        .btns{
            width:500px;
            height:50px;
            margin:10px auto 0;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $ul = $('#slide ul');
            var left = 0;
            var deraction = 2;//每次滚动的距离

            //内容为两套li
            $ul.html($ul.html() + $ul.html());

            //反复循环定时器，30ms动一下可以看起来比较平滑
            var timer = setInterval(move, 30);

            function move(){
                left -= deraction;
                //当第2套li完全显示出来的时候，整个移回原点重新移动，实现向左连续滚动
                if(left < -500){
                    left = 0;
                }
                //瞬间跳回，实现向右连续滚动
                if(left > 0){
                    left = -500;
                }

                $ul.css({left: left});
            }

            $('#btn1').click(function() {
                deraction = 2;
            });
            $('#btn2').click(function() {
                deraction = -2;
            });

            $('#slide').mouseover(function() {
                clearInterval(timer);
            });
            $('#slide').mouseout(function() {
                timer = setInterval(move,30);
            });
        })
    </script>
</head>
<body>
    <div class="btns">
        <input type="button" name="" value="向左" id="btn1">
        <input type="button" name="" value="向右" id="btn2">
    </div>
    <div class="slide" id="slide">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>          
        </ul>
    </div>
</body>
</html>

置顶菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>置顶菜单</title>
    <style type="text/css">
        body{margin:0px;}
        .logo_bar{
            width:960px;
            height:200px;
            background-color:#f0f0f0;
            margin:0 auto;
            
        }
        .menu,.menu_pos{
            width:960px;
            height:50px;
            margin:0 auto;
            background-color:gold;
            text-align:center;
            line-height:50px;
        }
        .menu_pos{
            display:none;
        }

        .down_con{
            width:960px;
            height:1800px;
            margin:0 auto;
        }

        .down_con p{
            margin-top:100px;
            text-align:center;
        }
        .totop{
            width:50px;
            height:50px;
            background:url(images/up.png) center center no-repeat #000;
            border-radius:50%;
            position:fixed;
            right:50px;
            bottom:50px;
            display: none;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(window).scroll(function() {
                //获取页面滚动时，超出浏览器窗口上方的高度
                var nowTop = $(document).scrollTop();
                // console.log(nowTop);

                if(nowTop > 200){
                    //将菜单置顶显示
                    $('.menu').css({
                        position: 'fixed',
                        left: '50%',
                        top:0,
                        marginLeft: '-480px'
                    });
                    //显示占位层，避免页面跳动
                    $('.menu_pos').show();
                }else{
                    //取消置顶菜单，菜单归入文档流
                    $('.menu').css({
                        position: 'static',//取消定位
                        marginLeft: 'auto'
                    });
                    //隐藏点位层
                    $('.menu_pos').hide();
                }

                //滚动到顶部按钮的显示和隐藏
                if(nowTop > 400){
                    $('.totop').fadeIn();
                }else{
                    $('.totop').fadeOut();
                }
            });

            //动画的方式滚动到页面顶部
            $('.totop').click(function() {
                $('html,body').animate({scrollTop: 0});
            });
        })
    </script>
</head>
<body>
    <div class="logo_bar">顶部logo</div>
    <div class="menu">置顶菜单</div>
    <!-- 占位层，如果菜单显示，它就隐藏，菜单浮动，它就显示，顶替菜单的位置，避免页面跳动 -->
    <div class="menu_pos"></div>
    <div class="down_con">
        <p style="color: red">网站主内容</p>
        <p>网站主内容</p>
        <p>网站主内容</p>
        <p>网站主内容</p>
        <p>网站主内容</p>
    </div>
    <!-- 点击超链接时，不想跳转页面的href写法 -->
    <a href="javascript:;" class="totop"></a>
</body>
</html>

WEB基础入门十二：JQuery
1、JQuery介绍 jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。 ...
JQuery
JQuery 基础：概念快速入门JQuery对象和JS对象区别与转换选择器DOM操作案例 JQuery 基础：概...
技术文章地址
Web前端开发CSS、JS 廖雪峰的JS教程 JQuery基础前端工程师必备的PS技能—切图篇前端入门方法 A...
jQuery 简介
本教程我们来学习 JQuery 的基础入门知识。JQuery 是一个快速、简洁的 JavaScript 框架，是继...
jQuery 简介
本教程我们来学习 JQuery 的基础入门知识。JQuery 是一个快速、简洁的 JavaScript 框架，是继...
jQuery基础入门
jQuery基础（一）——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
jQuery基础入门
jQuery是目前使用最广泛的JavaScript库，它提供的 API 易于使用且兼容众多浏览器，优化HTML文档...
jQuery基础入门
jQuery是目前使用最广泛的JavaScript库，它提供的 API 易于使用且兼容众多浏览器，优化HTML文档...
慕课视频
免费《Web安全-XSS》《ReactNative基础与入门》《React入门》《在React中使用Redux数...
HTML-01
Web基础知识 Web与Internet Web的工作原理 Web的相关技术 HTML快速入门 HTML概述超文...

WEB基础入门十二：JQuery

1、JQuery介绍

2、JQuery加载

3、JQuery选择器

4、JQuery样式操作

5、属性操作

6、click事件

7、Jquery索引值

8、Jquery做选项卡

10、特殊效果

11、动画

12、JQuery循环

13、鼠标移入移出

14、JQuery事件

15、其他事件

16、主动触发与自定义事件

17、事件冒泡

18、事件委托

19、节点操作

计划列表

层级菜单

手风琴

无缝滚动

置顶菜单

相关文章

WEB基础入门十二：JQuery

JQuery

技术文章地址

jQuery 简介

jQuery 简介

jQuery基础入门

jQuery基础入门

jQuery基础入门

慕课视频

HTML-01

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读