jQuery學習筆記_02day

1.text()擷取和設定文本

a.擷取文本text()方法不給參數

b.會擷取到這個标簽中所有的文本，包括後代元素的文本

c.包含了多個dom元素的jQuery對象，通過text()方法擷取文本，會把所有dom元素的文本擷取到

d.設定标簽文本會覆寫它原來的内容，如果設定的文本中包含标簽,是不會把這個标簽給解析出來的

e.包含了多個dom元素的jQuery對象，通過text()方法設定文本，會把所有的dom元素都設定上

2.css()設定和擷取樣式

css()方法設定參數為要擷取值的樣式名

$('#div1').css('width');
$('#div1').css('height');
$('#div1').css('background-color');
$('#div1').css('backgroundColor');
$('#div1').css('border');
$('#div1').css('border-top-width');
           

擷取包含了多個dom元素的jQuery對象的樣式，隻能擷取到第一個dom對象的樣式

注意：擷取樣式操作隻會傳回第一個元素對應的樣式值

設定樣式:css(樣式名：樣式值)

//設定單樣式
$('#div1').css('width','300px');
$('#div1').css('height',300);
$('#div1').css('backgroundColor','red');
$('#div1').css('border','10px solid green');
           

//設定多樣式
$('#div1').css({
width:300,      //可以不加引号，像素不加引号不能帶px
'height':'300px',
'background-color':'green',
'border-top-width':'10px'
 });
           

//給标簽為div的元素們設定樣式
$('div').css({
width:300,
'height':'300px',
'background-color':'green',
'border':'10px solid red',
marginTop:10
});
           

基本選擇器 和css裡面的選擇器是一樣的

id選擇器 $(’#id’);

類選擇器 $(’.類名’);

标簽選擇器 $(‘标簽名’);

并集選擇器 $(’.box,.box2’);

交集選擇器 $(‘li.current’);

層級選擇器 和css裡面的選擇器是一樣的

子代選擇器 $(‘ul>li’)

擷取兒子層級的元素，并不會擷取孫子層級的元素

擷取不同的兒子層級元素

$(’#father>div , #father>p’)

後代選擇器 $(‘ul li’)

擷取ul下的所有li元素包括孫子

過濾選擇器

:eq(index)

// $(‘li:eq(2)’).css(‘color’,‘red’) 擷取到的li元素中，選擇索引号為2的元素，索引号index從0開始

:odd

//$(‘li:odd’).css(‘color’,‘red’) 擷取li元素中，選擇索引号為奇數的元素

:even

//$(‘li:even’).css(‘color’,‘red’) 擷取li元素中，選擇索引号為偶數的元素

<script>
        $(function(){
            //設定奇數行li标簽顔色為天藍色
            $('li:odd').css('backgroundColor','skyblue');
            //設定偶數行li标簽背景色為粉色
            $('li:even').css('backgroundColor','pink');
            //首尾兩行li顯示紅色
            $('li:eq(0)').css('backgroundColor','red');
            $('li:eq(9)').css('backgroundColor','red');
        })
</script>
           

篩選選擇器

prevAll() 之前所有兄弟

nextAll() 之後所有兄弟

第二課…