zoukankan      html  css  js  c++  java

  • 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>
    View Code

    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
    {
        300px;
        height:200px;
        background-color:Yellow;
        }*/
        
        
        /*标签选择器
         div
        {
              300px;
        height:200px;
        background-color:Yellow;
            }*/
        
       /*类选择器
         .cls
        {
             300px;
            height: 200px;
            background-color: Yellow;
        }*/
    </style>
</head>
<body>
    <div id="dv">
    </div>
    <div class="cls">
    </div>
</body>
</html>
    View Code

    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>
    View Code

    标签选择器、类选择器获取元素

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

    标签改变，鼠标形状改变

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

    多条件选择器

    <!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
    {
        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=" 300px; height:200px; background-color:Yellow;">


    </div>
</body>
</html>
    View Code

    层选择器

    <!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=" 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>
    View Code
    <!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=" 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>
    View Code

    页面上有一个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>
    View Code

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

    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
    {
        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>
    View Code

    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
        {
             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>
    View Code

    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>
    View Code

     星级评分

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

    相对元素,$('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=" 300px; height:200px; background-color:Green;">
        <p>
            这是p</p>
    </div>
</body>
</html>
    View Code
  • 相关阅读:
    关于订阅号和自定义菜单的关系问题
    微信公众账号支付商户接入指南
    关于微博认证和微信认证
    ACCESS TOKEN
    微信支付可能改变的六大行业
    易信公众平台的微创新：活动消息
    微信公众平台开发（62）股票行情及分析
    七牛云存储官方接口PHP版本
    ckeditor实现WORD粘贴图片自动上传,jsp应用
    CKeditor粘贴图片在IE下自动上传的研究
  • 原文地址：https://www.cnblogs.com/ecollab/p/6131012.html
Copyright © 2011-2022 走看看