Ⅰ 前端開發——什麼是數組
定義數組的兩種方式
vara=new Array()var a=[ ]
數組的長度
vara=["a","b","e"];console.log(a.length)
length是數組的長度 輸出結果為 3
添加元素
vara=["a","b","c","d"];a.push("e")
push方法是向數組中最後一個位置添加元素
a.unshift("f");
unshift方法是向數組中第一個位置添加元素
a.splice(a,0,"g")
splice方法可以在數組指定位置添加元素並且可以刪除元素，數字2代表位置，數字0代表刪除元素的個數，這里表示在元素b後面加一個元素g
刪除元素
vara=["a","b","c","d"]; a.pop();
pop()方法刪除數組中的元素,刪除的是最後一個；
a.shift()
shift方法刪除數組中的元素,刪除的是第一個；也可以用splice刪除，並且可以刪除多個元素
數組轉換
vara=["a","b","c"];vara1=a.join("#");
join是把數組里的元素變成字元串，用「#」隔開
var a="w,e,g";vara1=a.split(",");
split是把字元串變成數組，數組用「,」隔開
以上就是關於數組的分享，更多前端內容請 點擊關注
Ⅱ 前端基礎（問答21）
keywords: jQuery、常用方法、Ajax。
$(document).ready() 和 window.onload 的作用類似，都是在頁面載入完成後調用綁定的函數，但也有一些區別。
$node.html()： 獲取集合中第一個匹配元素的 html 內容，或設置每一個元素的html內容。
$node.text()： 獲取匹配元素集合中每個元素的合並文本，包括它們的後代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容。
ps：.text()方法不能使用在 input 元素或scripts元素上。input或textarea需要使用 .val() 方法獲取或設置文本值。得到scripts元素的值，使用.html()方法
作用：將兩個或更多對象的內容合並到第一個對象。
用法：
jQuery 的鏈式調用是指執行完一個方法之後就返回當前對象，被返回的對象繼續執行後面的方法。
通過對$.ajax()中傳入的cache控制，具體規則如下：
.data()：在匹配元素上存儲任意相關數據 或 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。
用法：
DEMO：
1、給元素 $node 添加 class active，給元素 $noed 刪除 class active
添加class：$node.addClass('.active')
移除class：$node.removeClass('active')
切換class：$node.toggleClass('active')
2、展示元素$node, 隱藏元素$node
顯示：$node.show()
隱藏：$node.hide()
切換顯示/隱藏：$node.toggle()
3、獲取元素$node的屬性: id、src、title， 修改以上屬性
獲取：$node.attr('id'),$node.attr('src'),$node.attr('title')
修改：
修改一處屬性：$node.attr('id','header')
修改多處屬性：$node.attr({'id':'header','title':'task16'})
4、給$node 添加自定義屬性data-src
$node('data-src','images/01.jpg')
5、在$ct 內部最開頭添加元素$node
$ct.prepend($node)
6、在$ct 內部最末尾添加元素$node
$ct.append($node)
7、刪除$node
$node.remove()
8、把$ct里內容清空
$node.empty()
$ct.text("")
$ct.html("")
9、在$ct 里設置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
10、獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
獲取：1、$node.width()、$node.height()
2、$node.innerWidth()、$node.innerHeight()
3、$node.outerWidth()、$node.outerHeight()
4、$node.outerWidth(true)、$node.outerHeight(true)
11、獲取窗口滾動條垂直滾動距離
$(window).scrollTop()
12、獲取$node 到根節點水平、垂直偏移距離
水平：$node.offset().left
垂直：$node.offset().top
13、修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({
color:'red',
font-size:ཊpx'
})
14、遍歷節點，把每個節點裡面的文本內容重復一遍
$node.each(function() {
console.log($(this).text())
})
15、從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
16、獲取$ct 裡面的所有孩子
$ct.children()
17、對於$node，向上找到 class 為』.ct』的父親，再從該父親找到』.panel』的孩子
$node.parent('.ct').children('.panel')
18、獲取選擇元素的數量
$nodes.length
19、獲取當前元素在兄弟中的排行
$node.index()
1、當點擊$btn 時，讓 $btn 的背景色變為紅色再變為藍色
2、當窗口滾動時，獲取垂直滾動距離
3、當滑鼠放置到$div 上，把$div 背景色改為紅色，移出滑鼠背景色變為白色
4、當滑鼠激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制台展示輸入框里的文字
5、當選擇 select 後，獲取用戶選擇的內容
效果
效果
Ⅲ html前端復選框多類多個復選框提交怎麼封裝選中的數據，提交到後台，我後端是php
首先你得有個form表單,還得有個提交按鈕吧，form裡面有個屬性是action=「你要提交的php處理頁面」 method=「post」 ,php處理頁面用$_POST['提交的name'] 如'menuMole'，既然是復選框，他的name的值肯定是不一樣的
Ⅳ Web前端初學者應該學習的jQuery技巧
今天小編要跟大家分享的文章是關於
Web前端初學者應該學習的jQuery技巧!jQuery在Web前端學習里是很重要的一塊知識，很多人都在這階段學習的時候遇到問題，那麼作為剛剛接觸web前端的初學者來說都應該學習哪些Web前端初學者應該學習的jQuery技巧呢?讓我們一起來看一看吧！
1、關於頁面元素的引用
通過jquery的$引用元素包括通過id、class、元素名以及元素的層級關系及dom或者xpath條件等方法，且返回的對象為jquery對象(集合對象)，不能直接調用dom定義的方法。
2、jQuery對象與dom對象的轉換
只有jquery對象才能使用jquery定義的方法。注意dom對象和jquery對象是有區別的，調用方法時要注意操作的是dom對象還是jquery對象。普通的dom對象一般可以通過$轉換成jquery對象。
如：$(document.getElementById("msg"))則為jquery對象，可以使用jquery的方法。
由於jquery對象本身是一個集合。所以如果jquery對象要轉換為dom對象則必須取出其中的某一項，一般可通過索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get[1]，$("td")[5]這些都是dom對象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下幾種寫法都是正確的：
$("#msg").html;
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3、如何獲取jQuery集合的某一項
對於獲取的元素集合，獲取其中的某一項(通過索引指定)可以使用eq或get(n)方法或者索引號獲取，要注意，eq返回的是jquery對象，而get(n)和索引返回的是dom元素對象。對於jquery對象只能使用jquery的方法，而dom對象只能使用dom的方法，如要獲取第三個
元素的內容。
有如下兩種方法：
$("div").eq(2).html;//調用jquery對象的方法
$("div").get(2).innerHTML;//調用dom的方法屬性
4、同一函數實現set和get
Jquery中的很多方法都是如此，主要包括如下幾個：
·$("#msg").html;//返回id為msg的元素節點的html內容。
·$("#msg").html("newcontent");
·//將「newcontent」作為html串寫入id為msg的元素節點內容中,頁面顯示粗體的newcontent
·$("#msg").text;//返回id為msg的元素節點的文本內容。
·$("#msg").text("newcontent");
·//將「newcontent」作為普通文本串寫入id為msg的元素節點內容中,頁面顯示newcontent
·$("#msg").height;//返回id為msg的元素的高度
·$("#msg").height("300");//將id為msg的元素的高度設為300
·$("#msg").width;//返回id為msg的元素的寬度
·$("#msg").width("300");//將id為msg的元素的寬度設為300
·$("input").val(");//返回表單輸入框的value值
·$("input").val("test");//將表單輸入框的value值設為test
·$("#msg").click;//觸發id為msg的元素的單擊事件
·$("#msg").click(fn);//為id為msg的元素單擊事件添加函數
·同樣blur,focus,select,submit事件都可以有著兩種調用方法
5、集合處理功能
·$.extend({
·min:function(a,b){returna
·max:function(a,b){returna>b?a:b;}
·});//為jquery擴展了min,max兩個方法
·使用擴展的方法(通過「$.方法名」調用)：
·alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
6、支持方法的連寫
所謂連寫，即可以對一個jquery對象連續調用各種不同的方法。
例如：
$("p").click(function{alert($(this).html)})
.mouseover(function{alert('mouseoverevent')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
7、操作元素的樣式
主要包括以下幾種方式：
·$("#msg").css("background");//返回元素的背景顏色
·$("#msg").css("background","#ccc")//設定元素背景為灰色
·$("#msg").height(300);$("#msg").width("200");//設定寬高
·$("#msg").css({color:"red",background:"blue"});//以名值對的形式設定樣式
·$("#msg").addClass("select");//為元素增加名稱為select的class
·$("#msg").removeClass("select");//刪除元素名稱為select的class
·$("#msg").toggleClass("select");//如果存在(不存在)就刪除(添加)名稱為select的class
8、完善的事件處理功能
Jquery已經為我們提供了各種事件處理方法，我們無需在html元素上直接寫事件，而可以直接為通過jquery獲取的對象添加事件。
如：
$("#msg").click(function{alert("good")})//為元素添加了單擊事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//為三個不同的p元素單擊事件分別設定不同的處理
jQuery中幾個自定義的事件：
(1)hover(fn1,fn2)：一個模仿懸停事件(滑鼠移動到一個對象上面及移出這個對象)的方法。當滑鼠移動到一個匹配的元素上面時，會觸發指定的第一個函數。當滑鼠移出這個元素時，會觸發指定的第二個函數。
//當滑鼠放在表格的某行上時將class置為over，離開時置為out。
$("tr").hover(function{
$(this).addClass("over");
},
function{
$(this).addClass("out");
});
(2)ready(fn):當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。
$(document).ready(function{alert("LoadSuccess")})
//頁面載入完畢提示「LoadSuccess」,相當於onload事件。與$(fn)等價
(3)toggle(evenFn,oddFn):每次點擊時切換要調用的函數。如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數。隨後的每次點擊都重復對這兩個函數的輪番調用。
//每次點擊時輪換添加和刪除名為selected的class。
$("p").toggle(function{
$(this).addClass("selected");
},function{
$(this).removeClass("selected");
});
(4)trigger(eventtype):在每一個匹配的元素上觸發某類事件。
例如：
$("p").trigger("click");//觸發所有p元素的click事件
(5)bind(eventtype,fn)，unbind(eventtype):事件的綁定與反綁定
從每一個匹配的元素中(添加)刪除綁定的事件。
例如：
$("p").bind("click",function{alert($(this).text);});//為每個p元素添加單擊事件
$("p").unbind;//刪除所有p元素上的所有事件
$("p").unbind("click")//刪除所有p元素上的單擊事件
9、幾個實用特效功能
其中toggle和slidetoggle方法提供了狀態切換功能。
如toggle方法包括了hide和show方法。
slideToggle方法包括了slideDown和slideUp方法。
10、幾個有用的jQuery方法
$.browser.瀏覽器類型：檢測瀏覽器類型。有效參數：safari,
opera,msie,mozilla。如檢測是否ie：$.browser.isie，是ie瀏覽器則返回true。
$.each(obj,fn)：通用的迭代函數。可用於近似地迭代對象和數組(代替循環)。
如
$.each([0,1,2],function(i,n){alert("Item#"+i+":"+n);});
等價於：
vartempArr=[0,1,2];
for(vari=0;i
alert("Item#"+i+":"+tempArr[i]);
}
也可以處理json數據，如
$.each({name:"John",lang:"JS"},function(i,n){alert("Name:"+i+
",Value:"+n);});
結果為：
Name:name,Value:John
Name:lang,Value:JS
$.extend(target,prop1,propN)：用一個或多個其他對象來擴展一個對象，返回這個被擴展的對象。這是jquery實現的繼承方式。
如：
$.extend(settings,options);
//合並settings和options，並將合並結果返回settings中，相當於options繼承setting並將繼承結果保存在setting中。
varsettings=$.extend({},defaults,options);
//合並defaults和options，並將合並結果返回到setting中而不覆蓋default內容。
可以有多個參數(合並多項並返回)
$.map(array,fn)：數組映射。把一個數組中的項目(處理轉換後)保存到到另一個新數組中，並返回生成的新數組。
如：
vartempArr=$.map([0,1,2],function(i){returni+4;});
tempArr內容為：[4,5,6]
vartempArr=$.map([0,1,2],function(i){returni>0?i+1:null;
});
tempArr內容為：[2,3]
$.merge(arr1,arr2):合並兩個數組並刪除其中重復的項目。
如：$.merge([0,1,2],[2,3,4])//返回[0,1,2,3,4]
$.trim(str)：刪除字元串兩端的空白字元。
如：$.trim("hello,howareyou?");//返回"hello,howareyou?"
11、解決自定義方法或其他類庫與jQuery的沖突
很多時候我們自己定義了$(id)方法來獲取一個元素，或者其他的一些js類庫如prototype也都定義了$方法，如果同時把這些內容放在一起就會引起變數方法定義沖突，Jquery對此專門提供了方法用於解決此問題。
使用jquery中的jQuery.noConflict;方法即可把變數$的控制權讓渡給第一個實現它的那個庫或之前自定義的$方法。之後應用Jquery的時候只要將所有的$換成jQuery即可，如原來引用對象方法$("#msg")改為jQuery("#msg")。
如：jQuery.noConflict;
//開始使用jQuery
jQuery("divp").hide;
//使用其他庫的$
$("content").style.display='none'
以上就是小編今天為大家分享的關於Web前端初學者應該學習的jQuery技巧的文章，希望本篇文章能夠對正在從事web前端學習的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利！
Ⅳ 前端開發中父級元素下有不同的子元素,如何從不同的子元素種選擇相同的子元素
可以通過對比選擇。
先獲取所有的子元素，然後對所有子元素進行對比，就可以選出相同的子元素。
如果相同子元素帶有相同的類名，或者有相同的內容，也可以通過比較這些內容，選出相同的子元素。
也可以把父層元素的html內容提取出來，再使用正則表達式把相同的子元素匹配出來。
Ⅵ 前端 inline元素的特點，哪些元素屬於inline元素
不能設置寬高啊，多個元素能夠處於同一行，縱向的margin，padding設置無效等，具體去看HTML5學堂吧，都是前端干貨。
Ⅶ Web前端工程師應該如何學習CSS
今天小編要跟大家分享的文章是關於Web前端工程師應該如何學習CSS？很多人想讓我給他們推薦有關CSS部分的教程，或者問我如何學習CSS。我也看到很多人對CSS的部分內容感到困惑，一部分原因是由於對語言的過時認識。鑒於CSS在過去幾年中發生了相當大的變化，這是一個更新知識的好時機。即使CSS只是你所做工作的一小部分（因為你使用其他技術棧），CSS是你最終希望在屏幕上顯示的結果，所以值得合理去學習。因此，本文旨在概述CSS的關鍵基礎和資源，以便進一步閱讀現代CSS開發的關鍵領域。其中許多資源在Smashing雜志上已經有了，但我也選擇了其他一些資源，也有人關注CSS的關鍵領域。這不是一本完整的初學者指南或旨在涵蓋所有知識點。我的目標是覆蓋現代CSS的廣度，同時重點關注幾個關鍵領域，將幫助你理解CSS的其他部分。下面來和小編一起看一看吧！一、語言基礎知識對於CSS的大部分內容，你不需要特意去學習屬性和值，你可以在需要時查找它們。然而，CSS中一些基礎知識沒有掌握好，你將很難去理解它。這些基礎知識值得你花時間去理解，從長遠看，它會幫你節省很多時間和少走彎路。二、選擇器，不僅僅有類選擇器的表現如標題所說的，它選擇文檔的某些部分，以便你可以將CSS規則應用於它。大多數人都熟悉使用class，或在直接使用HTML元素設置樣式，比如body，但是還有很多更高級的選擇器可以根據文檔中的位置選擇元素，直接選擇位於元素之後的元素，或選擇表格中的奇數行。這些選擇器是CSS3規范的一部分（你可能聽說過它們被稱為第3級選擇器）具有出色的瀏覽器支持。有關可以使用的各種選擇器的詳細信息，請參閱MDN參考。有些選擇器的行為就好像你已經將類應用於文檔中的某些內容。例如p:first-child就像你在第一個p元素中添加了一個類一樣，這些被稱為偽類選擇器。偽元素選擇器就像動態插入一個元素一樣，例如::first-line的表現與用span包裹第一行文本類似。但是，如果該行的長度發生變化，它將重新應用，如果插入該元素則不會出現這種情況。這些選擇器可能會相當復雜。在下面的CodePen中是一個用偽類鏈接的偽元素的例子。我們使用:first-child偽類定位第一個p元素，然後::first-line選擇器選擇該元素的第一行，就好像在第一行周圍添加了一個以使其變為粗體和改變顏色。
Veggiesesbonusvobis,
tomatillomelonazukibeangarlic.
Gumbobeetgreenscorn
sokoendivegumbogourd.
.Dandelioncucumberearthnutpea
peanutsokozucchini.
.Celerypotatoscalliondesert
.
cornpea.
.
.
Norigrape
.Bunya
utsblack-.Sea
ícama
salsify.
Ⅷ Web前端開發知識點之CSS的使用方式
今天小編要跟大家分享的文章是關於Web前端開發知識點之CSS的使用方式。本文章小編從與HTML的結合方式、CSS語法、選擇器以及盒子模型四個方面進行講解。下面來和小編一起看一看吧！
一、與HTML的結合方式
CSS與HTML的結合方式一共有三種，分別是：外部樣式、內部樣式和內聯樣式。
①外部樣式
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用標簽鏈接到樣式表。標簽在文檔的頭部：
或者可以像下面這樣在
②內部樣式
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用
③內聯樣式
要使用內聯樣式，你需要在相關的標簽內使用樣式(style)屬性。
Thisisaparagraph
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
二、CSS語法
CSS語法規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
選擇器通常是您需要改變樣式的HTML元素。
每條聲明由一個屬性和一個值組成。兩條聲明之間被分號分開。
屬性是您希望設置的樣式屬性。每個屬性有一個值。屬性和值被冒號分開。
在下面這個例子中，h1是選擇器，color和font-size是屬性，red和14px是值。
三、選擇器
CSS的選擇器主要分為兩大類，一類基本選擇器；一類擴展選擇器。
①基本選擇器
基本選擇器包括id選擇器，元素選擇器和類選擇器。
id選擇器可以為標有特定id的HTML元素指定特定的樣式。id選擇器以"#"來定義。例如下面代碼指定id為red的標簽中文本為紅色。
#red{color:red;}
元素選擇器可以為相應的HTML元素指定特定的樣式。元素選擇器前面沒有任何字元。例如下面代碼指定div標簽中文本為紅色。
div{color:red;}
類選擇器可以為標有特定class的HTML元素指定特定的樣式。類選擇器以一個點號顯示。例如下面代碼指定class為center的標簽中文本居中對齊。
.center{text-align:center}
②擴展選擇器
擴展選擇器是在基本選擇器的基礎上擴展出來的，下面介紹幾種常見的。
*選擇器(*
{})可以為HTML的所有元素指定特定的樣式。例如下面代碼指定HTML頁面中所有文本為紅色。
*{color:red;}
並集選擇器(選擇器1,選擇器2{})可以為多個選擇器指定特定的樣式。例如下面代碼指定div和span兩種標簽中文本為紅色。
div,span{color:red;}
子選擇器(選擇器1選擇器2{})可以為選擇器1中的選擇器2指定特定的樣式。例如下面代碼指定div中span標簽文本為紅色。
divspan{color:red;}
父選擇器(選擇器1>選擇器2{})可以為含有選擇器2的選擇器1指定特定的樣式。例如下面代碼指定含有span的div標簽文本為紅色。
div>span{color:red;}
屬性選擇器(元素[屬性="屬性值"])可以為含有該屬性且屬性值等於該值的元素指定特定的樣式。其中，元素和屬性值可以省略。例如下面代碼指定align屬性等於center的div標簽文本為紅色。
div[align="center"]{color:red;}
偽類選擇器(元素:狀態{})可以為該元素處於該狀態時指定特定的樣式。例如下面的代碼指定滑鼠懸浮在超鏈接上時文本為紅色。
a:hover{color:red;}
四、盒子模型
所有HTML元素可以看作盒子，在CSS中，"box
model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型：
Margin(外邊距)-清除邊框外的區域，外邊距是透明的。
Border(邊框)-圍繞在內邊距和內容外的邊框。
Padding(內邊距)-清除內容周圍的區域，內邊距是透明的。
Content(內容)-盒子的內容，顯示文本和圖像。默認情況下，標簽的width和height屬性指的是content(內容)的寬和高，我們在設置邊框和邊距的時候一定要注意。如果想要讓width和height是最終盒子的大小，可以設置下面的代碼：
box-sizing:border-box;
以上就是小編今天為大家分享的關於Web前端開發知識點之CSS的使用方式的文章，希望本篇文章能夠對正在從事web前端工作和學習的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，城市一名優秀的web前端程序員。
文章來源：原創_緄墓適_
Ⅸ Web前端學習基礎之HTML&CSS知識介紹
今天小編要跟大家分享的文章是關於Web前端學習基礎之HTML&CSS知識介紹。正在學習Web前端知識的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。01、HTML概述全稱：HyperTextMarkupLanguage（超文本標記語言），定義頁面內容結構，該語言書寫的代碼通常會被瀏覽器解析執行。
HyperText(超文本)：不僅包括文本，還可以包括圖片、鏈接、音樂、視頻等非文本元素
MarkupLanguage(標記語言)：是一套標記標簽，html使用標記標簽來描述網頁
02、HTML文檔結構
文檔聲明定義：它既不是元素，也不是注釋，寫在html代碼的第一行；用來解析元素，通知瀏覽器使用哪一個html版本
html元素（又叫根標記），是所有其他元素的祖先元素，最頂層
文檔頭，它是html元素的第一個子元素，可以嵌套其他元素；裡面的內容不會在頁面上顯示
initial-scale=1.0">SEO搜索引擎優化