jquery(1)

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(){}. //全部加载完毕

jquery(1)

推荐阅读更多精彩内容