初识jQuery之jQuery基础扩展（三）

最新推荐文章于 2023-04-16 17:08:12 发布

Welkin_qing

最新推荐文章于 2023-04-16 17:08:12 发布

阅读量155

点赞数

分类专栏： jquery 文章标签： jquery 基础扩展

本文链接：https://blog.csdn.net/Welkin_qing/article/details/81217185

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、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>
<script>
for(var i=0;i<$('li').get().length;i++){   //表示一组li	
	$('li').get(i).style.background = 'red';
}
</script>

二、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(){
	
});  //  ===$();