Not()并不是删除,而是指不匹配not()区间的内容,可以用表达示也可以用dom对象,但是手册中的例子是DOM对象,用的比较少,不推荐使用。
Slice 从第几个到第几个匹配 >=开始值 < 结束值
Append直接向里面的后面插入什么内容
appendTo 找到谁之后在后面插入什么内容
Wrap() 是跟每一个元素加上标签包裹起来,而wrapAll()是将一批同样的内容,用一个标签包裹起来
Clone和clone(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>