[200106]-leepiny - Githubissues

CSS選取器複習和jQuery的基礎入門

CSS選取器練習部分
首先瞭解了CSS出現前和出現後對code的差別。也因為有好一陣子沒有回去複習CSS，整個都很不熟練。連遇到 id 和 class 的選取器都掌握得不太好。

1.先是練習了盤子選取器的前五題 https://flukeout.github.io/ 2.並用CSS賦予div外觀和形狀 3.接著是改變形狀的位置 4.最後是讓div隱藏
```
div{
width:100px;
height:100px;
background: red;
position:relative;
left:300px;
top:100px;
opacity:0;
```
jQuery的基礎入門
初步了解了$字號的運用。$(JavaScript的函式庫) 實作了jQuery的選擇器練習 http://jerryscally.info/SelectorLab/SelectorLab/lab.selectors.html
```
$('img')
//選取全部的img圖檔
```

$('th') //選取css所有的文字

$('li>ul') //選取列表中的

$('tbody>tr:nth-child(3n+1)') //選取列表中的第一行和第四行 //運用了:nth-child(3n)的方式做運算

------
## 實作！！

- 運用jQuery讓html動起來...<br>

```javascript
// 每點擊一次紅色方框就會往右邊移動。
var box = 0;
    console.log(box)
    $('.box').on('click',function(){
        box = box+10;
        $(this).css('left',box+'%')
        console.log(box)
    })

 // 每點一次紅色方框會置換顏色
     $(this).css('background','orange')

//補充：每按一次就再換一次顏色。
//昨天使用的事if...else的方式。但如果要有很多不同種類的樣式變換，建議用switch。

jQuery Carousel練習讓照片動起來

var Photo = 0;

window.setInterval(function(){
    Photo = Photo + 100
    $('.carousel-items img').css('right',Photo+'%')
    console.log(Photo)
    if(Photo === 600){
        Photo = 0;
    }
    },3000);

LearnWeb-Taiwan / Meetups

[200106]-leepiny #8

CSS選取器複習和jQuery的基礎入門