JQuery基础一

时间：2023-03-10 07:15:36
JQuery基础一

http://www.cnblogs.com/Chenfengtao/archive/2012/01/12/2320490.html  

jquery 使用方法

1、在浏览器点击F12，调出源码设置端点F11进行调试

2、要操作DOM对象，首先要把DOM对象封装成juery对象:

jQuery(document).ready(function () {
 alert('页面加载完了2');
 });

juery = $,

3、jQuery页面加载完成写法

$(function () {
alert('加载完了');
});

4、map是对数组遍历 ,arg参数一般不用理

var arr = [1, 2, 4, 5, 6, 7];

var arrs = $.map(arr, function () {

　　alert((arguments);//返回function ()函数有几个参数

　　alert((arguments[0]);//返回function ()函数第一个参数
 });

var arrs= $.map(arr, function (ele, index) {
　　return ele * 2;//返回元素值改变后的数组
});

$.map(arr, function (ele, index) {
　　alert(ele+'==='+index);
　　//alert(arguments[0]+'==='+arguments[1]+'=='+arguments[2]);
});

5、each对键值对遍历,arg参数一般不用理

var arr = [45, 56, 43, 23, 112];

$.each(arr, function (k, v) {
 　　//k---索引,v值
　　alert(k+'=='+v);
 });

 var arr = { "yzk": "椰子壳", "jk": "接口", "ml": "玛丽" };
 $.each(arr, function (k, v) {
　　//k====键,v====值
 　　alert(k+'=='+v);
 });

6、$.trim取掉空格

// var msg = ' 感冒真舒服,一般都不感冒 ';
// alert('==' +$.trim(msg)+'==');

7、dom对象转换为jqurey对象

<!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>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            document.getElementById('btn').onclick = function () {

                //dom对象

//                var dvObj = document.getElementById('dv');

//                var jq = $(dvObj); //dom对象转jquery对象

//                //var dd= jq.get(0);//jquery对象转dom对象

//                var dd = jq[0];

                //链式编程

                // $(dvObj).css('width', '300px').css('height', '200px').css('backgroundColor', 'yellow').text('哈哈哈');//如果写内容了 那么就是设置，如果没写就是获取

                //jquery写法

                //                $(dvObj).css('width', '300px');

                //                $(dvObj).css('height', '200px');

                //                $(dvObj).css('backgroundColor', 'yellow');

                //                $(dvObj).text('<font color="red",size="7">哈哈哈 太帅了</font>');

                //                dvObj.style.width = '300px';

                //                dvObj.style.height = '200px';

                //                dvObj.style.backgroundColor = 'yellow';

            };

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="显示效果" id="btn" />

    <div id="dv">

    </div>

</body>

</html>

8、id选择器,标签选择器,类选择器,优先级：标签选择器->类选择器->id选择器

<!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>

    <title></title>

    <style type="text/css">

        /*id选择器,标签选择器,类选择器*/

        /*id选择器

      #dv

    {

        width:300px;

        height:200px;

        background-color:Yellow;

        }*/

        /*标签选择器

         div

        {

              width:300px;

        height:200px;

        background-color:Yellow;

            }*/

       /*类选择器

         .cls

        {

            width: 300px;

            height: 200px;

            background-color: Yellow;

        }*/

    </style>

</head>

<body>

    <div id="dv">

    </div>

    <div class="cls">

    </div>

</body>

</html>

9、选择器获取元素

<!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>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        //点击按钮 改变层的样式，并且在层中 来个font标签 显示样式

        //页面加载了

        $(function () {

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

                $('#dv').css('width', '300px').css('height', '200px').css('backgroundColor', 'orange').html('<font color="red" size="7" face="全新硬笔行书简">我会用挖掘机控制计算机开飞机</font>');

                $(this).val('嘎嘎');

            });

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="哈哈" id="btn" />

    <div id="dv">

    </div>

</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>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <style type="text/css">

    .cls

    {

        background-color:Orange;

        border:1px solid red;

        }

    </style>

    <script type="text/javascript">

        $(function () {

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

                //  $('p').text('我们都是好人'); //隐式迭代

                $('.cls').text('文能提笔控萝莉');

                // so easy --各种选择器

            });

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="改变" id="btn" />

    <p>床前明月光

    </p>

    <p class="cls">疑是地上霜

    </p>

    <p>举头望明月

    </p>

    <p>低头思故乡

    </p>

</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>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

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

                $(this).text('我心疼坏了').css('color', 'red');

            }).mouseover(function () {

                $(this).css('cursor', 'pointer');

            }).mouseout(function () {

                $(this).css('color', '');

            });

        });

    </script>

</head>

<body>

    <p>

        锄禾日当午

    </p>

    <p>

        汗滴禾下土

    </p>

    <p>

        谁知盘中餐

    </p>

    <p>

        粒粒皆辛苦

    </p>

</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>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

//        $(function () {

//            $('#btn').click(function () {

//                //$('div.cls').css('backgroundColor','green');

//            });

//

//        });

    </script>

    <script type="text/javascript">

        $(function () {

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

            //多条件选择器

                $('p,strong,div.cls').css('backgroundColor','red');

            });

        });

    </script>

    <style type="text/css">

    .cls

    {

        width:100px;

        height:50px;

        background-color:Orange;

        }

    </style>

</head>

<body>

    <input type="button" name="name" value="效果" id="btn" />

    <p>

    这是p

    </p>

    <strong>这是strong</strong>

    <div class="cls">

    </div>

    <div style=" width:300px; height:200px; background-color:Yellow;">

    </div>

</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>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

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

            //所有的

               // $('*').css('backgroundColor', 'red');

                //层中所有的p标签,

                // $('div p').css('backgroundColor','red');

                //直接的子元素，如果在直接的子元素中还有该元素.那么也可以

                //$('div>p').css('backgroundColor', 'red');

                //层后面的直接的p标签

                //$('div+p').css('backgroundColor', 'red');

                //层后面所有的p标签

                //$('div~p').css('backgroundColor', 'red');

            });

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="显示效果" id="btn" />

    <p>

        这是p标签第一个

    </p>

    <p>

        这是第二个p标签

    </p>

    <div style="width: 300px; height: 200px; background-color: Green;">

        <p>

            层中的第一个

        </p>

        <p>

            层中的中间的<p>

                层中的p中的p</p>

        </p>

        <p>

            层中的第二个

        </p>

        <strong>

            <p>

                strong中的p</p>

        </strong>

    </div>

    <p>

        层后面的第一个

    </p>

    <strong>content</strong>

    <p>

        层后面的第二个

    </p>

</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>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

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

                //层后面的第一个

                // $('div').next().css('color','red');

                //层后面所有的

                //$('div').nextAll().css('color','blue');

                //层前面的第一个

                //$('div').prev().css('color', 'blue');

                //层前面所有的

                // $('div').prevAll().css('color', 'blue');

                //兄弟元素

                //$('#p1').siblings().css('color', 'blue');

            });

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="显示效果" id="btn" />

    <p id="p1">

        这是P</p>

    <p>

        这是P</p>

    <div style=" width:300px; height:200px; background-color:Yellow;">

        <p>

            这是P</p>

        <p>

            这是P</p>

        <p>

            这是P</p>

    </div>

    <strong>content</strong>

    <p>

        这是P</p>

    <p>

        这是P</p>

</body>

</html>

页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝。自己不变色。

<!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>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        //页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝。自己不变色。

        $(function () {

            //            $('#uu li').mouseover(function () {

            //                $(this).css('backgroundColor', 'red');

            //            }).click(function () {

            //               // $(this).prevAll('li').css('backgroundColor', 'yellow');

            //                // $(this).nextAll('li').css('backgroundColor', 'blue');

            //                //第二种方式

            //                $(this).prevAll('li').css('backgroundColor', 'yellow').end().nextAll('li').css('backgroundColor', 'blue');

            //            }).mouseout(function () {

            //                $(this).css('backgroundColor', '');

            //            });

//            if ($('#uu1').length) {

//                alert('存在');

//            } else {

//                alert('不存在');

//            }

        });

    </script>

</head>

<body>

    <ul id="uu">

        <li>热火</li>

        <li>骑士</li>

        <li>马刺</li>

        <li>雷霆</li>

        <li>公牛</li>

        <li>小牛</li>

        <li>火箭</li>

    </ul>

</body>

</html>

prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素，使用选择器进行筛选是可选的。

10、元素添加与移除类样式

<!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>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

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

                //为某个元素添加类选择器的样式

                $('#p1').addClass('cls');

            });

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

            //移除的是所有的类样式

                $('#p1').removeClass();

            });

        });

    </script>

    <style type="text/css">

    .cls

    {

        background-color:Yellow;

        }

        .cls1

        {

            color:Blue;

            }

    p

    {

        font-size:100px;

        }

    </style>

</head>

<body>

    <input type="button" name="name" value="添加样式" id="btn" />

    <input type="button" name="name" value="移除样式" id="btnrem" />

    <p id="p1" class="cls1">这是p

    </p>

</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>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

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

                //$('body').addClass('cls');

                //$('body').toggleClass('cls');

//                if ($('body').hasClass('cls')) {

//                    $('body').removeClass('cls');

//                } else {

//                    $('body').addClass('cls');

//                }

            });

        });

    </script>

    <style type="text/css">

    .cls

    {

        background-color:Black;

        }

    </style>

</head>

<body>

    <input type="button" name="name" value="关灯/开灯" id="btnoff" />

    <p>这是p

    </p>

</body>

</html>

11、过滤器

<!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>

    <title></title>

    <style type="text/css">

    div

    {

        width:200px;

        height:100px;

        background-color:Orange;

        margin-bottom:10px;

        }

    </style>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

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

                //                $('ul').first().css('backgroundColor','red');

                // $('ul :first').css('backgroundColor', 'red');

                // $('ul li:first').css('color','red');

                //偶数 但是显示效果的时候奇数

                //$('ul li:even').css('color','red');

                //奇数 显示效果是偶数

                $('ul li:odd').css('color','red');

            });

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="显示效果" id="btn" />

    <ul>

        <li>乔峰</li>

        <li>西门吹雪</li>

        <li>梅超风</li>

           <li>杨过</li>

        <li>乔布斯</li>

        <li>老马</li>

    </ul>

</body>

</html>

12、按元素序号获取元素

<!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>

    <title></title>

    <style type="text/css">

        div

        {

            width: 300px;

            height: 30px;

            background-color: Green;

            margin-bottom: 20px;

        }

    </style>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

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

                //索引获取元素

                //$('div:eq(3)').css('backgroundColor','red');

                //索引小于3的元素

                //$('div:lt(3)').css('backgroundColor', 'red');

                //索引大于3的元素

                // $('div:gt(3)').css('backgroundColor', 'red');

                // $('div:gt(3):lt(2)').css('backgroundColor', 'red');

                //$(':header').css('backgroundColor', 'red');

            });

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="显示效果" id="btn" />

    <h1>

        第一个</h1>

    <h2>

        第一个</h2>

    <h3>

        第一个</h3>

    <h4>

        第一个</h4>

    <h5>

        第一个</h5>

    <h6>

        第一个</h6>

    <div>

    </div>

    <div>

    </div>

    <div>

    </div>

    <div>

    </div>

    <div>

    </div>

    <div>

    </div>

    <div>

    </div>

    <div>

    </div>

    <div>

    </div>

</body>

</html>

table行点谁谁变黄,siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。

<!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>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#tb tr').click(function () {

                $(this).css('backgroundColor', 'yellow').siblings('tr').css('backgroundColor', '');

            });

        });

    </script>

</head>

<body>

    <table border="1" id="tb" style=" cursor:pointer;">

        <tr>

            <td>

                芙蓉姐姐

            </td>

            <td>

                凤姐姐

            </td>

        </tr>

        <tr>

            <td>

                芙蓉姐姐

            </td>

            <td>

                凤姐姐

            </td>

        </tr>

        <tr>

            <td>

                芙蓉姐姐

            </td>

            <td>

                凤姐姐

            </td>

        </tr>

        <tr>

            <td>

                芙蓉姐姐

            </td>

            <td>

                凤姐姐

            </td>

        </tr>

        <tr>

            <td>

                芙蓉姐姐

            </td>

            <td>

                凤姐姐

            </td>

        </tr>

    </table>

</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>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#tb td').mouseover(function () {

                $(this).text('★').prevAll('td').text('★');

            }).mouseout(function () {

                $('#tb td').text('☆');

            });

        });

    </script>

</head>

<body>

    <table border="1" id="tb" style=" cursor:pointer;">

        <tr>

            <td>

                ☆

            </td>

            <td>

                ☆

            </td>

            <td>

                ☆

            </td>

            <td>

                ☆

            </td>

            <td>

                ☆

            </td>

        </tr>

    </table>

</body>

</html>

相对元素,$('div p').css('color','red');用相对元素实现('p', $('div')).css('color','red');

<!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>

    <title></title>

    <script src="../Scripts/jquery-1.10.2.js"></script>

    <script type="text/javascript">

        $(function () {

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

                //$('div p').css('color','red');

                $('p', $('div')).css('color','red');

            });

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="显示效果" id="btn" />

    <div style=" width:300px; height:200px; background-color:Green;">

        <p>

            这是p</p>

    </div>

</body>

</html>

相关文章