1.1 jquery和JavaScript可以共存,但是不能够混用!
<div id="box"></div>
<script>
$(document).ready(function () {
$('#box').get(0).onclick = function(){
this.style.background = blue;
}
})
$('.box')[0].style.background = 'yellow';
</script>
1.2 length
length虽然是原生js的一个属性,但是length也是jquery里面封装过的方法,可以直接使用!但是个人建议你,如果需要获取长度的时候还是去使用size()方法。
1.3 css属性值
parseInt($('.box').css('marginTop'));//margin-top
$('.box').width();//content
$('.box').outerWidth();//content+padding+border
$('.box').innerWidth();//content+padding
($('.box').outerWidth()-$('.box').innerWidth())/2;//border
($('.box').outerWidth()-$('.box').width())/2;//padding+border
($('.box').innerWidth()-$('.box').width())/2;//padding ($('.box').outerWidth(true)-$('.box').outerWidth())/2;//margin
1.4 text()与html()
text仅仅返回 标签内部的内容 不会返回标签,负值也是这样
<p id="para">I am para <span>I am span</span> !</p>
<script>
alert($('#para').tetx());
</script>
html可以返回标签,但是只能返回第一个!
<p>I am para <span>I am span</span> !</p>
<p>I am para aaa <span>I am span</span> !</p>
<script>
alert($('p').html());
</script>
设置值的话,可以一起设置
<p>I am para <span>I am span</span> !</p>
<p>I am para aaa <span>I am span</span> !</p>
<script>
$('p').html('<h1>das</h1>');
</script>
1.5remove() 和 detach()
我们先写一个div 并为其添加一个click事件。
$('#box').click(function(){
alert(1);
})
如果在开发的时候 需要删除它!但是在后面的操作当中可能又要遇到div的添加它
var box = $('#box').remove();
$('body').append(box)
但是我们再次点击。发现事件没有了!
为了解决这样的bug!我们就必须使用detach()了;
$('#box').click(function(){
alert(1);
})
var box = $('#box').detach();
$('body').append(box)
1.6 $() 和 window.onload = function(){}
$() //是等DOM加载完毕
window.onload = function(){}. //全部加载完毕