PHP高级 js.jquery 第50天

    Jquery2

    

    Not()并不是删除,而是指不匹配not()区间的内容,可以用表达示也可以用dom对象,但是手册中的例子是DOM对象,用的比较少,不推荐使用。

    

    Slice 从第几个到第几个匹配  >=开始值 结束值

    

    

    Append直接向里面的后面插入什么内容

    

    appendTo 找到谁之后在后面插入什么内容

    

    Wrap() 是跟每一个元素加上标签包裹起来,而wrapAll()是将一批同样的内容,用一个标签包裹起来

    

    

    Cloneclone(true)的主要区别是是否克隆事件,clone()不克隆事件

    

    

    

    1.html

    

    <html>
    <head>
        <script src="jquery-1.4.2.js"></script>

        <script>
            $(function(){

                //$('input').val('不加冒号也可以这就是元素选择器');

                //$('div').eq(5).css('background','red');

                //$('div').eq(4).html('小');
                /*

                if($('div').eq(2).hasClass('xiaoye')){

                    alert('gf');
                }else{

                    alert('ji');
                }

                //$('div').filter(':contains("qian")').css('background','red');

                if($('input:eq(0)').is(':checked')){

                    alert('xlxz');
                }

                //$('li').has('ul').css('background','red');

                $('p').not('#s').css('background','red');

                    */

                //$('div:eq(0)').contents().css('background','red');

                //  $('div').slice(1,3).css('background','red');

            //  $('#heli').find('.xyc').css('background','red');

            //$('ul').nextUntil('div').css('background','red');

            //$('#wo3g').offsetParent().css('background','red')

            $('span').parentsUntil('.st').css('background','red');

        })

        </script>
    </head>

    <body>

<div class="st">
    <div >

        <p>asdfasdfsafasfdafdsafasfasfsaf</p>
        <div>

            <span>aaaaaa</span>

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

        <div><p>Hello</p><p>Hello</p></div><div class="se"><p>前尘往事成云烟,消散在毕此面前,就连错过了再见,也看不见你有些哀怨,给你的一切,不过是</p></div>

        <div style="position:absolute;" id="heli">
            <div class="xyc">后面?<div id="wo3g">ttt</div></div>
            <div>

                <div class="xyc">知识啊它有一个时期叫沉淀,这玩意好像不懂</div>

                <div>

                    <div class="xyc">你也没看书,回头再一翻的时候,懂了。</div>
                </div>
            </div>
        </div>

<ul>
    <li>list item 1</li>
    <li>list item 2
      <ul>
        <li>list item 2-a</li>
        <li>list item 2-b</li>
      </ul>
    </li>
    <li>list item 3</li>
    <li>list item 4</li>
</ul>

        <input type="checkbox" checked>

    <input type="text" value="好美呀">
        <div>决定</div>
        <div>我</div>
        <div class="xiaoye">这重</div>
        <div>爱</div>
        <div>?</div>

        <input type="text" value="aaa">

        <div><b>早</b></div>

    </body>

</html>

    2.html

    

    <html>
    <head>
        <script src="jquery-1.4.2.js"></script>

        <script>
            $(function(){

                //$('.p').prevUntil('span').css('background','red');

                //$('.p').siblings().html('22222222222222222');

                //$('div').append('<b>ttttt</b>');

                //$('b').appendTo('div');

                //$('div').prepend('大感情呢?');

                //$('b').prependTo('div');

                //$('div').before('<b>我</b>');

                //$('b').insertBefore('div');

            //  $('i').wrap('<div style="color:red"></div>');

            //  $('i').unwrap();

            //$('span').unwrap('div');

            //$('i').wrapAll('<b></b>');

            //$('i').wrapInner('<b></b>');

            //$('i').replaceWith('野,。');

            //$('p').empty();

            $('div').remove();
        })

        </script>
    </head>

    <body>

        <div style="color:red"><span>幸福</span>    </div>

        <i>人</i><br>

        <i>最</i><br>
        <i>每次失想。</i><br>

        <i>连</i><br>

        <i>如了。</i><br>

        <div>55555555555555555555555</div>
        <div>44444444444444444444444</div>

        <div>33333333333333333333333</div>
        <div>222222222222222222222</div>
        <div class="p">11111111111111111111111111111</div>

    </body>

</html>

    

    3.html

    

    <html>
    <head>
        <script src="jquery-1.4.2.js"></script>

        <style>
            .one{color:red;font-size:15px;width:500px;height:500px;background:red}

            .three{width:100px;height:100px;position:relative;top:20px;left:30px;background:green}
        </style>

        <script>
            /*
            $(function(){

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

                    $(this).clone(true).appendTo('.two');
                })

            })

            $(function(){

                //  alert($('.one').css('font-size'));

                //$('.one').css('font-size','50px');

            //  $('.one').css({color:'green',fontSize:'20px',fontStyle:'italic'});

            //  var $t=$('.one').offset();

            //  alert($t.top);

            //var $t=$('.three').position();

            //alert($t.left);

            //$('body').scrollTop(200);

            //alert($('.one').width());

            与bind效果一样,但是区别在于,用JS或者JQUERY生成的元素的事件执行,用live来执行,用bind实现不了效果
            $('.one').live('click',function(){

                    alert('aaaaaaaaa');
                })

            var d=document.createElement('div');

            d.style.width="1000px";
            d.style.height='1000px';
            d.style.background='green';
            d.className='test'; 

            var  t=$('.one').get(0);

            d.appendChild(t);

            document.body.appendChild(d);

            $('.one').wrap('<div class="test" style="width:1000px;height:1000px;background:green"></div>');

            $('.test').bind('click',function(){

                alert('aaaaaaaaaa');
            });

        });
        */

        $(function(){
            /*
            $('.one').mouseover(function(){

                alert('aaaaaaaaaaaaaaaaaa');
                }).mouseout(function(){

                alert('bbbbbbbbbbbbbbb');
            });

            $('.one').hover(function(){

                    alert('aaaaaaaaaaaa');
                },function(){
                    alert('bbbbbbbbbbbbbb');

                })

                $('.one').toggle(function(){
                        alert(1111);

                    },function(){
                    alert(2222);

                    },function(){
                    alert(3333);

                    },function(){

                    alert(444);
                    },function(){
                    alert(555);

                });
                */

                $('body').keydown(function(){

                        alert(111); 

                });

        })

        </script>

    </head>

    <body>

        <br>
        <br>

        <div class="one">
            <div class="three">你?</div>

        </div>

        <div class="two"></div>

    </body>

</html>

    

    ajax.html

    

    <html>
    <head>
        <script src="jquery-1.4.2.js"></script>
        <script>
            $(function(){

                //$('div').load('http://www.baidu.com');        

                    //$.get('http://127.0.0.1/37/jquery2/ajax.php',{username:'afs',password:'?'},function(data){

                    //$('div').html(data);

                    $.getJSON('http://php.xlxz.org/ajax.php',function(data){

                        alert(data.username);

                    });

/*

$.ajax({
    type:'post',
    dataType:'string',
    data:{username:'小'},
    url:'ajax.php',
    success:function(data){
        alert(data);
    }

});

*/

            })
        </script>
    </head>

    <body>

        <div></div>

    </body>

</html>

    ajax.php

    

    <?php

//  $a=array('username'=>'看看','password'=>'测试');

//  echo json_encode($a);

    echo $_POST['username'].'ttttttttttttttttttt';
?>

    

    animate.html

    

    <html>
    <head>

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

        <script>
            $(function(){

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

                    $(this).animate({top:'500px',left:'400px'},4000,function(){

                        $(this).animate({top:'-100px'},2000);

                    });
                })

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

                    $(':animated').stop();
                })  

            })

        </script>

    </head>

    <body>
        <button>停止</button>

        <div style="position:absolute;top:0;left:0;width:100px;height:100px;background:red"></div>
    </body>

</html>

    

    

    show.html

    

    <html>
    <head>

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

        <script>
            $(function(){
                /*
                $('button').click(function(){

                    //$('div').show(5000);

                    $('div').hide(5000,function(){

                        $(this).show(5000);
                    });
                })

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

                    $('div').toggle('slow',function(){

                        alert('事情已完成');
                    });
                })
                */ 

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

                    $('div').fadeTo(3000,0.4,function(){

                            alert('变化完成');
                    }); 

                })  

            })

        </script>

    </head>

    <body>
        <button>ok</button>
        <div style="width:500px;height:500px;background:red"></div>
    </body>
</html>