PHP高级 js.jquery 第50天

2013-01-02 21:59:55 0  category: 第三阶段php


    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>


    



    

推荐文章