UI 彙整 - VECTOR COOL 威得數位行銷

用 index 在重複元素中獲取一個元素

在 jQuery 是使用 :eq(2) ，雖然jQuery跟CSS選取器(selector)有很多相似之處，但還是有些差異，在CSS中要在重複元素中獲取一個元素是用偽類 :nth-child(2)

比如說我要指定定 Apple 的樣式為紅色：

<div>
    <div id="bar1" class="foo">banana</div>
    <div id="bar2" class="foo">Apple</div>
    <div id="bar3" class="foo">Orange</div>
</div>

<div>

<div id="bar1" class="foo">banana</div>

<div id="bar2" class="foo">Apple</div>

<div id="bar3" class="foo">Orange</div>

</div>

我們可以這麼做，都可以達到相同效果：

#bar2{
	color:red;
}
div.foo:nth-child(2){
	color:red;
}
.foo:nth-child(2){
	color:red;
}

#bar2{

color:red;

}

div.foo:nth-child(2){

color:red;

}

.foo:nth-child(2){

color:red;

}

同場加映

除了 :nth-child()還有其他用在取得元素的偽類，都很常用到優

:first-child
:second-child
:third-child
:last-child
:nth-child

參考資料：

jQuery Serialize Object

取得所有表單資料，目前試過唯一能轉多維表單物件的，使用簡單，找到感覺得救了

Form data to Object jQuery

Github：https://github.com/macek/jquery-serialize-object

Example：

<span style="box-sizing: border-box; color: #c82829; cursor: text; font-size: inherit;">&lt;<span style="box-sizing: border-box; color: #8e908c; cursor: text; font-size: inherit;">form</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">id</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"contact"</span>&gt;</span><br />  <span style="box-sizing: border-box; color: #c82829; cursor: text; font-size: inherit;">&lt;<span style="box-sizing: border-box; color: #8e908c; cursor: text; font-size: inherit;">input</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">name</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"user[email]"</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">value</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"jsmith@example.com"</span>&gt;</span><br />  <span style="box-sizing: border-box; color: #c82829; cursor: text; font-size: inherit;">&lt;<span style="box-sizing: border-box; color: #8e908c; cursor: text; font-size: inherit;">input</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">name</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"user[pets][]"</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">type</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"checkbox"</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">value</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"cat"</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">checked</span>&gt;</span><br />  <span style="box-sizing: border-box; color: #c82829; cursor: text; font-size: inherit;">&lt;<span style="box-sizing: border-box; color: #8e908c; cursor: text; font-size: inherit;">input</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">name</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"user[pets][]"</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">type</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"checkbox"</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">value</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"dog"</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">checked</span>&gt;</span><br />  <span style="box-sizing: border-box; color: #c82829; cursor: text; font-size: inherit;">&lt;<span style="box-sizing: border-box; color: #8e908c; cursor: text; font-size: inherit;">input</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">name</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"user[pets][]"</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">type</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"checkbox"</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">value</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"bird"</span>&gt;</span><br />  <span style="box-sizing: border-box; color: #c82829; cursor: text; font-size: inherit;">&lt;<span style="box-sizing: border-box; color: #8e908c; cursor: text; font-size: inherit;">input</span> <span style="box-sizing: border-box; cursor: text; font-size: inherit; user-select: text;">type</span>=<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">"submit"</span>&gt;</span><br /><span style="box-sizing: border-box; color: #c82829; cursor: text; font-size: inherit;">&lt;/<span style="box-sizing: border-box; color: #8e908c; cursor: text; font-size: inherit;">form</span>&gt;</span><br />

$(<span style="box-sizing: border-box; color: #718c00; cursor: text; font-size: inherit;">'form#contact'</span>).serializeObject();<br /><span style="box-sizing: border-box; color: #8e908c; cursor: text; font-size: inherit;">//=&gt; {user: {email: "jsmith@example.com", pets: ["cat", "dog"]}}</span><br />

$('form#contact').serializeObject(); //=> {user: {email: "jsmith@example.com", pets: ["cat", "dog"]}}

$('form#contact').serializeJSON();<br />//=&gt; '{"user":{"email":"jsmith@example.com","pets":["cat","dog"]}}<br />'

1	$('form#contact').serializeJSON();<br />//=> '{"user":{"email":"jsmith@example.com","pets":["cat","dog"]}}<br />'

CSS get an element use :nth-child() not :eq()

用 index 在重複元素中獲取一個元素

比如說我要指定定 Apple 的樣式為紅色：

我們可以這麼做，都可以達到相同效果：

同場加映

參考資料：

CSS RWD 速查

Meta Viewport

CSS @media 參考裝置尺寸：

jQuery Form data to Object

jQuery Serialize Object

Example：

Drop and drag

網頁前端 framework 整理