初识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(){
    
});  //  ===$();
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • jQuery基础 什么是JQ?一个优秀的JS库,大型开发必备JQ的好处?一简化JS的复杂操作二不再需要关心兼容性三...
    幺七阅读 954评论 0 2
  • 一:认识jquery jquery是javascript的类库,具有轻量级,完善的文档,丰富的插件支持,完善的Aj...
    xuguibin阅读 1,723评论 1 7
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,441评论 0 44
  • jq是函数式编程,所以获取元素就有如下形式: 可以看出,jq作为js库相比后者在写法上大幅度简化了,所以jq比起j...
    松鼠症患者阅读 515评论 0 3
  • 一:“多元智能理论”之父——霍华德·加德纳 霍华德·加德纳是世界著名教育心理学家,最为人知的成就是“多元智能理论”...
    正心艳阅读 883评论 0 0