初识jQuery之jQuery基础扩展(三)

一、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(){

});  //  ===$();

猜你喜欢

转载自blog.csdn.net/welkin_qing/article/details/81217185