PHP高级 js.jquery 第49天

    Jquery

    1,了解有哪些常用的js

    2,jquery版本有什么不同

    3jquery的加载方式

    <scriptsrc="jquery-1.4.2.js"></script>

    4,了解我们的第一段jquery代码

    jQuery(document).ready(function(){

                    alert('心灵小站');

    })

    5,了解window.onloadjQuery.ready()的区别

    

    相同点:都是页面加载完成之后执行

    

    不同点:window.onload只可以执行最后一段代码。而jQuery.ready()可以执行多个不同的代码

    

    

  1.     
  2.         

                了解简写的变形过程
            

        

    

    第一变:

    $(document).ready(function(){

    alert('小站');

    })

    

    第二变:

    $(function(){

    alert('今年');

    })

    

    7,对比,jquery和传统JS在获取HTML元素的不同

    <script>

    $(function(){

    $('#one').html('xlxz.org');

    })

    </script>

    

    纯JS的方式:

    <script>

    

    vard=document.getElementById('one');

    

    d.innerHTML='php.xlxz.php.xlxz';

    </script>

    

    

    结论:jquery找到的就用jquery的方式去进行查找和操作,js找到的就用js的方式去查找和操作。

    

    

    

    8js对象和jquery对象我们可以互转,js的对象可以转换为jquery对象,jquery对象可以转为js对象

    

    写jquery的时候,经常要查找一个对象,赋值给一个变量。

    

    在js当中,我们也经常查找一个对象,赋值给一个变量。

    

    产生问题:你区分不开,这是jquery找到的对象还是js找到的对象。

    

    李式规定如下:

    jQuery找到的对象统一声明变量时用var $变量名

    

    Js找到的对象统一声明时,前面不要加$即可

    

  1.     
  2.         

                ,jquery对象如何转为纯js找到的dom对象
            

        

    Var dom对象变量=$jquery对象[0] 

  1.     
  2.         

                Var dom对象变量=Jquery对象.get(0)
            

        

    

    

    DOM对象变为jquery对象非常之简单,只需要用$(对象)一包就搞定了。

    

    

    

    

    核心:

    jQuery.noConflict()交出$的控制权  //了解

    

    第一,用了jquery就尽量不要再用其他的js框架了

    第二,jQuery()

    

    Each(callback) 方法,相当于php当中的foreach遍历每个元素,然后对每个元素进行操作。

    

    Size()  统计个数

    

    Index()  当前元素的索引值

    

    

    

    选择器当中的  >选择器,等价于筛选中的children()

    

    $('#one >span').css('background','red');

    $('#one').children('span').css('background','red');

    

    

    

    选择器当中的查找下一个子元素,他们中间两个等价:

    

    $('#one +div').css('background','red');

    

    $('#one').next('div').css('background','red');

    

    

    找所有的指定的后面的兄弟元素

    //$('#one~ div').css('background','red');

    

    $('#one').nextAll('div').css('background','red');

    

    

    文件列表:

  1.     
  2.         

                html  jqueryDOM混偏案例,不推荐使用
            

        

    Selector1.html  基本选择器

    Selectorlayer.html  层级选择器

    

    1.html

    

    <html>
    <head>
        <title>jquery</title>
        <script src="jquery/jquery-1.4.2.js"></script>
    </head>
    <body>
        <script>
            $(function(){
                alert('哈哈哈哈大笑');

            });
        </script>
    </body>
</html>

    

    attribute.html

    

    <html>
    <head>
        <title>attribute</title>
        <script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
        <script>
            $(function(){
                $haha = $('img').attr('src');

                $('div img').attr({src:'test.jpg',alt:'dj',title:'hah'});
                $('img').attr('title',function(){ return this.src});
                $('img').removeAttr('src');
                $('img').addClass('haha');
                $('p').toggleClass('hah');
                $('p').text();
                alert($('input').val());
            });
        </script>
    </head>
    <body>
        <img src="test.jpg">
        <div>
            <img />
        </div>
        <input type="text" value="haha">
        <p class="hah">hahah</p>
        <p>kdsflfdsl;as;sf;asfsl</p>

    </body>
</html>

    

    

    guolv.html

    

    <html>
    <head>
        <meta charset="utf-8">
        <title>guolv find 查找. +</title>
        <script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
        <script>
            $(function(){
                $('p').eq(2).css('background','#aa00ff');
                $('p').filter(':first').css('border','solid red 4px');
                $('p').click(function(){
                    $(this).css('background','#aa00ff');
                    $('p').not(this).css('background','#fff');

                });
            });
        </script>
    </head>
    <body>
        <div>
            <p>haha</p>
            <p>haha</p>
            <p>haha</p>
            <p>haha</p>
            <p>haha</p>
            <p>haha</p>
            <p>haha</p>
        </div>
    </body>
</html>

    

    j3.html

    

    <html>
    <head>
        <title>你好吗</title>
        <script src="jquery/jquery-1.4.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                /*  $('button').click(function(){
                        $('div').each(function(index,ele){
                                $(ele).html(index).css('background','red').css('margin','10px');
                            });
                        });
                        */
                    alert($('div').get(3));
            });
/* window.onload=function(){
        document.write('<div>wqkdsfj;asf</div>');
//      };
        jQuery(document).ready(function(){
            //  document.write('hajds');
                }); */
        </script>
        <body>
<button>Change colors</button>
<span></span>
<div></div>
<div></div>

<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>

<div></div>
<div></div>

        </body>

    </head>
</html>

    

    

    jiandan.html

    

    

    

    <html>
    <head>
        <title>简单选择器</title>
        <script src="jquery/jquery-1.4.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                $('div:first').css('background','red');
                $('div:last').css('background','#11ffaa');
                $('div:odd').html('odd');
                $('div:even').html('even');
                $('div:not(div:first)').css('background','#aaff00');
                $('div:eq(2)').html('eq0');
                $('p:gt(2)').css('background','red');
                $('p:lt(2)').css('background','green');

                $(':header').css('background','#aaff33');
                $('.xa:contains(xx)').html('333');
                $('div:has(p)').html('xxxxxxxxxx');
                $('td:parent').css('border','solid red 2px');
                $('tr:visible').css('border','solid red 3px');
                $('tr:hidden').css('display','block').html('xxxyyyxxx').css('border','solid red 5px');
                $('p[class]').html('class,class');
            });
        </script>
    </head>
    <body>
        <table>
             <tr style="display:none"><td>Value 1</td></tr>
             <tr><td>Value 2</td></tr>
        </table> 

        <table>
             <tr><td>Value 1</td><td></td></tr>
             <tr><td>Value 2</td><td></td></tr>
        </table>

        <h1>kdkddlsls</h1>
        <h2>dsklf</h2>
        <p class="xa">xxxx</p>
        <p class="xa">ahakds</p>
        <p class="xa">kldsf32sdl</p>
        <div>
            <p>ksjdfl</p>
        </div>
        <div>no.1</div>
        <div>no.2</div>
        <div>no.3</div>
        <div>no.4</div>
        <div>no.4</div>
        <div>no.4</div>
        <div>no.4</div>
        <p>hahahaha</p>
        <p>hahahaha</p>
        <p>hahahaha</p>
        <p>hahahaha</p>
        <p>hahahaha</p>
        <p>hahahaha</p>
        <p>hahahaha</p>
        <p>hahahaha</p>
        <p>hahahaha</p>
        <p>hahahaha</p>
        <p>hahahaha</p>

    </body>
</html>

    

    jquery1.html

    

    <html>
    <head>
        <title>jquery.no.1.day</title>
        <script src="jquery/jquery-1.4.2.js"></script>
        <script>
        /*  jQuery(document).ready(function(){
                alert('jQuery你好呀');
            });
            window.onload=function(){
                alert('你好呀');
            }
            jQuery(document).ready(function(){
                document.write('wqkdsjf;');
            });
            $(function(){
                $('#one').html('你好吗');
            });*/
            function haha()
            {
                var $kk = document.getElementById('one');
                $kk.innerHTML='haha';
            }
            $(function(){
                $('#one').html('是我吗').css('background','red').click(function(){
                    $(this).html('yeye');
                });
            });
        </script>
    </head>
    <body>
        <div id="one"><a href="javascript:haha()">ha</a></div>
    </body>

</html>

    

    jquery2.html

    

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>你好呀</title>
        <script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
        <script>
            jQuery.noConflict();
            jQuery(function(){
                jQuery('#aax').css('background','red').html('wqvbb ');
            });
            document.write('<div id="aax"></div>');
        </script>
    </head>
    <body>
        pphphp

    </body>
</html>

    

    ziyuansu.html

    

    

    <html>
    <head>
        <title>子无素</title>
        <script src="jquery/jquery-1.4.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                $("ul li:nth-child(2)").html('xx');
                $('ul li:first-child').css('border','solid red 5px');
                $('ul li:last-child').css('border','solid #aaccff 8px');
                $('div p:only-child').css('border','solid #abccba 4px');
            });
        </script>
    </head>
    <body>
        <div>
            <p>haha</p>
            <p>ixx</p>
        </div>
        <div>
            <p>yaay</p>
        </div>
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul> 

    </body>
</html>