jQuery相关

jQuery官网：http://jquery.com

jQuery在线API：http://api.jquery.com

jQuery UI:http://jqueryui.com

jQuery核心选择器Sizzle.js:http://sizzlejs.com

1、jQuery的ready事件与window.onload事件的区别：1）、window.onload需要等页面上全部加载完毕，其中包含页面中的标签引用的其它资源（整个页面需要加载完毕）；而jQuery的ready事件，只要等待页面上的所有标签加载完毕就能触发。所以说从用户的角度来说，使用jQuery事件会让用户感觉处理速度变快了

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        //1、javascript中页面加载完毕触发
        window.onload = function () { };
        //2、jQuery中页面加载完毕触发
        //2.1、完整的写法
        $(document).ready(function () { });
        //2.2、简写
        $(function () { });
        //2.3、完整写法，jQuery的符号就是‘$’
        jQuery(document).ready(function () { });
        //2.4、简写
        jQuery(function () { });
        //3、以上jQuery的写法只是window.onload的类似写法，下面这才是和window.onload表达意思相同的写法
        $(window).load(function () { });
    </script>
</head>
<body>

</body>
</html>

2、$.each(obj,function(){});循环遍历键值对或数组

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        var arrInt = [1, 2, 3, 4, 5, 6, 7, 8];
        $.each(arrInt, function (key,value) {
            alert(key + '      ,      ' + value);
        });
        var p = { 'name': '张三', '年龄': 20, 'email': '123@yaho.com' };
        $.each(p, function (key, value) {
            alert(key + '      ,      ' + value);
        });
    </script>
</head>
<body>

</body>
</html>

3、$.map(obj,function(elements,index){});遍历数组或者键值对将返回值添加到新的数组或键值对

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        var arrInt = [10, 20, 30, 40, 50, 60, 70];
        var newArr = $.map(arrInt, function (elements,index) {
            if (index > 3) {
                return elements * 2;
            } else {
                return elements;
            }
        });
        alert(newArr);
    </script>
</head>
<body>

</body>
</html>

4、jQuery对象和dom对象是可以互相转换的。

1）、当直接使用dom对象的时候会存在浏览器兼容问题，所以这时候可以把dom对象转换位jQuery对象，然后再操作。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            document.getElementById('btn1').onclick = function () {
                //获得一个dom对象
                var domObj = document.getElementById('div1');
                //将dom对象转换位jQuery对象
                var $jqObj = $(domObj);
                //调用jQuery对象的text方法
                $jqObj.text('Hello!');
            }
        });
        
    </script>
</head>
<body>
    <input type="button" name="name" value="添加" id="btn1"/>
    <div id="div1" style="width:200px;height:200px;border:1px solid green;">


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

5、jQuery中的一些常用方法

1）、val方法：有参数表示设置文本框的值，无参数表示取得文本框中的值

2）、css方法：设置对象的样式，可以一个键值对一个键值对的设置，也可以一次性传一个键值对集合批量设置

3）、text方法和html方法：都可以设置超链接显示的文字，html可以显示图片

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                //获取文本框对象
                var $txt = $(document.getElementById('txt1'));
                //取得文本框中的内容，无参的val表示获取值
                alert($txt.val());
                //给文本框中设置值，有参的val表示设置值
                $txt.val('啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊！');
                //设置样式(传一对键值对一个一个设置)
                $txt.css('border', '2px solid blue');
                //设置样式（传一个键值对集合批量设置样式）
                $txt.css({
                    'border': '2px solid red',
                    'width': '200px',
                    'height':'100px'
                });
                var $alink = $(document.getElementById('a1'));
                $alink.text('百度一下你就知道');
                $alink.html('百度两下你就不知道');
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn1" name="name" value="按钮" />
    <input type="text" id="txt1" value="" />
    <a id="a1" href="http://www.baidu.com">百度</a>
</body>
</html>

6、选择器

1）、id选择器：$('#id')

2）、标签选择器：$('p')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#div1').css({
                'width':'200px',
                'height': '200px',
                'background-color':'red'
            });
            $('p').css({
                'background-color': 'red'
            });
        });
    </script>
</head>
<body>
    <div id="div1"></div>
    <p>吼吼吼吼吼吼吼吼吼</p>
    <p>吼吼吼吼吼吼吼吼吼</p>
    <p>吼吼吼吼吼吼吼吼吼</p>
    <p>吼吼吼吼吼吼吼吼吼</p>
    <p>吼吼吼吼吼吼吼吼吼</p>
    <p>吼吼吼吼吼吼吼吼吼</p>
    <p>吼吼吼吼吼吼吼吼吼</p>
</body>
</html>

3）、类选择器：$('.x')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //选取所有应用了x类的元素
            $('.x').css({
                 'border':'2px solid red'
            });
        });
    </script>
</head>
<body>
    <div id="div1"></div>
    <input class="x" type="button" />
    <input class="x" type="text" />
    <span class="x">哈哈</span>
    <p class="x">春眠不觉晓</p>
</body>
</html>

4）、标签+类选择器：$('input.x')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //选取所有应用了x类的元素
            $('.x').css({
                 'border':'2px solid red'
            });
            //选取所有应用了x类的input元素
            $('input.x').css({
                'border':'4px solid yellow'
            });
        });
    </script>
</head>
<body>
    <div id="div1"></div>
    <input class="x" type="button" />
    <input class="x" type="text" />
    <span class="x">哈哈</span>
    <p class="x">春眠不觉晓</p>
</body>
</html>

5）、组合选择：$(.class1,#btn1,p,div)    $('选择器1，选择器2，选择器3')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.class1,#btn1,p,div').css({
                'backgroundColor':'red'
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="button" id="btn1"/>
    <p class="class1">test</p>
    <p class="class1">test</p>
    <p class="class1">test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <div>div1</div>
    <div>div1</div>
    <div class="class1">div1</div>
    <div class="class1">div1</div>
</body>
</html>

6）、层次选择器：

I、后代选择器：$('选择器1 选择器2')选择器之间用空格隔开，选取的是选择器1下面的所有的选择器2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //选取页面上所有的p元素
            $('p').css('backgroundColor', 'red');
            //选取所有div1下的p元素
            $('#div1 p').css('backgroundColor', 'yellow');
            //选取页面上所有div下的p元素
            $('div p').css('backgroundColor', 'blue');
        });
    </script>
</head>
<body>
    <div id="div1">
        <p>11111111111111</p>
        <p>22222222222222</p>
        <p>33333333333333</p>
        <p>44444444444444</p>
    </div>
    <p>55555555555</p>
    <div>
        <p>11111111111111</p>
        <p>22222222222222</p>
        <p>33333333333333</p>
        <p>44444444444444</p>
    </div>
</body>
</html>

II、子元素选择器：$('选择器1 > 选择器2')，选取的是选择器1下直接子元素选择器2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //选取body下的直接子元素span
            $('body > span').css({
                'font-size': '30px',
                'backgroundColor': 'pink'
            });
        });
    </script>
</head>
<body>
    <span>
        我是body下的span
    </span>
    <div>
        <span>我是div下的span</span>
    </div>
    <p><span>我是p下的span</span></p>
</body>
</html>

III、相邻元素选择器（必须是同级元素）：$('选择器1 + 选择器2')，取得是紧跟着选择器1后面的一个选择器2（下一个元素如果不是选择器2，中间只要隔开了就取不到了，必须是紧邻），等价于$('选择器1').next('选择器2')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('div + p').css('backgroundColor','red');
        });
    </script>
</head>
<body>
    <div>div1</div><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p>
</body>
</html>

IV、相邻选择器（必须是同级元素）：$('选择器1 ~ 选择器2'),取得是选择器1后面的所有选择器2（选择器1和选择器2之间可以允许有间隔），

等价于$('选择器1').nextAll('选择器2')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('div ~ p').css('backgroundColor', 'red');
        });
    </script>
</head>
<body>
    <div>div1</div><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p>
</body>
</html>

V、其它选择器：

$('选择器1').next()=$('选择器1 + *')；选择器1的下一个任意兄弟（同级）元素

$('选择器1').nextAll()=$('选择器1 ~ *')；选择器1的后面的所有任意兄弟（同级）元素

$('选择器1').prev('选择器2')；选择器1前面的一个兄弟（同级）选择器2

$('选择器1').prev()；选择器1前面的一个兄弟（同级）任意元素

$('选择器1').prevAll('选择器2');选择器1前面的所有兄弟（同级）选择器2

$('选择器1').prevAll();选择器1前面的所有兄弟（同级）任意元素

$('选择器1').siblings('选择器2');除了选择器1的所有兄弟（同级）选择器2

$('选择器1').siblings();除了选择器1的所有兄弟（同级）任意元素

VI、选择器练习：有些方法是会破坏链式编程的链的，比如：next(),nextAll,prev(),prevAll(),siblings(),无参数的text()、val()、html()

一旦链式编程的链被破坏之后可以通过end()方法来修复。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //给li注册鼠标移上事件，移上的li背景色变红其余变白
            //再给li注册单击事件，点击的li前面的li变绿，之后的变橘黄
            //在单击事件的时候，prevAll()方法会破坏链式编程的链（prevAll方法返回的是前面所有的li对象，不是当前点击的对象），
　　　　　　　//所以要调用一下end()方法来修复链（end()方法的作用就是返回最近点击的那个对象）
            $('#u1 li').mouseover(function () {
                $(this).css('backgroundColor', 'red').siblings('li').css('backgroundColor','');
            }).click(function () {
                $(this).prevAll().css('backgroundColor', 'green').end().nextAll().css('backgroundColor','orange');
            });
        });
    </script>
</head>
<body>
    <ul id="u1">
        <li>大天狗</li>
        <li>茨木</li>
        <li>酒吞</li>
        <li>妖刀</li>
    </ul>
</body>
</html>

jQuery实现五角星评分

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //1、给td设置样式
            //2、注册鼠标移上事件，当鼠标移上，当前以及之前为★，之后为☆
            //3、注册鼠标移出事件，当鼠标移出，所有都为☆，属性为isclicked=isclicked的及之前的为★
            //4、给每个td添加一个属性score，分别为10，20，30，40，50
            //5、给每个td注册一个单击事件，当单击某个td就给这个td添加一个isclicked属性，其余的td删除isclicked属性，然后将这个td的score属性的值给pscore
            $('#tb1 td').css({
                'width': '50px',
                'height': '50px',
                'color': 'red',
                'font-size': '50px',
                'cursor':'pointer'   
            }).mouseover(function () {
                $(this).text('★').prevAll().text('★').end().nextAll().text('☆');
            }).mouseout(function () {
                $('#tb1 td').text('☆');
                $('#tb1 td[isclicked=isclicked]').text('★').prevAll().text('★');
            }).attr('score', function (index) {
                return (index + 1) * 10;
            }).click(function () {
                $(this).attr('isclicked', 'isclicked').siblings().removeAttr('isclicked');
                $('#pscore').text($(this).attr('score'));
            });

        });
    </script>
</head>
<body>
    <p id="pscore"></p>
    <table id="tb1" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
        </tr>
    </table>
</body>
</html>

 

7、jQuery可以链式编程和隐式迭代

为什么可以链式编程呢？因为jQuery对象的方法默认在执行完毕都有一个返回值即对象本身（return this）,所以可以进行链式编程8、attr（）和prop（）

attr：是attribute的简称，表示的是’属性‘的意思，具体是表示文档节点的属性，在获取和设置自己定义的属性的时候用

prop:是proprety的简称，表示的也是‘属性’的意思，具体是表示js对象的属性，在获取和设置js dom对象的原生的属性的时候用，通过prop获取的值是经过计算的，不是直接在网页中看到的属性的值。

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //全选
            $('#btn1').click(function () {
                $('input[type=checkbox]').attr('checked', true);
                $('input[type=checkbox]').prop('checked', true);
            });
            //全不选
            $('#btn2').click(function () {
                $('input[type=checkbox]').attr('checked', false);
                $('input[type=checkbox]').prop('checked', false);
            });
            //反选
            $('#btn3').click(function () {
                //通过遍历来设置
                $.each($('input[type=checkbox]'), function (k, v) {
                    $(v).attr('checked', !$(v).attr('checked'));
                    $(v).prop('checked', !$(v).prop('checked'));
                });
                //$('input[type=checkbox]').attr('checked', function (index, attr_value) {
                //    return !attr_value;
                //});
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="全选" id="btn1" />
    <input type="button" name="name" value="全不选" id="btn2" />
    <input type="button" name="name" value="反选" id="btn3" />
    <input type="checkbox" name="name" value="" id="ch1" />
    <input type="checkbox" name="name" value="" id="ch2" />
    <input type="checkbox" name="name" value="" id="ch3" />
    <input type="checkbox" name="name" value="" id="ch4" />
</body>
</html>

8、jQuery对象就是一个dom对象的集合，所以可以通过索引直接访问其中的任何一个对象，并且返回的就是dom对象

9、通过jQuery来操作类样式：

1）、获取类样式：hasClass('类样式')；获取到了反回true,否则为false。

2）、追加类样式：addClass('类样式')；不对对象原本应用的类样式有影响，直接追加给对象
3）、移出类样式：removeClass('类样式');移出指定的类样式

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //1、判断是否应用了某个样式
                //2、如果存在移除某个类样式
                //3、如果不存在追加某个类样式
                if ($('body').hasClass('closeLingt')) {
                    $('#btn').val('关灯');
                    $('body').removeClass('closeLingt');
                } else {
                    $('body').addClass('closeLingt');
                    $('#btn').val('开灯');
                }
            });
        });
    </script>
    <style type="text/css">
        .closeLingt {
            background-color:black;
        }
    </style>
</head>
<body>
    <input type="button" name="name" value="关灯" id="btn" />
</body>
</html>

4）、自动设置类样式：toggleClass('类样式')；方法自己判断是否有某个类样式，如果有就移除这个类样式，没有就追加这个类样式。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $('body').toggleClass('closeLingt');
                if ($('#btn').val() == '开灯') {
                    $('#btn').val('关灯');
                } else {
                    $('#btn').val('开灯');
                }
            });
        });
    </script>
    <style type="text/css">
        .closeLingt {
            background-color:black;
        }
    </style>
</head>
<body>
    <input type="button" name="name" value="关灯" id="btn" />
</body>
</html>

10、常用的过滤器：使用冒号将标签和过滤器隔开，中间没有空格

1）、:first ---取第一个

2）、:last---取最后一个

3）、:eq(n)---取第n个

4）、:gt(n)---取大于n的

5）、:lt(n)---取小于n的

6）、:not(类样式)---取除了某中类样式的

7）、:header---取所有的h标签

8）、:even---取偶数行（这里的偶数指的是索引）

9）、:odd---取奇数行（这里的奇数指的是索引）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //$('p').css('backgroundColor', 'red');//给所有的p标签设置背景色
                //$('p:first').css('backgroundColor','red');//给第一个p标签设置背景色
                //$('p:last').css('backgroundColor', 'red');//给最后一个p标签设置背景色
                //$('p:eq(2)').css('backgroundColor', 'red');//给第n个p标签设置背景色，n表示p标签的索引
                //$('p:gt(2)').css('backgroundColor', 'red');//给索引大于2的p标签设置背景色，gt表示大于的意思
                //$('p:lt(2)').css('backgroundColor', 'red');//给索引小于2的p标签设置背景色，lt表示小于的意思
                //$('p:not(.cls1)').css('backgroundColor', 'red');//给除了应用了cls1样式的p标签设置背景色
                //$(':header').css('backgroundColor', 'red');//给页面上所有的h标签设置背景色
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="button" id="btn" />
    <h1>hhhhhhhhhhh</h1>
    <h2>hhhhhhhhhhh</h2>
    <h3>hhhhhhhhhhh</h3>
    <h4>hhhhhhhhhhh</h4>
    <h5>hhhhhhhhhhh</h5>
    <h6>hhhhhhhhhhh</h6>
    <p>1111111111111</p>
    <p class="cls1">1111111111111</p>
    <p>1111111111111</p>
    <p>1111111111111</p>
    <p class="cls1">1111111111111</p>
    <p class="cls1">1111111111111</p>
    <p>1111111111111</p>
</body>
</html>

10）、选择器练习

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //点击按钮表格隔行变色，奇红偶黄
                $('#tb1 tr:even').css('backgroundColor', 'red');//索引为偶数在页面上显示出来才是表格的奇数行
                $('#tb1 tr:odd').css('backgroundColor', 'yellow');//索引为奇数在页面上显示出来才是表格的偶数行
                //表格前三行字体为粗体
                $('#tb1 tr:lt(3)').css('font-weight','bolder');
            });
            //鼠标移到的行变成黄色，其余行变为蓝色
            $('#tb1 tr').mouseover(function () {
                $(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor','blue');
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="button" id="btn" />
    <table border="0" cellpadding="0" cellspancing="0" id="tb1">
        <tr><td>姓名</td><td><input type="text" id="txt1" /></td></tr>
        <tr><td>学号</td><td><input type="text" id="txt2" /></td></tr>
        <tr><td>语文</td><td><input type="text" id="txt3" /></td></tr>
        <tr><td>数学</td><td><input type="text" id="txt4" /></td></tr>
        <tr><td>物理</td><td><input type="text" id="txt5" /></td></tr>
        <tr><td>化学</td><td><input type="text" id="txt6" /></td></tr>
        <tr><td>生物</td><td><input type="text" id="txt7" /></td></tr>
        <tr><td>英语</td><td><input type="text" id="txt8" /></td></tr>
    </table>
</body>
</html>

11）、$('选择器',this)或者$('选择器',$(this))表达的意思一模一样，this表示的是在一定范围内获取选择器选择的对象

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             //设置每个单元格的样式
10             $('#tb1 td').css({
11                 'width': '50px',
12                 'height': '30px',
13                 'text-align':'center'
14             });
15             //给tb1下的所有行注册一个单击事件
16             $('#tb1 tr').click(function () {
17                 //将所有td的背景色设为默认
18                 $('#tb1 td').css('backgroundColor', '');
19                 //设置当前点击行的偶数（索引为奇数）单元格为黄色
20                 $('td:odd', this).css('backgroundColor','yellow');//这里的this表示的是‘当前行’这么个范围，也可以写成$(this)
21                 //设置当前点击行的奇数（索引为偶数）单元格为红色
22                 $('td:even', this).css('backgroundColor','red');
23             });
24         });
25     </script>
26 </head>
27 <body>
28     <table id="tb1" border="1" cellpadding="2" cellspancing="2">
29         <tr>
30             <td>AAA</td>
31             <td>AAA</td>
32             <td>AAA</td>
33             <td>AAA</td>
34             <td>AAA</td>
35         </tr>
36         <tr>
37             <td>AAA</td>
38             <td>AAA</td>
39             <td>AAA</td>
40             <td>AAA</td>
41             <td>AAA</td>
42         </tr>
43         <tr>
44             <td>AAA</td>
45             <td>AAA</td>
46             <td>AAA</td>
47             <td>AAA</td>
48             <td>AAA</td>
49         </tr>
50         <tr>
51             <td>AAA</td>
52             <td>AAA</td>
53             <td>AAA</td>
54             <td>AAA</td>
55             <td>AAA</td>
56         </tr>
57         <tr>
58             <td>AAA</td>
59             <td>AAA</td>
60             <td>AAA</td>
61             <td>AAA</td>
62             <td>AAA</td>
63         </tr>
64         <tr>
65             <td>AAA</td>
66             <td>AAA</td>
67             <td>AAA</td>
68             <td>AAA</td>
69             <td>AAA</td>
70         </tr>
71     </table>
72 </body>
73 </html>

11、属性过滤选择器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        
        $(function () {
            //1、选取所有name为txt1的元素
            //$('input[name=txt1]').css('backgroundColor', 'red');
            //2、选取所有具有name属性的input
            //$('input[name]').css('backgroundColor', 'red');
            //3、选取具有name属性的元素
            //$('body *[name]').css('backgroundColor', 'red');
            //4、选取name属性为txt1的元素
            //$('body [name = txt1]').css('backgroundColor', 'red');
            //5、选取页面上具有name属性，且name属性以a开头
            //$('body *[name^=a]').css('backgroundColor', 'red');
            //6、选取页面上具有name属性，且name属性以a结尾
            //$('body *[name$=a]').css('backgroundColor', 'red');
            //7、选取页面上具有name属性，且name属性为空的
            //$('body *[name=""]').css('backgroundColor', 'red');
            //8、选取页面上具有name属性，且name属性包含a
            //$('body *[name*=a]').css('backgroundColor', 'red');
            //9、选取页面上name属性不等于txt6(没有name属性的也会被选择)
            //$('body *[name!=txt6]').css('backgroundColor', 'red');
            //10、选取具有多个属性的元素
            $('body *[name][id][value]').css('backgroundColor', 'red');
        });
    </script>
</head>
<body>
    <input type="text" name="txt1" value="" id="t1" />
    <input type="text" name="txt2a" value="" />
    <input type="text" name="atxt3" value="" />
    <input type="text" name="txt4a" value="" />
    <input type="text" name="atxt5" value="" />
    <input type="text" name="txt6" value="" />
    <input type="text" name="" value="" />
    <input type="text" value="" />
    <input type="text" name="123a321" value="" />
    <input type="text" name="123ab321" value="" />
    <textarea name="txt1"></textarea>
</body>
</html>

12、属性 表单过滤器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //1、选取页面上所有被禁用的元素
            //$(':disabled').css('backgroundColor', 'red');
            //2、选取页面上所有没被禁用的元素
            //$(':enabled').css('backgroundColor', 'red');
            //3、选取form1下的所有被禁用的元素
            //$('#form1 :disabled').css('backgroundColor', 'red');
            //4、选取form1下的所有没被禁用的元素
            //$('#form1 :enabled').css('backgroundColor', 'red');
            //5、选取所有没被禁用的input标签
            //$('input:enabled').css('backgroundColor', 'red');
            //6、单击按钮，获取所有被选中的checkbox或radio
            //这里不知道为什么实现不了
            $('#btn').click(function () {
                $(':not(:true)').css('border', '1px solid blue');
            });
            //获取被选中的option
            $('#btn1').click(function () {
                $(':selected').text(function (key,value) {
                    return '★'+value+'★';
                });
                $('select :not(:selected)').text(function (key, value) {
                    return '☆' + value + '☆';
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" id="btn1" value="button" />
    <select>
        <option value="value">辽宁</option>
        <option value="value">辽宁1</option>
        <option value="value">辽宁2</option>
        <option value="value">辽宁3</option>
    </select>
    <input type="button" name="name" id="btn" value="button" />
    <div>
        <input type="checkbox" name="name" value="" />
        <input type="checkbox" name="name" value="" />
        <input type="radio" name="name" value="" />
        <input type="checkbox" name="name" value="" />
        <input type="radio" name="name" value="" />
    </div>
    <form id="form1" action="/" method="post">
        <input type="text" name="name" value="" disabled="disabled"/>
        <input type="text" name="name" value="" />
        <input type="text" name="name" value="" />
        <input type="button" name="name" value="button" disabled="disabled"/>
        <input type="button" name="name" value="button" />
        <input type="button" name="name" value="button" disabled="disabled"/>
        <input type="button" name="name" value="button" />
    </form>
    <p>----------------------------------------------------------------------</p>
        <input type="text" name="name" value="" disabled="disabled"/>
        <input type="text" name="name" value="" />
        <input type="text" name="name" value="" />
        <input type="button" name="name" value="button" disabled="disabled"/>
        <input type="button" name="name" value="button" />
        <input type="button" name="name" value="button" disabled="disabled"/>
        <input type="button" name="name" value="button" />
</body>
</html>

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //为每个checkbox注册单击事件
            $('input[type=checkbox]').click(function () {
                //1\获取当前被选中的
                var chks = $('input[type=checkbox]:checked');
                //2获取个数
                var n = chks.length;
                //3获取每个value
                var names = [];
                $.each(chks, function (k,chkObj) {
                    names[names.length]=$(chkObj).val();
                });
                //4显示到p中
                $('#pmsg').text('共选中了'+n+'项，分别是：'+names);
            });
        });
    </script>
</head>
<body>
    <input type="checkbox" name="name" value="鼠" />鼠
    <input type="checkbox" name="name" value="牛" />牛
    <input type="checkbox" name="name" value="猴" />猴
    <input type="checkbox" name="name" value="鸡" />鸡
    <p id="pmsg">
        共选择了0项，分别是：
    </p>
</body>
</html>

 13、jQuery动态创建元素

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //追加到元素后面
                //$('<a href="http://www.baidu.com">百度</a>').appendTo('#div1');
                //$('#div1').append('<a href="http://www.baidu.com">百度</a>');
                //插入到前面
                //$('#div1').prepend('<a href="http://www.baidu.com">百度</a>');
                //插入到div1前面
                $(('<a href="http://www.baidu.com">百度</a>')).insertBefore('#div1');
                //插入到div1后
                $(('<a href="http://www.baidu.com">百度</a>')).insertAfter('#div1');
            });
        });
    </script>
    <style type="text/css">
        #div1 {
            width:200px;
            height:200px;
            border:1px solid blue;
        }
    </style>
</head>
<body>
    <input type="button" name="name" value="button" id="btn" />
    <div id="div1">
        adasd
    </div>
</body>
</html>

jQuery实现属性选择器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $(':button[value=">>"]').click(function () {
                $('#s1 option').appendTo('#s2');
            });
            $(':button[value=">"]').click(function () {
                $('#s1 option:selected').appendTo('#s2');
            });
            $(':button[value="<<"]').click(function () {
                $('#s2 option').appendTo('#s1');
            });
            $(':button[value="<"]').click(function () {
                $('#s2 option:selected').appendTo('#s1');
            });
        });

    </script>
    <style type="text/css">
        select {
            width:200px;
            height:200px;
            border:1px solid blue;
        }
    </style>
</head>
<body>
    <select id="s1" multiple="multiple">
        <option>新增</option>
        <option>修改</option>
        <option>删除</option>
        <option>查询</option>
    </select>
    <input type="button" name="name" value="<<" />
    <input type="button" name="name" value="<" />
    <input type="button" name="name" value=">>" />
    <input type="button" name="name" value=">" />
    <select id="s2" multiple="multiple">
    </select>
</body>
</html>

 jQuery动态创建表格

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        var arrs = {
            '大天狗': 'datiangou',
            '妖刀姬': 'yaodaoji',
            '妖刀姬1':'yaodaoji1'
        };
        $(function () {
            $('#btn1').click(function () {
                var tbObj = $('<table border="1"></table>').appendTo('body');
                for (var key in arrs) {
                    $('<tr><td>' + key + '</td><td>' + arrs[key] + '</td></tr>').appendTo(tbObj);
                }
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn1" value="动态创建表格" />
</body>
</html>

14、empty和remove

empty()方法：删除元素内部

remove()方法：连带自己一起删除

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                $('#div1').empty();
            });
            $('#btn2').click(function () {
                $('#div1').remove();
            });
        });
    </script>
    <style type="text/css">
        #div1 {
            width:100px;
            height:200px;
            border:1px solid blue;
        }
    </style>
</head>
<body>
    <input type="button" name="name" id="btn1" value="empty" />
    <input type="button" name="name" id="btn2" value="remove" />
    <div id="div1">
        <a></a><p>sdads</p>
    </div>
</body>
</html>

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var sec = 4;
            var intervalId = setInterval(function () {
                if (sec > 0) {
                    $('#btn').val('倒计时' + sec + '秒');
                    sec--;
                } else {
                    $('#btn').val('同意').prop('disabled',false);
                }
            }, 1000);
        });
    </script>
</head>
<body>
    <input type="button" name="name" id="btn" value="倒计时5秒" disabled="disabled" />
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                $('<tr><td>' + $('#txtName').val() + '</td><td>' + $('#txtAge').val() + '</td><td><input onclick="deleteCurrentRow(this);" type="button" value="删除"/></td></tr>').appendTo('#tbody1');
            });
        });
        function deleteCurrentRow(current) {
            //先拿到当前点的这一行，current代表的就是button按钮，它的父节点就是th,th的父节点就是tr。
            var tr = current.parentNode.parentNode;
            $(tr).remove();
            //然后再从tbody中把这一行删除出去
           // document.getElementById('tbody1').removeChild(tr);
        }
    </script>
</head>
<body>
    <fieldset style="width: 300px;">
        <legend>新增人员信息</legend>
        <p>
            姓名：<input type="text" id="txtName" />
        </p>
        <p>
            年龄：<input type="text" id="txtAge" />
        </p>
        <p>
            <input type="button" name="name" id="btn1" value="新增" />
        </p>

    </fieldset>
    <legend style="width: 300px; text-align: center;">人员信息表</legend>
    <table border="1" cellpadding="0" cellspacing="0" style="width: 300px;">
        <thead>
            <tr>
                <th>姓名
                </th>
                <th>年龄
                </th>
                <th>删除
                </th>
            </tr>
        </thead>
        <tbody id="tbody1">
        </tbody>
    </table>
</body>
</html>

15、节点替换和节点包裹

replaceWith()，替换，$('待替换元素').replaceWith('替换成的元素')

replaceAll()，替换，$('动态创建的一个元素').replaceAll('待替换元素')

wrap(),包裹，$('被包裹元素').wrap('将要用来包裹的某种标签')，在元素外包裹

wrapInner(),包裹，$('被包裹元素').wrapInner('将要用来包裹的某种标签')，在元素内包裹

wrapAll(),包裹，$('被包裹元素').wrapAll('将要用来包裹的某种标签')，将某类元素用一个标签来包裹

16、设置radio，checkbox的选中项

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $(':radio').val(['nan']);
                $(':checkbox').val(['ppq','dlq']);
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" id="btn" value="button" />
    <p>
        <input type="radio" name="gender" value="nan" />男
        <input type="radio" name="gender" value="nv" />女
        <input type="radio" name="gender" value="baomi" />保密
    </p>
    <p>
        <input type="checkbox" name="hb" value="dlq" />打篮球
        <input type="checkbox" name="hb" value="tzq" />踢足球
        <input type="checkbox" name="hb" value="ppq" />乒乓球
    </p>
</body>
</html>

 17、高亮选中函数

 18、jQuery事件对象evt

evt.pageX 获取x坐标

evt.pageY 获取y坐标

evt.which 获取鼠标按下的值或键盘按下的值（具体看什么事件）

evt.stopPropagation() 取消事件冒泡

19、动画

show(3000),3秒显示出来

hide(3000)，3秒隐藏完毕

slideUP(3000)，3秒隐藏完毕（像窗帘一下拉上去）

slideDown(3000)，3秒显示出来（像窗帘一下拉下来）

fadeIn(3000)，3秒内淡入进来，显示

fadeOut(3000),3秒内淡出，隐藏

fadeTo(3000,0.3),3秒内淡入淡出到透明度为0.3止

toggle(3000),点击按钮如果当前是show,则为hide;反之为show

slideToggle(3000),点击按钮如果当前是slideUP,则为slideDown;反之为slideUP

fadeToggle(3000),点击按钮如果当前是fadeIn,则为fadeOut;反之为fadeIn

20、animate动画

animate({height:'10px',width:'10px'},1000);1秒内完成某个动画，花括号内是要完成的样式

$(':animated').stop();停止当前正在执行的动画，不会停止之后的动画

$(':animated').stop(true);停止当前正在执行的动画，并且清除之后队列中的动画

$(':animated').stop(true,true);//停止当前动画，并且将元素设置到当前动画正常结束时的位置，后续动画队列被清除

21、jQuery.cookie插件

1）、cookie是保存到本地硬盘里 2）、有一定安全性问题 3）、和浏览器相关 4）、经过浏览器写入到本地硬盘 5）、和域名相关

6）、是由浏览器在用户请求相同域名的时候自动携带一起来发起请求的

7）、因为cookie是写在客户端浏览器的，所以可以随时删除对应的cookie信息

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script src="jQuery/scripts/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function () {
            //1、检查是否有对应的cookie
            if ($.cookie('uname')) {
                $('#pmsg').text('欢迎您'+$.cookie('uname')+'！');
            } else {
                $('#pmsg').text('欢迎您，游客！');
            }
            $('#btn').click(function () {
                var user_name = $('#txt').val();
                $.cookie('uname', user_name, { expires: 7, path: '/', secure: false });
                alert('写入成功！');
            });
        });
    </script>
</head>
<body>
    请输入姓名：<input type="text" name="name" value="" id="txt" /><input type="button" name="name" value="登陆" id="btn" />
    <p id="pmsg">欢迎您，游客！</p>
</body>
</html>

22、jQuery各种插件的编写及使用

23、子页面刷新父页面的某个元素

$.parent.$('#spanHead').load($.parent.location.href + " #spanHead");

posted @ 2017-04-25 17:59  你是我的四月天  阅读(601)  评论(0)    收藏  举报