初识jQuery之jQuery基础扩展（三）
2018-07-26 本文已影响32人
Welkin_qing
一、get()函数
在上一篇博客里说到：jq中的语法和js不能混淆使用，而get的出现就是可以将两者语法混淆使用；
原生js:
document.getElementById('div1').innerHTML
jq:
alert( $('#div1').html() );
利用get函数后
alert( $('#div1').get(0).innerHTML );
注意：对于单个对象，get()函数括号写0；对于一组对象，括号不用写数字
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
for(var i=0;i<$('li').get().length;i++){ //表示一组li
$('li').get(i).style.background = 'red';
}
二、outerWidth()与原生的区别
区别：offsetWidth : 是获取不到隐藏元素的值；而outerWidth()可以；
<style>
#div1{ width:100px; height:100px; background:red; display:none;}
</style>
<body>
<div id="div1">div</div>
<script>
$(function(){
alert( $('#div1').get(0).offsetWidth );//显示不出来
alert( $('#div1').outerWidth() ); //100px
});
</script>
</body>
三、text()和html()
text()： 会获取所有的内容(特例)
<body>
<div>div1<span>span</span></div>
<div>div2</div>
<div>div3</div>
<script>
$(function(){
alert( $('div').html() ); //div1<span>span</span>
//只获得了第一个div里面的内容
alert( $('div').text() ); //div1spandiv2div3
//获得了所有div里面的内容，并且将div里的内容解析了
});
</script>
</body>
利用text添加标签
$('div').text('<h3>h3</h3>');
结果为：每个div里都有一个h3
添加标签
四、remove()和detach()
remove()：删除的返回值为删除的节点，删除节点后，可以再回到body中，但原有事件不在；
detach() ：跟remove方法一样，只不过会保留删除这个元素的操作行为，即remove删除节点后，有关这节点的事件也会删除，即使再添加上，但事件不再执行；而detach删除后再添加上，事件仍然可以执行。
$(function(){
$('div').click(function(){
alert(123);
});
var oDiv = $('div').detach();
$('body').append( oDiv );
//点击div仍然会弹出123
});
五、$()
$() ===
$(function(){ //等DOM加载完就可以执行了 , 性能要好
});
注意：加载速度比window.onload快
DOMContentLoaded ：Dom事件，等Dom加载完
$(document).ready(function(){
}); // ===$();
