jQuery笔记
一个优秀得js库，大型开发必备（js的升级版）
好处：
简化js的复杂操作
不再需要关心兼容性
提供大量实用方法
选择元素
1、模拟css选择元素
$('#div1')
$('#div1').CSS('background','red');
$('div')
$('.box')
2、独有表达试的选择方式
$('li:last').CSS('background','red');
$('li:first').CSS('background','red');
$('li:eq(2)').CSS('background','red');
$('li:even').CSS('background','red');
$('li:odd').CSS('background','red');
3、多种筛选方法
$('li').filter('.box').CSS('background','red');
$('li').filter('[title=hello]').CSS('background','red');
方法函数化：
模拟window.onload=function(){} $(function(){})
$() function $(){}
innerHTML=123 html(123);
function html(){}
onclick=function(){} click(function(){}) function click(){}
例子：
$(function(){
var oDiv=$('#div1');
oDiv.click(function(){
alert($(this).html());
})
})
或
$(function(){
$('#div1').click(function(){
alert($(this).html());
})
})
$('ul').children().CSS('background','red');
原生关系：
js与jq可以共存，不能混用。
alert($(this).html());//jq写法
alert(this.innerHTML)//js写法
链式操作：
$(function(){
var oDiv=$('#div1');
oDiv.html('hello');
oDiv.css('background','red');
oDiv.click(function(){
alert(123);
})
或
$(function(){
$('#div1').html('hello').css('background','red').click(function(){
alert(123);
})
取值和赋值：
$(function(){
//oDiv.innerHTML='hello';//赋值
//alert(oDiv.innerHTML);//取值
$('#div1').html('hello');//赋值
alert($('#div1').html());//取值
css('width','100px');//赋值
css('width');//取值
})
<script>
$(function(){
alert($('li').html());//当一组元素的时候，取值是一组中的第一个
})
</script>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
<script>
$(function(){
$('li').html('hello');//当一组元素的时候，赋值是一组中的所有元素})
</script>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
$()下的常用方法
attr:对属性进行操作
<script>
$(function(){
alert($('div').attr('title'));//弹出123
$('div').attr('title','456');
$('div').attr('class','box');
</script>
<body>
<div title="123">div</div>
</body>
filter:过滤
not:filter的反义词
$(function(){
$('div').filter('.box').css('background','red');//过滤掉class不是box的div
})
has():
$(function(){
$('div').has('span').css('background','red');//选中div里面有包含span})
has跟filter的区别:
$(function(){
$('div').has(.box).css('background','red');})
<body>
<div><span class="box"></span></div>
<div class="box"></div>
</body>
prev：上一个兄弟节点
next:下一个兄弟节点
$(function(){
$('div').next().css('background','red');
})
<body>
<div>div</div>
<span>span</span>
</body>
find:
$(function(){
$('div').find('h2').css('background','red');//h2标签变红
})
<body>
<div>
<h3></h3>
<h2></h2>
<h3></h3>
</div>
$(function(){
$('div').find('h2').eq(1).css('background','red');//第2个h2标签变红
})
<body>
<div>
<h3></h3>
<h2></h2>
<h3></h3>
</div>
index():
$(function(){
alert($('#h').index());//id为h的标签在兄弟节点中的位置,弹出1
})
<body>
<div>
<h3>h3</h3>
<h2 id="h">h2</h2>
</div>
</body>
