1、jQuery是一个快速的、简洁的JS库。理念:写得少,做得多
2.(1)原生写法
$(document).read(function(){
jQuery 代码;
})
'$':是jQuery的全局对象,代表的是jQuery
$(document).ready(function(){ //原生写法
$('#dd').css({'width':'200px','height':'200px','backgroundColor':'red'})
})
(2)简写:
$(function(){
jQuery代码;
})
$(function(){ //简写
$('#ddd').css({'width':'200px','height':'200px','backgroundColor':'green'})
})
3、jQuery选择器
(1)id选择器:$('#id属性名')
$(function(){
$('#one').css('backgroundColor','yellow')
})
(2)全选选择器:$('*')表示 选择所有的元素
$(function(){
$('*').css('backgroundColor','#ccc')
})
(3)类选择器:$('.class属性名')
$(function(){
$('.one').css('backgroundColor','yellow')
})
(4)标签名选择器:$('标签名')
$(function(){
$('p').eq(0).css('backgroundColor','blue')
})
4、过滤选择器
(1):first :选取第一个元素
$(function(){
$(p:first).css('color','red')
})
(2):last :选取最后一个元素
$(function(){
$(p:last).css('color','yellow')
})
(3):not(选择器):选择不是给的选择器的元素
$(function(){
$('p:not('#p1')').css('color','red')
})
(4)通过索引选择
$('p:even').css('backgroundColor','#bbffaa') //索引为偶数的元素
$('p:odd').css('color','blue') //索引为奇数的元素
$('p:eq(3)').css('color','yellow') //索引等于3的元素
5、属性过滤选择器
(1)[attribute] :选择拥有此属性的元素
//选择拥有name属性的input元素
$('input[name]').css('color','red')
(2)[attribute = value] :指定属性值为value的元素
//选择name属性值为userName的input元素
$('input[name = userName]').css('color','red')
(3)[attribute^=value]:选择指定属性值为value开头的元素
//选择id属性值是以addr开头的input
$('input[id ^= addr]').css('coloc','pink')
(4)[attribute$=value]:选择指定属性值为value结束的元素
//选择id属性值是以AA结束的input
$('input[id $= AA]').css('color','blue')
6、子元素的过滤选择器
(1):nth-child(index/even/odd):选择每个父元素下的(index/even/odd)子元素
//选择div的所有索引为偶数的子元素
$('div :nth-child(even)').css('color','pink')
//选择div的所有索引为2的倍数的子元素
$('div :nth-child(2n)').css('color','blue')
(2):first-child:选择父元素下的第一个子元素
//选择id为two的父元素的第一个子元素
$('#two :first-child').css('color','green')