JQ第一天

1、jQ中最常用对象是$对象，$是jQ的简写。只有将普通的Dom对象封装成jQ对象，才能使用其中方法，jQuery(document).ready()是允许多个的,$(fn)与$(document).ready(fn);等价

2、$.map(array,callback(element,index));

对于数组array中的每个元素，调用callback()函数,最终返回一个新的数组。原数组不变。

$.each(arr,function(k,ele))//k--建  ele--值 

3、链式编程(因为每一次css结束之后都是返回到对象那里)

例：$(dvObj).css('width','300px').css('height','200px').css('backgroundColor','yellow').text('hahah');//如果text写内容了，那么就是设置，如果没就是获取

4.选择器

优先顺序：id选择器>类选择器>标签选择器

//id选择器

例：

<style type="text/css">
#p{
300px;
height:500px;
background-color:yellow;
text-align:center;
}
</style>

<div id="p">
钟宁是SB
</div>

//标签选择器

div{//这里写标签
300px;
height:300px;
background-color:black;
text-align:center;
}

//类选择器

.cls{
200px;
height:200px;
background-color:red;
}

5.例子：

script type="text/javascript">
$(function () {//表示$(document).ready(fn)
　　$('#btn').click(
　　　　function () {
　　　　$('.cls').css('width','300px').css('height','200px').css('backgroundColor','orange').html('<font color="red" size=7>wahahahhah</font>')
　　})
}
)
</script>

6.多条件选择

$(div.cls){}//div是标签，.cls是类（div .cls）表示是div标签下的cls类

7.层次选择器

1).$('div p').css('backgroundColor','red');//层中所有的p标签都发生改变

2).$('div>p').css('backgroundColor','red');//直接的子元素，如果在直接的子元素中还有该元素，那么也会发生改变

3).$('div+p').css('backgroundColor','red');层后面的直接的p标签发生改变

4).$('div~p').css('backgroundColor','red');//层后面所有的p标签

5).$('*').css('backgroundColor','red');//所有的标签

8.十个常用方法

1).$('div').next().css('color','red');//层后面的第一个元素

2).$('div').nextAll().css('color','blue');//层后面所有的元素

3).$('div').prev().css('color','blue');//层前面的第一个

4).$('div').prevAll().css('color','blue');//层前面的所有

9.选择器

eq:equal//与eq(number)number相等的那个标签
gt:great than//比number大的
lt:less than//比number小的

note：

$('#tb .tr:first').css('fontSize', '30px');
$('#tb tr:last').css('color', 'red');
$('#tb tr:gt(0):lt(3)').css('fontSize', '28px');
$('#tb tr:odd').css('backgroundColor', 'red');

$('#tb tr:even').css('backgroundColor', 'red');

10.相对元素

例子：

<script type="text/javascript">
$(function () {
$('#tb tr').click(function () {//this会表示id为tb中的行tr
$('td',$(this).siblings()).css('backgroundColor', '');//此处表示click处的行(tr)的所有的兄弟元素里的所有的单元格(td)
$('td:odd', $(this)).css('backgroundColor', 'red');//此处表示click处的行(tr)的所有的奇数单元格(td)
$('td:even', $(this)).css('backgroundColor', 'green');//此处表示click处的行(tr)的所有的偶数单元格(td)
})
})
</script>