JQuery常用方法及基础案例

• 什么是JQ
• JS的升级版，写越少的代码，做越多的事情
• 学习JQ的基础
• HTML CSS Javascript 后台（了解）
• JQ官网
• http://jquery.com/
• 如何使用JQ
• 官网下载jquery.js文件

引入JQuery

    <script src="jquery/jquery.js"></script>

选择元素

$() ★★★★★

css() ★★★★★

JQ的$()选择符和CSS()

//document.getElementById('div1').style.color= 'red';
//document.getElementsByTagName('div')[0].style. color = 'red';
//document.getElementsByClassName('box')[0].style. color = 'red';

//JQ选择元素的风格跟CSS风格特别类似

//$('#div1').css('color', 'red');
//$('div').css('color', 'red);
//$('.box').css('color', 'red);

省略原生的循环操作
JQ省略循环

<ul>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
</ul>
var aLi = document.getElementsByTagName('li');
/*
for(){
    aLi[i].style...
}
*/
//$('li').css('background', 'red'); //JQ省略原生当中的循环的操作
jQuery('li').css('background', 'red'); //$ == jQuery 一个大名一个小名

$ == jQuery

事件 click()

• click() ★★★★★

内容 html()

• html() ★★★★★

例子：选择颜色填充方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择颜色填充方块</title>
    <style>
        div { width: 100px; height: 100px; border: 1px solid #000; float: left; margin: 10px; }
    </style>
    <script src="jquery-1.11.1.js"></script>
</head>
<body>
    <span>red</span>
    <span>yellow</span>
    <span>green</span>
    <span>blue</span>
    <br>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var color = '';
        $('span').click(function(){
            color = $(this).html()
        });
        $('div').click(function(){
            $(this).css('background', color);
        });
    </script>
</body>
</html>

取值与赋值的关系

• 通过参数决定

取值与赋值的关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取值与赋值的关系</title>
    <script src="jquery-1.11.1.js"></script>
</head>
<body>
    <div id="div1" class="box">aaaaa</div>
    <script>
        // oDiv.innerHTML; //获取
        // oDiv.innerHTML = 'bbbbb'; //赋值
        //$('#div1').html(); //获取
        //$('#div1').html('bbbbbb'); //赋值
        $('#div1').css('color', 'red'); //赋值
        alert($('#div1').css('color')); //获取div的color属性的属性值
    </script>
</body>
</html>

属性 attr()

• attr() ★★★★★

值 val()

• val() ★★★
attr()和val()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取值与赋值的关系</title>
    <script src="jquery-1.11.1.js"></script>
</head>
<body>
    <div id="div1" class="box" miaov="miaov">aaaaa</div>
    <input type="text" value="123">
    <input type="text" value="456">
    <script>
        //操作属性attr()
        $('#div1').attr('class', 'box2'); //用attr改class属性
        $('#div1').attr('title', 'hello'); //添加原本没有的属性
        alert($('#div1').attr('class')); //获取属性值
        alert($('#div1').attr('miaov')); //也可以获取自定义的属性
        //val()
        //alert($('input').val()); //获取
        //$('input').val('7777'); //针对多个input的value值进行设置
        alert($('input').val()); // 针对集合进行获取操作，只获取第一个
    </script>
</body>
</html>

强大的$()

加载

• $(function(){}); ★★★★★

属性选择

• [=] ★★★★★
• [^=] 以……起始 ★★★★★
• [$=] 以……结束 ★★★★★
• [*=] 包含……的 ★★★★★
• 引号的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载和通配符选择</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //$('input[value]').css('background', 'red'); //input有value属性的才背景变红
            //$('input[value=123]').css('background', 'red'); //value必须等于123的input才背景变红
            //$('input[value^=123]').css('background', 'red'); //value以123为起始的input元素
            //$('input[value$=444]').css('background', 'red'); //value以123为结束的input元素
            //$('input[value*=3]').css('background', 'red'); //value中有3的input元素
            $('div[class="box box2"]).css('color', 'red'); //这种情况下，box box2必须要用引号引起来
        });
    </script>
</head>
<body>
    <div id="div1" class="box box2" miaov="妙味">aaaaaa</div>
    <input type="text" value="123_444">
    <input type="text" value="123_555">
    <input type="text" value="777_888">
</body>
</html>
用$(function(){});来加载
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        /*
        window.onload = function(){
        };
        */
        $(function(){
        });
    </script>
</head>
<body>
    ...
</body>
</html>

JQ的链式操作

• $().css().html().click()
• 针对设置的时候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链式操作</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            /*
            var oDiv = $('#div1');
            oDiv.html('bbbbb');
            oDiv.css('color', 'red');
            oDiv.click(function(){
                alert(123);
            });
            */
            $('#div1').html('bbbbb').css('color', 'red').click(function(){alert(123)});
        })
    </script>
</head>
<body>
    <div id="div1">aaaaaaa</div>
</body>
</html>

集合的长度

length ★★★★★

• $()获取到的都是一个集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>集合的长度</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){

            //alert($('div').length); //3 注意没有括号，获得集合的长度
            alert($('#div1').length); //1 用$()获取到的都是元素的集合
        })
    </script>
</head>
<body>
    <div id="div1" class="box box2" miaov="妙味">aaaaaaa</div>
    <div></div>
    <div></div>
</body>
</html>

JQ实战小技巧

• 利用length判断元素是否存在
• 例子：删除指定颜色的方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过length来纠错，发现页面中没有的元素</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            var $span = $('#span1'); //这个span并不存在
            console.log($span.length); //0 说明页面中没有$span这个元素
            $span.html('bbbbb'); 
        })
    </script>
</head>
<body>
    <div id="div1">aaaaaaa</div>
</body>
</html>
删除指定颜色方块的背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除指定颜色的方块</title>
    <style>
        div { width: 100px; height: 100px; border: 1px solid #000; float: left; margin: 10px; }
    </style>
    <script src="jquery-1.11.1.js"></script>
</head>
<body>
    <span>red</span>
    <span>yellow</span>
    <span>green</span>
    <span>blue</span>
    <br>
    <input type="button" value="清空红色">
    <br>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var color = '';
        $('span').click(function(){
            color = $(this).html();
        });
        $('div').click(function(){
            $(this).css('background', color);
        });
        $('input').click(function(){
            $('div[style*=red]').css('background', '');
        });
    </script>
</body>
</html>

class的操作

addClass() ★★★

removeClass() ★★★

toggleClass() ★★★

class操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class的操作</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('#div1').addClass('box2 box4'); //添加多个class，可以用空格隔开；重复的class不会添加进去（JQ自动去重了）
            $('#div1').removeClass('box2 box4'); //找到的class会被删掉，没有找到的class被JQ自动忽略了
            $('#div1').toggleClass('box3'); //如果没有该class，就自动加上；如果有了，就自动删去
        })
    </script>
</head>
<body>
    <div id="div1" class="box box2" miaov="妙味">aaaaaa</div>
</body>
</html>

显示隐藏

show() / hide() ★★★★★

• 与CSS()的区别
• 例子：点击弹出菜单（1）
show()、hide()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class的操作</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            var bBtn = true;
            $('input').click(function(){
                if(bBtn){
                    $('div').hide();
                } else {
                    $('div').show();
                }
                bBtn = !bBtn;
            });
        })
    </script>
</head>
<body>
    <input type="button" value="点击">
    <div>div</div>
</body>
</html>

点击弹出菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击弹出菜单</title>
    <style>
        ul { display: none; }
        .box { display: block; }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('input').click(function(){
                $('ul').toggleClass('box');
            });
        })
    </script>
</head>
<body>
    <input type="button" value="点击">
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
</body>
</html>

节点的选择

prev() next() ★★★★★

prevAll() nextAll() ★★★

siblings() ★★★

• 参数的筛选功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的选择</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //$('span').next().css('background', 'red'); //p, h1
            //$('span').prev().css('background', 'red'); //div, p
            //$('p').nextAll().css('background', 'red'); //p标签下面的所有标签
            //$('p').prevAll().css('background', 'red'); //p标签之前的所有标签
            //$('p').siblings().css('background', 'red'); //找p标签所有的兄弟节点
            //参数筛选功能
            //$('p').siblings('h2').css('background', 'red'); //找p标签所有的兄弟节点中的h2节点
            //$('span').next('h1').css('background', 'red'); 
            //$('span').next('h2').css('background', 'red'); //两个span的下一个都没有h2的，所以就没有
        });
    </script>
</head>
<body>
    <div>div</div>
    <span>span</span>
    <p>p</p>
    <span>span</span>
    <h1>h1</h1>
    <h2>h2</h2>
    <h2>h2</h2>
    <h3>h3</h3>
    <em>em</em>
</body>
</html>

JQ实战小技巧

• 例子：点击弹出菜单（2）
点击弹出菜单（2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击弹出菜单</title>
    <style>
        ul { display: none; }
        .box { display: block; }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('input[type=button]').click(function(){
                //$(this).next().toggleClass('box');
                $(this).nextAll('ul').toggleClass('box');
            });
        })
    </script>
</head>
<body>
    <input type="button" value="点击">
    <input type="hidden">
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
</body>
</html>

下标

eq() ★★★★★

eq()的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下标eq()的操作</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('li').eq(1).css('background', 'red'); 
        })
    </script>
</head>
<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
</body>
</html>

• 本课练习
• 抽奖效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul{ width:328px;}

li {
    width: 100px;
    height: 100px;
    border: 1px #000 solid;
    float: left;
    margin-left: 5px;
    list-style: none;
}
.active{ background:red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
    $(function () {
        var index = 0;
        $('input').click(function () {
            //确定要走的步数（随机数 20-39）
            //每个0.3秒，要走一步（将当前div的下一个div背景色变红，当前的div的背景清空）,总步数减一
            //如果步数变为0，停止，看此时落到哪个div，就输出对应的文本，显示获得了几等奖
            var step = parseInt(Math.random() * 20) + 20;

            var timerID = setInterval(function () {
                $('li').eq(index).addClass('active').siblings().removeClass('active');
                index++;
                step--;
                if(index == 9)
                {
                    index = 0;
                }

                if(step == 0)
                {
                    clearInterval(timerID);
                    $('div').html('恭喜您中了' + $('.active').html())
                }

            },100)

        })
    })
</script>
</head>

<body>
<input type="button" value="抽奖">
<ul>
    <li>1等奖</li>
    <li>2等奖</li>
    <li>3等奖</li>
    <li>4等奖</li>
    <li>5等奖</li>
    <li>6等奖</li>
    <li>7等奖</li>
    <li>8等奖</li>
    <li>9等奖</li>
</ul>
<div></div>
</body>
</html>

节点的选择

first() ★★★

last() ★★★

slice() ★

children() ★★★

find() ★★★★★

• children和find区别
节点的选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的选择</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        // eq(0) == first();
        $(function(){
            // $('li').first().css('background', 'red'); //选择第一个
            // $('li').last().css('background', 'red'); //选择最后一个
            // $('li').slice(1, 3).css('background', 'red'); //得到的其实是从eq(1)开始到eq(2)结束
            // $('li').slice(1).css('background', 'red'); //如果在slice里面只写起始位置不写结束位置，那么就是从起始位置开始，一直到最后一个元素
            //$('ul').children().css('background', 'red'); //找到ul的所有子节点，但是孙子节点是找不到的
            // $('ul').children('div').css('background', 'red'); //children()可以过滤筛选
            // $('ul').find('p').css('background', 'red'); //可以用find找ul之下的所有节点中匹配的节点，find查找的范围比children更加广泛
        })
    </script>
</head>
<body>
    <ul>
        <li>
            1111
            <p>pppp</p>
        </li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <div>div</div>
    </ul>
</body>
</html>

JQ实战小技巧

• 避免复杂的选择器操作，而采用find操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的选择</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            // $('ul p').css('background', 'red');
            $('ul').find('p').css('background', 'red'); //用下面这种find的方式性能会更高一些
        })
    </script>
</head>
<body>
    <ul>
        <li>
            1111
            <p>pppp</p>
        </li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <div>div</div>
    </ul>
</body>
</html>

节点的选择

parent() ★★★

parents() ★

closest() ★★★★★

• 精准的查找能力，实战开发之王
• 找的是最近的唯一一个元素
• 例子：点击查找指定节点
parent()和parents()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的选择</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            // $('#div2').parent().css('border', '1px solid red'); //parent()找父级
            //parents() 获取当前元素的所有祖先节点
            // $('#div2').parents().css('border', '1px solid red'); //div1, body, html都加上了边框
            // $('#div2').parents('body').css('border', '1px solid red'); //parents()也有筛选的功能
        })
    </script>
</head>
<body>
    <div id="div1">aaa
        <div id="div2">bbb</div>
    </div>
</body>
</html>

closest()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的选择</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
    //closest()：找指定的一个最近的祖先元素（包括自身）（该函数必须加参数）；它只能选择到一个唯一的元素
        $(function(){
            // $('#div2').closest().css('border', '1px solid red'); //这样写不对，因为closest函数没有参数
            $('#div2').closest('.box').css('border', '1px solid red'); //只加在了div1上
            //如果给div2添加上class为box，那么上面的语句找到的就是div2了
        })
    </script>
</head>
<body class="box">
    <div id="div1" class="box">aaa
        <div id="div2">bbb</div>
    </div>
</body>
</html>

点击查找指定节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的选择</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //点击span，让其对应的li变红
            $('span').click(function(){
                $(this).closest('li').css('background', 'red');
            });
        })
    </script>
</head>
<body>
    <ul>
        <li><div>aaa <span>span</span><div></li>
        <li><div>aaa <span>span</span><div></li>
        <li><div>aaa <span>span</span><div></li>
        <li><div>aaa <span>span</span><div></li>
    </ul>
</body>
</html>

节点的操作

创建节点

• $(<>) ★★★★★
• 比原生JS更强大的创建方式

添加节点

• insertBefore() before() ★★★★★
• insertAfter() after() ★★★★★
• appendTo() append() ★★★★★
• prependTo() prepend() ★★★★★
• 两种写法的区别
创建节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的操作</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            // document.createElement('div');
            // $('<div>'); //这样就创建了一个div标签
            /*
            var oDiv = document.createElemenet('div');
            oDiv.innerHTML = 'hello';
            oDiv.id = 'div1';
            */
            // $('<div id="div1">hello</div>'); //直接创建了一个具备多种设置的div标签
        })
    </script>
</head>
<body>  
</body>
</html>

append()、prepend()、before()、after()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的操作</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //append()：把元素添加到指定的节点的里面的最后
            var $li = $('<li>hello</li>');
            // $('ul').append($li);
            //prepend()：把元素添加到指定的节点的里面的最前面  
            // $('ul').prepend($li);
            //before()：把元素添加到指定的节点的前面
            // $('ul').before($li);
            //after()：把元素添加到指定的节点的后面
            $('ul').after($li);
        })
    </script>
</head>
<body>
    <ul>
        <li><div>aaa <span>span</span></div></li>
        <li><div>aaa <span>span</span></div></li>
        <li><div>aaa <span>span</span></div></li>
    </ul>   
</body>
</html>

appendTo()、prependTo()、insertBefore()、insertAfter()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的操作</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            var $li = $('<li>hello</li>')
            //$('ul').append($li);
            //$li.appendTo($('ul'));
            $li.prependTo($('ul'));
        })
    </script>
</head>
<body>
    <ul>
        <li><div>aaa <span>span</span></div></li>
        <li><div>aaa <span>span</span></div></li>
        <li><div>aaa <span>span</span></div></li>
    </ul>   
</body>
</html>

两种写法的区别，会影响到链式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的操作</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            var $li = $('<li>hello</li>')
            //$('ul').append($li).css('background', 'red'); //整个ul背景变红
            $li.appendTo($('ul')).css('background', 'red'); //仅指定li背景变红
        })
    </script>
</head>
<body>
    <ul>
        <li><div>aaa <span>span</span></div></li>
        <li><div>aaa <span>span</span></div></li>
        <li><div>aaa <span>span</span></div></li>
    </ul>   
</body>
</html>

• JQ实战小技巧
• 添加html形式的操作与元素形式的操作

节点的操作

remove() ★★★★★

remove()操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除元素</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //原生的删除元素的方式
            //document.body.removeChild(oDiv);
            //jQuery的方法
            $('div').remove();
        })
    </script>
</head>
<body>
    <div>div</div>
</body>
</html>

clone() ★★★

• 默认的剪切操作
• 如何克隆事件(clone函数添加参数true)
• 例子：节点上移下移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除元素</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //$('div').appendTo($('span')); //默认是剪切操作
            $('div').click(function(){
                alert(123);
            });
            var $div = $('div').clone();
            $div.appendTo($('span')); //克隆过来的div默认没有原来div的click事件。
            //clone()默认是克隆元素结构，而不克隆行为事件。
            //clone(true)，参数true就是可以复制之前的操作行为
        })
    </script>
</head>
<body>
    <div>div</div>
    <span>span</span>
</body>
</html>

例子：节点的上移下移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除元素</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('input[value="上移"]').click(function(){
                var $nowLi = $(this).closest('li');
                var $prevLi = $nowLi.prev();
                if($prevLi.length == 0){
                    alert('到头了');
                } else {
                    $nowLi.insertBefore($prevLi);
                }
            });
            $('input[value="下移"]').click(function(){
                var $nowLi = $(this).closest('li');
                var $nextLi = $nowLi.next();
                if($nextLi.length == 0){
                    alert('到尾了');
                } else {
                    $nowLi.insertAfter($nextLi);
                }
            });
        })
    </script>
</head>
<body>
    <ul>
        <li>1.<input type="button" value="上移"><input type="button" value="下移"></li>
        <li>2.<input type="button" value="上移"><input type="button" value="下移"></li>
        <li>3.<input type="button" value="上移"><input type="button" value="下移"></li>
        <li>4.<input type="button" value="上移"><input type="button" value="下移"></li>
        <li>5.<input type="button" value="上移"><input type="button" value="下移"></li> 
    </ul>
</body>
</html>

JQ中的索引

index() ★★★★★

• 第一种用法，兄弟中的排行
• 第二种用法，筛选后的排行
• 善于利用索引做实际开发
• 例子：选项卡
兄弟中的排行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除元素</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            alert($('#div1').index());
            //index()：索引值，代表的就是当前元素在所有兄弟节点中排第几。如果不添加参数，索引值与标签类型是无关的。
        })
    </script>
</head>
<body>
    <div></div>
    <p>p</p>
    <div id="div1">div</div>
    <div>div</div>
</body>
</html>

注意事项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>索引</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            alert($('#span1').index()); //弹出0
        })
    </script>
</head>
<body>
    <div><span>span</span></div>
    <div><span id="span1">span</span></div>
    <div><span>span</span></div>
</body>
</html>

筛选后的排行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>索引</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            alert($('#span1').index('span')); //2 
            //添加了参数span，现在的index就与div没有关系了，而是看#span1在所有span中的排行
            //第二种写法也可以
            alert($('span').index($('#span1')));
            //代表在所有span获取之后进行排行，看#span1排行老几
        })
    </script>
</head>
<body>
    <div><span>span</span></div>
    <span>span</span>
    <div><span id="span1">span</span></div>
    <div><span>span</span></div>
</body>
</html>

选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除元素</title>
    <style>
        #div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
        .active {background: red;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('#div1').find('input').click(function(){
                /*
                $('#div1').find('input').attr('class', '');
                $(this).attr('class', 'active');
                $('#div1').find('div').css('display', 'none');
                $('#div1').find('div').eq($(this).index('input')).css('display', 'block');
                */
                $(this).attr('class', 'active').siblings('input').attr('class', '');
                $('#div1').find('div').eq($(this).index('input')).css('display', 'block').siblings('div').css('display', 'none');
            })
        })
    </script>
</head>
<body>
    <div id="div1">
        <input type="button" value="1" class="active">
        <input type="button" value="2">
        <input type="button" value="3">
        <div style="display: block;">111</div>
        <div>222</div>
        <div>333</div>
    </div>
</body>
</html>

JQ中的遍历

each() ★★★★★

• 回调函数的两个参数
• this指向
• 用return false跳出each()循环;
回调函数的两个参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除元素</title>
    <style>
        #div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
        .active {background: red;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //each() => for
            //$('li').html('hello'); //相同操作的，不用each就可以
            /*
            $('li').each(function(i, elem){
                alert(i);
            });
            //each中的第一个形参i就是for循环中的i
            */
            /*
            $('li').each(function(i, elem){
                //elem.style.background = 'red'; 
                $(elem).css('background', 'red');
            });
            //each中的第二个参数elem就是每个元素
            //elem返回的是原生的元素，要转成jQuery对象要用$()括起来
            */
        })
    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

each的回调函数中this的指向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除元素</title>
    <style>
        #div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
        .active {background: red;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('li').each(function(i, elem){
                //this == elem jQuery中的each循环中的this与elem是一回事；而且这个this也是原生的
                $(this).html(i);
            });
        })
    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

each()循环中用return false跳出循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除元素</title>
    <style>
        #div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
        .active {background: red;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('li').each(function(i, elem){
                //原生跳出循环用break
                //jQuery中跳出循环用return false;
                $(this).html(i);
                if(i == 2){
                    return false;
                }
            });
        })
    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

本课练习

• 左右切换数据

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        #ul1, #ul2 {
            width: 200px;
            height: 200px;
            border: 1px #000 solid;
            float: left;
        }
        li{ cursor:pointer;}
        .active{ background:red;}

        input {
            float: left;
            margin-top: 100px;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {

            $('li').click(function () {
                $(this).toggleClass('active')
            })

            $('input').eq(0).click(function () {
                $('#ul1').find('.active').appendTo($('#ul2')).removeClass('active')

            })

            $('input').eq(1).click(function () {
                $('#ul2').find('.active').appendTo($('#ul1')).removeClass('active')
            })
        })

    </script>
</head>

<body>
<ul id="ul1">
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
</ul>
<input type="button" value="→">
<input type="button" value="←">
<ul id="ul2">
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
    <li>dddd</li>
    <li>eeee</li>
</ul>
</body>
</html>

• 评分效果


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        li{ float:left; width:50px; height:50px; background:red; margin:5px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>

        $(function(){

            var bBtn = true;

            $('li').mouseover(function(){
                if(bBtn){
                    var index = $(this).index();

                    $('li').each(function(i,elem){

                        if(index>=i){
                            $(elem).css('background','blue');
                        }
                        else{
                            $(elem).css('background','red');
                        }

                    });
                }
            }).mouseout(function(){
                if(bBtn){
                    $('li').css('background','red');
                }
            });

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

                //$('li').off();
                bBtn = false;

            });

        });

    </script>
</head>

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
</html>

元素的尺寸

width() height() ★★★★★

innerWidth() innerHeight() ★★★★★

outerWidth() outerHeight() ★★★★★

• 参数的作用
• 与原生JS的区别

元素尺寸的获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的尺寸的获取</title>
    <style>
        #div1 {width: 100px; height: 100px; background: red; padding: 10px; border: 1px solid #000;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            alert($('#div1').width()); //100 不带单位
            //width() => width
            alert($('#div1').innerWidth()); //120
            //innerWidth() => width + padding 
            alert($('#div1').outerWidth()); //122
            //outerWidth() => width + padding + border
            alert($('#div1').outerWidth(true)); //132
            //outerWidth(true) => width + padding + border + margin
        })
    </script>
</head>
<body>
    <div id="div1">div</div>
</body>
</html>

元素尺寸的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的尺寸的设置</title>
    <style>
        #div1 {width: 100px; height: 100px; background: red; padding: 10px; border: 1px solid #000; margin: 5px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //$('#div1').width(200); //设置了style中的width
            //$('#div1').innerWidth(200); //padding左右是20；然后总共是200，那么style中的width就是180 => width: 200 - padding
            //$('#div1').outerWidth(200); //padding左右是20；border左右是2；总共200，那么width就是178 => width: 200 - padding - border
            $('#div1').outerWidth(200, true);
            //width: 200 - padding - border - margin为168
        })
    </script>
</head>
<body>
    <div id="div1">div</div>
</body>
</html>

实战小技巧

可视区的尺寸
页面的尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可视区的尺寸</title>
    <style>
        body {margin: 0; padding: 0;}
        #div1 {width: 100px; height: 100px; background: red; display: none; }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            alert($(window).height()); //可视区的高
            alert($(document).height()); //页面的高 
            //如果没有给body清margin和padding，得到的是2016；如果清掉了，得到的就是2000
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">div</div>
</body>
</html>

滚动距离

scrollTop() ★★★★★

scrollLeft() ★

滚动距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可视区的尺寸</title>
    <style>
        body {margin: 0; padding: 0;}
        #div1 {width: 100px; height: 100px; background: red; display: none; }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $(document).click(function(){
                //alert($(document).scrollTop()); //获取滚动距离
                //当滚动条滚到最底部的时候 $(document).scrollTop() == $(document).height() - $(window).height()
                $(document).scrollTop(300); //设置滚动距离
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">div</div>
</body>
</html>

元素距离

offset() ★★★★★

• left top

position() ★★★

• left top
• 不认margin值
offset()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>到达页面的距离：offset()</title>
    <style>
        body {margin: 0; padding: 0;}
        #div1 {width: 200px; height: 200px; background: red; margin-left: 200px; position: relative; }
        #div2 {width: 100px; height: 100px; margin-left: 50px; background: yellow;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //offset()的距离值都是相对于整个页面的
            alert($('#div1').offset().left); //元素距离整个页面左边的距离是offset().left，top就是距离整个页面上边的距离。注意left和top后面都不加括号。
            alert($('#div2').offset().left); //不论怎样嵌套，定位父级是谁，都是到达页面边缘的距离。这个与原生的offsetLeft和offsetTop不同。原生的相对于定位的祖先节点的距离。
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>
</html>

position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>到达页面的距离：offset()</title>
    <style>
        body {margin: 0; padding: 0;}
        #div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
        #div2 {width: 100px; height: 100px; margin: 50px; background: yellow;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            alert($('#div2').position().left); //0
            //position()就是到有定位的祖先节点的距离
            //position()方法默认是不认margin值的。所以上面的代码弹出0
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>到达定位祖先元素的距离position()</title>
    <style>
        body {margin: 0; padding: 0;}
        #div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
        #div2 {width: 100px; height: 100px; position: relative; left: 50px; background: yellow;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            alert($('#div2').position().left); //50
            //position()就是到有定位的祖先节点的距离
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>
</html>

实战小技巧

• 利用计算原理，得到相应值
• offsetParent() ★
• 例子：懒加载页面中的图片
计算出到有定位的祖先节点的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {margin: 0; padding: 0;}
        #div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
        #div2 {width: 100px; height: 100px; margin: 50px; background: yellow;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            alert($('#div2').offset().left - $('#div2').offsetParent().offset().left); //50
            //通过计算的方法获得到达有定位的祖先元素的距离，不管是不是由margin产生的，因此规避了position()不认margin的问题                 
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>
</html>

懒加载图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {margin: 0; padding: 0;}
        div {margin-top: 300px; width: 470px; height: 150px; border: 1px #000 solid;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            toChange();
            $(window).scroll(toChange);
            function toChange(){
                $('img').each(function(i, elem){
                    if($(elem).offset().top < $(window).height() + $(document).scrollTop()){ //如果图片进入了可视区
                        $(elem).attr('src', $(elem).attr('_src'));
                    }
                });
            }       
        })
    </script>
</head>
<body>
    <div><img _src="img/1.jpg" alt=""></div>
    <div><img _src="img/2.jpg" alt=""></div>
    <div><img _src="img/3.jpg" alt=""></div>
    <div><img _src="img/4.jpg" alt=""></div>
    <div><img _src="img/5.jpg" alt=""></div>
    <div><img _src="img/6.jpg" alt=""></div>
</body>
</html>

JQ的事件

on() ★★★★★

off() ★★★★★

• JQ中都是绑定的形式
• 支持多事件写法
• click()写法，也是采用off()取消

用on()的形式绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的事件</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
    //在JQ中的事件操作都是绑定的形式
        $(function(){
            //原生中有的事件都可以像下面这么用（去掉on）
            //$('#div1').click(function(){alert(123);});
            //$('#div1').mouseover(function(){alert(123);});
            //$('#div1').mousedown(function(){alert(123);});
            //$('#div1').scroll(function(){alert(123);})
            //$('#div1').on('click', function(){alert(123);}) //这就相当于$('#div1').click(function(){alert(123);})
            //$('#div1').on('click mouseover', function(){alert(123);}); //通过空格分隔多个事件名称，可以同时绑定
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

用off()取消事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的事件</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
    //无论是用on()还是用click()形式绑定的事件，都是用off()取消的
        $(function(){
            /*
            $('#div1').on('click mouseover', function(){
                alert(123);
                $(this).off(); //删除所有的事件操作
            })
            */
            $('#div1').on('click mouseover', function(){
                alert(123);
                $(this).off('mouseover'); //取消指定的事件
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

Event对象 ★★★★★

pageX, pageY

• 与cient的区别

which

target

stopPropagation()

preventDefault()

return false

pageX和pageY；clientX和clientY

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的event事件对象</title>
    <style>
        #div1 {margin: 200px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('#div1').click(function(ev){
                alert(ev.pageY); //鼠标的y坐标
                //ev.pageX和ev.pageY始终是相对于整个页面的
                alert(ev.clientY); //鼠标的y坐标
                //ev.clientX和ev.clientY始终是相对于可视区的
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

which键盘键值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的event事件对象</title>
    <style>
        #div1 {margin: 200px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //ev.which是键盘的键值
        $(function(){
            $(document).keydown(function(ev){
                alert(ev.which); //页面上按下按键，弹出键盘键值
                //alert(ev.keyCode); //也可以弹出键盘键值
                //alert(ev.ctrlKey); //可以检测是否ctrl键是按下的
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

ev.target事件源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的event事件对象</title>
    <style>
        #div1 {margin: 200px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //ev.target 当前目标元素，也就是事件源
        $(function(){
            $(document).click(function(ev){
                //alert(this); //这个this总是指向document
                alert(ev.target); //如果点击到a上，那么弹出的就是#div1这个元素
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

ev.stopPropagation() 阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的event事件对象</title>
    <style>
        #div1 {margin: 200px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //stopPropagation()：阻止冒泡
        $(function(){
            $(document).click(function(){
                alert(123);
            })
            $('#div1').click(function(ev){
                ev.stopPropagation(); //阻止了#div1的事件冒泡，那么点击#div1就不会再弹出123了
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

ev.preventDefault() 阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的event事件对象</title>
    <style>
        #div1 {margin: 200px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //ev.preventDefault()：阻止默认事件
        $(function(){
            $(document).contextmenu(function(ev){ //点击右键就不会弹出默认右键菜单了
                ev.preventDefault();
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

return false 既阻止默认事件又阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的event事件对象</title>
    <style>
        #div1 {margin: 200px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //在事件函数中写return false代表：既阻止默认事件又阻止冒泡
        $(function(){
            $(document).contextmenu(function(ev){
                //代码
                return false;
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">aaaaaa</div>
</body>
</html>

JQ实战小技巧

• 例子：拖拽效果
用jQuery实现拖拽效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用JQ实现拖拽</title>
    <style>
        * {margin: 0; padding: 0;}
        #div1 {width: 100px; height: 100px; background: red; position: absolute; left: 100px; top: 100px;}
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            var disX = 0;
            var disY = 0;
            var $div = $('#div1');
            $div.on('mousedown', function(ev){
                disX = ev.pageX - $(this).offset().left;
                disY = ev.pageY - $(this).offset().top;
                $(document).on('mousemove', function(ev){
                    $div.css('left', ev.pageX - disX);
                    $div.css('top', ev.pageY - disY);
                })
                $(document).on('mouseup', function(){
                    $(this).off();
                })
                return false;
            })      
        })
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1">div</div>
</body>
</html>

插花


<!DOCTYPE html>
<html>
<head>
    <title>flower</title>
    <meta charset="utf-8">
    <style type="text/css">

        body
        {
            background-repeat: no-repeat;
            background-position: 50% 400px;
            background-image: url(img/h.jpg);
        }
        img
        {
            position: absolute;
            width: 150px;
            height: 150px;
        }
        img:nth-child(1)
        {
            left:200px;
        }
        img:nth-child(2)
        {
            left:400px;
        }
        img:nth-child(3)
        {
            left:600px;
        }
        img:nth-child(4)
        {
            left:800px;
        }
        img:nth-child(5)
        {
            left:1000px;
        }
    </style>
     <script src="jquery-1.11.1.js"></script>
    <script type="text/javascript">

        $(function(){

            $('button').click(function () {
                $('body').css('background-image','url(img/h1.jpg)')
            })

            var disX = 0;
            var disY = 0;
            var $div = $('img');
            $div.on('mousedown', function(ev){
                var that = this;
                disX = ev.pageX - $(this).offset().left;
                disY = ev.pageY - $(this).offset().top;
                $(document).on('mousemove', function(ev){
                    $(that).css('left', ev.pageX - disX);
                    $(that).css('top', ev.pageY - disY);
                })
                $(document).on('mouseup', function(){
                    $(this).off();
                })
                return false;
            })
        })

    </script>
</head>
<body>
<img src="img/1.png">
<img src="img/2.gif">
<img src="img/3.gif">
<img src="img/4.png">
<img src="img/5.png">
<button>变花瓶</button>
</body>
</html>

trigger() ★★★★★

• 比click()形式更强大
• 例子：主动触发的添加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的命名空间</title>
    <style>
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        // trigger(): 主动触发
        $(function(){

            $('#input1').click(function(){
                var $li = $('<li>'+ $('#input2').val() +'</li>');
                $('ul').append($li);
            })
            $('#input2').keydown(function(ev){
                if(ev.which == 13){
                    $('#input1').trigger('click'); //点击回车的时候，就主动触发#input1的click事件
                    //$('#input1').click();  这种写法就相当于上面的那种写法
                }
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <input id="input1" type="button" value="添加"><input id="input2" type="text">
    <ul>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
    </ul>
</body>
</html>

本课练习

• 登录弹窗效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}

#login {
    width: 300px;
    height: 300px;
    background: white;
    border: 1px #000 solid;
    position: absolute;
    display:none;
}

#close {
    position: absolute;
    top: 0;
    right: 0;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>

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

        $('#login').css('left',$(window).width()/2 - $('#login').outerWidth()/2);
        $('#login').css('top',$(window).height()/2 - $('#login').outerHeight()/2);
        $('#login').css('display','block');
    })

    $('#close').click(function () {
        $(this).parent().hide();
    })

    $(window).scroll(function () {
        $('#login').css('top',$(window).height()/2 - $('#login').outerHeight()/2 + $(window).scrollTop());
    })

});

</script>
</head>

<body style="height:2000px">
<input id="input1" type="button" value="登录" />
<div id="login">
    <p>用户名:<input type="text" /></p>
    <p>密码:<input type="text" /></p>
    <div id="close">X</div>
</div>
</body>
</html>

$.ajax() ★★★★★

• 什么是ajax
• 提交数据、查询数据
• url
• success
• type
• data
• error
• dataType
• async
• 例子：ajax版本的选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <style>
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $('#input1').on('input', function(){
                //console.log(1);
                $.ajax({
                    url: 'user.do', //不写data数据，通过在url中添加'user.php?user='+ $(this).val() 也可以以get的方式传输数据
                    type: 'post', //默认的type为get方式，还有一种提交方式是post方式
                    data: {user: $(this).val()}, //可以写成json，也可以写成拼接字符串 'user='+ $(this).val()
                    dataType: 'json', //这里可以设置返回数据转化成什么类型。这里写了类型，在success里面就不需要再解析。有json、html和xml
                    success: function(data){ //返回1的时候可以注册；返回0的时候不可以注册
                        //var dataJson = $.parseJSON(data); //如果没有写dataType的话，这里要把返回的data先解析成想要的形式
                        if(data == 1){
                            $('#div1').html('可以注册');
                        } else if(data == 0){
                            $('#div1').html('已经注册过了，不能注册');
                        }
                    },
                    error: function(err){ //请求不成功的时候走error这里
                        console.log(err); //404 500以上服务器错误
                    }
                    async: false//操作是否异步。默认情况下ajax都是异步操作。如果async为false，即为同步的。同步形势下，ajax执行完毕之后，ajax后面的console.log(123);才会执行
                });
                console.log(123);
            })
        });
    </script>
</head>
<form action="reg.php">
    <input type="text" name="user" id="input1">
    <input type="submit" value="注册">
</form>
<div id="div1"></div>
<body>
</body>
</html>

用ajax实现选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
    $('#div1').find('input').click(function(){
        var index = $(this).index();
        $('#div1').find('input').attr('class','');
        $('#div1').find('div').css('display','none');
        $(this).attr('class','active');
        $('#div1').find('div').eq( index ).css('display','block');
        loadData(index,function(data){
            $('#div1').find('div').eq(index).html(data);   
        });
    });
    loadData(0,function(data){
        $('#div1').find('div').eq(0).html(data);   
    });
    function loadData(num,fn){
        $.ajax({
            url : 'data.do?num=' + num,
            success : function(data){
                fn(data);
            }
        });
    }
});
</script>
</head>
<body>
<div id="div1">
    <input class="active" type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display:block">正在加载...</div>
    <div>正在加载...</div>
    <div>正在加载...</div>
</div>
</body>
</html>

$.get() ★★★★★

• 参数的作用

$.post() ★★★★★

• 参数的作用
//第一个参数url，第二个是data，第三个是回调函数，第四个函数是datatype。基本上$.post()也是这种写法。如果获取失败了，可以调用error()这个方法。

$.get('user3.do', {name: "hello"}, function(data){
    console.log(data);
}, 'json').error(function(err){
    console.log(err);
});

ajax扩展

辅助

serialize() ★★★
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //serialize()是针对form表单的实例方法
            var a = $('form').serialize(); //注意：一定是针对form中的name和value的形式
            console.log(a); //a就处理为字符串："a=1&b=2&c=3"
            $.ajax({
                data: a //通过以上操作，在调用ajax的时候就可以直接调用这个a了
            })
        })
    </script>
</head>
<body>
    <form action="">
        <input type="text" name="a" value="1">
        <input type="text" name="b" value="2">
        <input type="text" name="c" value="3">
    </form>
</body>
</html>

springMVC框架后台可以使用@ResponseBody注解，自动把实体类，List，Map转成json字符串返回

    @RequestMapping("/checkUsername/{username}")
    @ResponseBody
    public Map<String,Dept> reg(@PathVariable String username) throws IOException {
        Dept dept = new Dept();
        dept.setDeptno(50);
        dept.setDname("销售部");
        dept.setLoc("沈阳");

        Dept dept1 = new Dept();
        dept1.setDeptno(51);
        dept1.setDname("研发部");
        dept1.setLoc("大连");
        Map<String,Dept> map=new HashMap<>();
        map.put("m1",dept);
        map.put("m2",dept1);

        return map;
    }

前端ajax部分代码

function checkUsername() {
            var username=$("input[name=username]").val();
            $.get({
                url:"${pageContext.request.contextPath}/checkUsername/"+username,
                dataType:"json",
                success:function (data) {
                    $("#span1").text(data.m1.loc);
                }
            })
        }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,179评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,229评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,032评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,533评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,531评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,539评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,916评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,574评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,813评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,354评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,937评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2赞 342

推荐阅读更多精彩内容