get():把jQuery转化成原生js
<script>
$(function(){
//alert($('#div1').get(0).innerHTML);
//jQuery里面也有属性length
/*for(var i=0;i<$('li').get().length;i++)
{
$('li').get(i).style.background='red';
}*/
/*for(var i=0;i<$('li').length;i++)
{
$('li').get(i).style.background='red';
}*/
for(var i=0;i<$('li').length;i++)
{
$('li')[i].style.background='red';//加下标也可以将jQuery转换成原生js
}
})
</script>
</head>
<body>
<div id="div1">div</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
outerWidth与原生offsetWidth的区别：
<style>
#div1{100px;height:100px;background:red;display:none;}
</style>
<script>
//offsetWidth:获取不到隐藏元素的值
//outerwidth
$(function(){
//alert($('#div1').outerWidth());
alert($('#div1').get(0).offsetWidth);
});
</script>
</head>
<body>
<div id="div1">div</div>
</body>
text()与html的区别
<style>
#div1{100px;height:100px;background:red;display:none;}
</style>
<script>
$(function(){
alert($('div').html());//只能获取到第一个div，标签内容文字全部获取
//alert($('div').text());//会获取所有的内容，且只能获取文本
//$('div').html('<h3>h3</h3>');//div内容为h3
$('div').text('<h3>h3</h3>');//把标签转成文字，div内容为<h3>h3</h3>
});
</script>
</head>
<body>
<div id="div1">div<span>span</span></div>
<div>div2</div>
<div>div3</div>
</body>
页面加载三种写法
<script>
$(function(){//等DOM加载完就可以执行了，比window.onload性能要好，是第二种的简写
});
$(document).ready(function(){
});
window.onload=function()//等页面加载完
{
};
</script>
parents
<script>
$(function(){
$('#div2').parents().css('background','red');
//获取当前元素的所有祖先节点，参数就是筛选功能
//$('#div2').parents('body').css('background','red');//参数就是筛选功能
//$('#div2').closest('body').css('background','red');//获取最近的指定的祖先节点（包括当前元素自身），必须要写筛选的参数，只能找到一个元素
//$('#div2').closest('.box').css('background','red');
});
</script>
</head>
<body>
<div id="div1" class="box">div
<div id="div2" class="box">bbb</div>
</div>
</body>
siblings()、nextAll()、prevAll()、nextUntil()
<script>
/*$(function(){
$('span').siblings().css('background','red');//除了本身之外，让所有兄弟节点变红，参数也是筛选功能
})*/
/*$(function(){
$('span').siblings('p').css('background','red');//除了本身之外，让所有兄弟节点变红，参数也是筛选功能
})*/
/*$(function(){
$('span').nextAll().css('background','red');//让span之后的所有兄弟节点变红，参数也是筛选功能
})*/
/*$(function(){
$('span').prevAll().css('background','red');//让span之前的所有兄弟节点变红，参数也是筛选功能
})*/
/*$(function(){
$('span').nextUntil().css('background','red');//没有加参数跟nextAll相同
})*/
$(function(){
$('span').nextUntil('h1').css('background','red');//span下面的到h1的兄弟节点变红
})
//parentsUntil()、prevUntil()也类似
</script>
</head>
<body>
<div>div</div>
<span>span</span>
<p>p</p>
<h1>h1</h1>
<h2>h2</h2>
</body>
clone
<script>
$(function(){
//$('div').appendTo($('span'));
//$('span').get(0).appendChild($('div').get(0));
$('div').click(function(){
alert(111);
})
$('div').clone(true).appendTo($('span'));//克隆节点，可以接收一个参数，作用可以复制之前的操作行为
})
</script>
</head>
<body>
<div>div</div>
<span>span</span>
</body>