整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
可以看到內(nèi)聯(lián)樣式（通過元素中 style 屬性定義的樣式）的優(yōu)先級大于任何選擇器；而給屬性值加上 !important 又可以把優(yōu)先級提至最高，就是因為它的優(yōu)先級最高，所以需要謹(jǐn)慎使用它，以下有些使用注意事項：
字體相關(guān)：font-family、font-style、font-size、font-weight 等；
文本相關(guān)：text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等；
列表相關(guān)：list-style、list-style-image、list-style-type、list-style-position 等；
其他屬性：visibility、cursor 等；
對于其他默認(rèn)不繼承的屬性也可以通過以下幾個屬性值來控制繼承行為：
inherit：繼承父元素對應(yīng)屬性的計算值；
initial：應(yīng)用該屬性的默認(rèn)值，比如 color 的默認(rèn)值是 #000；
unset：如果屬性是默認(rèn)可以繼承的，則取 inherit 的效果，否則同 initial；
revert：效果等同于 unset，兼容性差。
在 CSS 中任何元素都可以看成是一個盒子，而一個盒子是由 4 部分組成的：內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）。盒模型有 2 種：標(biāo)準(zhǔn)盒模型和 IE 盒模型，本別是由 W3C 和 IExplore 制定的標(biāo)準(zhǔn)。
如果給元素設(shè)置如下樣式:
.box {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #eee;
margin: 10px;
}
標(biāo)準(zhǔn)盒模型認(rèn)為:盒子的實際尺寸 = 內(nèi)容（設(shè)置的寬/高） + 內(nèi)邊距 + 邊框
所以 .box 元素內(nèi)容的寬度就為 200px，而實際的寬度則是 width + padding-left + padding-right + border-left-width + border-right-width = 200 + 10 + 10 + 1 + 1 = 222。
IE 盒模型認(rèn)為：盒子的實際尺寸 = 設(shè)置的寬/高 = 內(nèi)容 + 內(nèi)邊距 + 邊框
.box 元素所占用的實際寬度為 200px，而內(nèi)容的真實寬度則是 width - padding-left - padding-right - border-left-width - border-right-width = 200 - 10 - 10 - 1 - 1 = 178。
現(xiàn)在高版本的瀏覽器基本上默認(rèn)都是使用標(biāo)準(zhǔn)盒模型，而像 IE6 這種老古董才是默認(rèn)使用 IE 盒模型的。
在 CSS3 中新增了一個屬性 box-sizing，允許開發(fā)者來指定盒子使用什么標(biāo)準(zhǔn)，它有 2 個值：
格式化上下文（Formatting Context）是 CSS2.1 規(guī)范中的一個概念，大概說的是頁面中的一塊渲染區(qū)域，規(guī)定了渲染區(qū)域內(nèi)部的子元素是如何排版以及相互作用的。
概念：塊格式化上下文，它是一個獨立的渲染區(qū)域，只有塊級盒子參與，它規(guī)定了內(nèi)部的塊級盒子如何布局，并且與這個區(qū)域外部毫不相干。
BFC的應(yīng)用場景有代碼
以上內(nèi)容參考c s s原理-[Formatting Context]
IFC 的形成條件非常簡單，塊級元素中僅包含內(nèi)聯(lián)級別元素，需要注意的是當(dāng)IFC中有塊級元素插入時，會產(chǎn)生兩個匿名塊將父元素分割開來，產(chǎn)生兩個 IFC。
就是flex布局這里就不多介紹了請看阮一峰的文章f le x 布局
內(nèi)容過多建議查看阮一峰的文章Grid 網(wǎng)格布局教程
其實屏幕分辨率是指在屏幕的橫縱方向上的像素點數(shù)量，比如分辨率 1920×1080 意味著水平方向含有 1920 個像素數(shù)，垂直方向含有 1080 個像素數(shù)。px表示css像素，在css中是絕對的長度單位,也是基礎(chǔ)單位，其他長度單位會被瀏覽器換算成px。但是對于設(shè)備而言p x又是相對單位，比如說寬高為2px正常屏幕下，其實就是4個像素點，而在設(shè)備像素比(devicePixelRatio) 為 2 的 Retina 屏幕下，它就有 16 個像素點。所以屏幕尺寸一致的情況下，屏幕分辨率越高，顯示效果就越細(xì)膩。
em 是 CSS 中x相對的長度單位。
em計算的時候會層層計算:比如
<div>
<p></p>
</div>
div { font-size: 2em; }
p { font-size: 2em; }
對于上面的例子 由于html 的字體大小是16px,所以p標(biāo)簽最終計算出來后的字體大小是 16 * 2 * 2 = 64px
rem(root em) 和em一樣也是相對長度單位，不過rem 相對的是html 根元素的font-size 值。
rem 由于是基于 html 的 font-size 來計算，所以通常用于自適應(yīng)網(wǎng)站或者 H5 中。
比如在做 H5 的時候，前端通常會讓 UI 給 750px 寬的設(shè)計圖，而在開發(fā)的時候可以基于 iPhone X 的尺寸 375px * 812px 來寫頁面，這樣一來的話，就可以用下面的 JS 依據(jù)當(dāng)前頁面的視口寬度自動計算出根元素 html 的基準(zhǔn) font-size 是多少。
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
psdWidth = 750, // 設(shè)計圖寬度
recalc = function () {
var clientWidth = docEl.clientWidth;
if ( !clientWidth ) return;
if ( clientWidth >= 640 ) {
docEl.style.fontSize = 200 * ( 640 / psdWidth ) + 'px';
} else {
docEl.style.fontSize = 200 * ( clientWidth / psdWidth ) + 'px';
}
};
if ( !doc.addEventListener ) return;
// 綁定事件的時候最好配合防抖函數(shù)
win.addEventListener( resizeEvt, debounce(recalc, 1000), false );
doc.addEventListener( 'DOMContentLoaded', recalc, false );
function debounce(func, wait) {
var timeout;
return function () {
var context = this;
var args = arguments;
clearTimeout(timeout)
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
})(document, window);
比如當(dāng)視口是 375px 的時候，經(jīng)過計算 html 的 font-size 會是 100px，這樣有什么好處呢？好處就是方便寫樣式，比如從設(shè)計圖量出來的 header 高度是 50px 的，那我們寫樣式的時候就可以直接寫：
header {
height: 0.5rem;
}
相對視口的單位，除了 vw/vh 外，還有 vmin 和 vmax：
image-20211118100339533
Retina 顯示屏比普通的屏幕有著更高的分辨率，所以在移動端的 1px 邊框就會看起來比較粗，為了美觀通常需要把這個線條細(xì)化處理。
最完美的解決方案:媒體查詢+偽類+ transform 實現(xiàn)
.scale-1px-bottom {
position: relative;
border:none;
}
@media (-webkit-min-device-pixel-ratio: 2) {
.scale-1px-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
}
同時設(shè)置4個方向的邊框線 寫在項目里自己要添加關(guān)于媒體查詢的內(nèi)容喲
.scale-1px {
position: relative;
margin-bottom: 20px;
border:none;
}
.scale-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
浮動概念: 浮動元素會脫離文檔流并向左/向右浮動，直到碰到父元素或者另一個浮動元素。
需要清除浮動的原因，它造成的問題？
因為浮動元素會脫離正常的文檔流，并不會占據(jù)文檔流的位置，所以如果一個父元素下面都是浮動元素，那么這個父元素就無法被浮動元素所撐開，這樣一來父元素就丟失了高度，這就是所謂的浮動造成的父元素高度坍塌問題。
父元素高度一旦坍塌將對后面的元素布局造成影響，為了解決這個問題，所以需要清除浮動，讓父元素恢復(fù)高度，那該如何做呢？
清除浮動的兩種方式：1BFC 清除浮動，2.clear清除浮動
原理： 計算BFC元素的高度的時候浮動的子元素的高度也會計算在內(nèi)，就是利用這條規(guī)則清除浮動的。
假設(shè)一個父元素 parent 內(nèi)部只有 2 個人元素 child，且它們都是左浮動的，這個時候 parent 如果沒有設(shè)置高度的話，因為浮動造成了高度坍塌，所以 parent 的高度會是 0，此時只要給 parent 創(chuàng)造一個 BFC，那它的高度就能恢復(fù)了。
而產(chǎn)生 BFC 的方式很多，我們可以給父元素設(shè)置overflow: auto 來簡單的實現(xiàn) BFC 清除浮動，但是為了兼容 IE 最好用 overflow: hidden。
.parent {
overflow: hidden;
}
.clearfix { // ie低版本瀏覽器兼容
zoom: 1;
}
.clearfix::after {
content: ""; // 內(nèi)容為空保證高度為0
display: block; //clear: both; 只對塊元素起作用
clear: both; // 清除浮動的關(guān)鍵
}
可以結(jié)合這個 codepen demo 一起理解上圖的 clear 清楚浮動原理。
上面這個 demo 或者圖里為了展示需要所以給偽元素的內(nèi)容設(shè)置為了 ::after，實際使用的時候需要設(shè)置為空字符串，讓它的高度為 0，從而父元素的高度都是由實際的子元素?fù)伍_。
參考：CSS中的浮動和清除浮動，梳理一下
針對同一個類型的 HTML 標(biāo)簽，不同的瀏覽器往往有不同的表現(xiàn)，所以在網(wǎng)站制作的時候，開發(fā)者通常都是需要將這些瀏覽器的默認(rèn)樣式清除，讓網(wǎng)頁在不同的瀏覽器上能夠保持一致。
針對清楚瀏覽器默認(rèn)樣式參考CSS 大師 Eric A. Meyer 寫的reset.css ；
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
除了 reset.css 外，后來又出現(xiàn)了 Normalize.css 。關(guān)于 Normalize.css, 其作者 necolas 專門寫了一篇文章介紹了它，并談到了它和 reset.css 的區(qū)別。這個是他寫那篇文章的翻譯版：讓我們談一談 Normalize.css。
這個偷個懶就不寫寫那么多描述
查看以上這些方案的示例： codepen demo
這里不多寫了看我之前的知乎文章：常見的兩欄布局三欄布局，圣杯雙飛翼布局方案
對響應(yīng)式布局的理解： 就是根據(jù)網(wǎng)頁頁面的放大縮小或者不同的機型，顯示出來的頁面效果是一樣美觀的。
你有用過哪些前端性能優(yōu)化的方法？
談?wù)勑阅軆?yōu)化問題
前端性能優(yōu)化最佳實踐？
Beautiful Soup 是一個可以從 HTML 或 XML 文件中提取數(shù)據(jù)的 Python 庫，它提供了一些簡單的操作方式來幫助你處理文檔導(dǎo)航，查找，修改文檔等繁瑣的工作。因為使用簡單，所以 Beautiful Soup 會幫你節(jié)省不少的工作時間。
上一篇文章我們介紹了如何使用 Beautiful Soup 來遍歷文檔中的節(jié)點，這片文章我們繼續(xù)血學(xué)習(xí)如何使用 Beautiful Soup 指定文檔中搜索到你想要的內(nèi)容。
同樣為了故事的順利發(fā)展，我們繼續(xù)使用之前的 HTML 文本，下文的所有例子都是基于這段文本的。
html_doc = """
<html><head><title>index</title></head>
<body>
<p class="title"><b>首頁</b></p>
<p class="main">我常用的網(wǎng)站
<a href="https://www.google.com" class="website" id="google">Google</a>
<a href="https://www.baidu.com" class="website" id="baidu">Baidu</a>
<a href="https://cn.bing.com" class="website" id="bing">Bing</a>
</p>
<div><!--這是注釋內(nèi)容--></div>
<p class="content1">...</p>
<p class="content2">...</p>
</body>
"""
soup = BeautifulSoup(html_doc, "lxml")正式講解搜索文檔之前，我們有必要了解下 Beautiful Soup 的過濾器，這些過濾器在整個搜索的 API 中都有所體現(xiàn)，他們可以被用在 TAG 的 name 中，屬性中，字符串中或他們的混合中。聽起來有點繞是么，看幾個例子就懂了。
1、根據(jù) TAG 的 name 來查找標(biāo)簽，下面的例子會查找文檔中的所有 b 標(biāo)簽。同時要注意統(tǒng)一傳入 Unicode 編碼以避免 Beautiful Soup 解析編碼出錯。
# demo 1
tags = soup.find_all('b')
print(tags)
#輸出結(jié)果
[<b>首頁</b>]2、如果傳入正則表達(dá)式作為參數(shù)，那么 Beautiful Soup 會通過正則表達(dá)式的 match() 來匹配內(nèi)容。
# demo 2
import re
for tag in soup.find_all(re.compile("^b")):
print(tag.name)
#輸出結(jié)果
body
b3、如果傳入列表參數(shù)，那么 Beautiful Soup 會將與列表中任一一個元素匹配的內(nèi)容返回。
# demo 3
for tag in soup.find_all(['a', 'b']):
print(tag)
#輸出結(jié)果
<b>首頁</b>
<a class="website" href="https://www.google.com" id="google">Google</a>
<a class="website" href="https://www.baidu.com" id="baidu">Baidu</a>
<a class="website" href="https://cn.bing.com" id="bing">Bing</a>4、True 可以匹配任何值，下面的例子是查找所有的 TAG 但不會返回字符串。
# demo 4
for tag in soup.find_all(True):
print(tag.name, end=', ')
#輸出結(jié)果
html, head, title, body, p, b, p, a, a, a, div, p, p, 5、方法。我們可以定義一個方法，該方法只接受一個參數(shù)，若該方法返回 True 則表示當(dāng)前元素匹配并且被找到，返回 False 意味著沒找到。下面的例子展示了查找所有同時包含 class 屬性和 id 屬性的節(jié)點。
# demo 5
def has_id_class(tag):
return tag.has_attr('id') and tag.has_attr('class')
tags = soup.find_all(has_id_class)
for tag in tags:
print(tag)
#輸出結(jié)果
<a class="website" href="https://www.google.com" id="google">Google</a>
<a class="website" href="https://www.baidu.com" id="baidu">Baidu</a>
<a class="website" href="https://cn.bing.com" id="bing">Bing</a>大部分情況字符串過濾器就可以滿足我們的需求，外加這個神奇的方法過濾器，我們就可以實現(xiàn)各種自定義需求了。
該函數(shù)搜索當(dāng)前節(jié)點下的所有子節(jié)點，其簽名如下find_all( name , attrs , recursive , text , **kwargs )。我們可以傳入指定 TAG 的 name 來查找節(jié)點，上面已經(jīng)舉過例子了，這里不在贅述。我們來看幾個其他的用法。
1、如果我們傳入 find_all() 函數(shù)不是搜索內(nèi)置的參數(shù)名，那么搜索是就會將該參數(shù)對應(yīng)到屬性上去。下文的例子表示查找 id 為 google 的節(jié)點。
搜索指定名字的屬性時可以使用的參數(shù)值包括：字符串，正則表達(dá)式，列表，True。也就是我們上文介紹過的過濾器。
# demo 6
tags = soup.find_all(id='google')
print(tags[0]['href'])
for tag in soup.find_all(id=True): # 查找所有包含 id 屬性的 TAG
print(tag['href'])
#輸出結(jié)果
https://www.google.com
https://www.google.com
https://www.baidu.com
https://cn.bing.com2、按照 CSS 類名搜索，但是鏢師 CSS 的關(guān)鍵字 class 在 Python 中是內(nèi)置關(guān)鍵字，從 Beautiful Soup 4.1.1 版本開始，可以通過 class_ 參數(shù)搜索有指定 CSS 類名的 TAG：
class_ 參數(shù)同樣接受不同類型的過濾器：字符串，正則表達(dá)式，方法，True。
# demo 7
tags = soup.find_all("a", class_="website")
for tag in tags:
print(tag['href'])
def has_seven_characters(css_class):
return css_class is not None and len(css_class) == 7
for tag in soup.find_all(class_=has_seven_characters):
print(tag['id'])
#輸出結(jié)果
https://www.google.com
https://www.baidu.com
https://cn.bing.com
google
baidu
bing同時，因為 CSS 可以有多個值，所以我們可以分別搜索 CSS 中的每個值。
# demo 8
css_soup = BeautifulSoup('<p class="body strikeout"></p>', 'lxml')
tags = css_soup.find_all("p", class_="strikeout")
print(tags)
#輸出結(jié)果
[<p class="body strikeout"></p>]3、不僅可以按照標(biāo)簽和 CSS 來搜索整個文檔，還可以使用 text 來按照內(nèi)容來搜索。同時 text 還可以配合其他屬性一起來完成搜索任務(wù)。
# demo 9
tags = soup.find_all(text="Google")
print("google : ", tags)
tags = soup.find_all(text=["Baidu", "Bing"])
print("baidu & bing : ", tags)
tags = soup.find_all('a', text="Google")
print("a[text=google] : ", tags)
#輸出結(jié)果
google : ['Google']
baidu & bing : ['Baidu', 'Bing']
a[text=google] : [<a class="website" href="https://www.google.com" id="google">Google</a>]
4、限制返回數(shù)量
有時候文檔樹過于龐大，我們不想查查找整棵樹，只想查找指定數(shù)量的節(jié)點，或者只想查找子節(jié)點，而不想查找孫子節(jié)點，指定 limit 或者 recursive 參數(shù)即可。
# demo 10
tag = soup.find_all("a", limit=1)
print(tag)
tags = soup.find_all("p", recursive=False)
print(tags)
#輸出結(jié)果
[<a class="website" href="https://www.google.com" id="google">Google</a>]
[]因為該對象的兒子節(jié)點沒有 p 標(biāo)簽，所以返回的是空列表。
該函數(shù)只會返回一個結(jié)果，與 find_all(some_args, limit=1) 是等價的，唯一的區(qū)別就是該函數(shù)直接返回結(jié)果，而 find_all() 函數(shù)返回包含一個結(jié)果的列表。另外 find_all() 方法沒有找到目標(biāo)是返回空列表, find() 方法找不到目標(biāo)時,返回 None。除此之外使用上沒有其他差別。
除了 find_all() 和 find() 外，Beautiful Soup 中還有 10 個用于搜索的 API，其中中五個用的是與 find_all() 相同的搜索參數(shù)，另外 5 個與 find() 方法的搜索參數(shù)類似，區(qū)別僅是它們搜索文檔的范圍不同。
find_parents() 和 find_parent() 用來搜索當(dāng)前節(jié)點的父節(jié)點。
find_next_siblings() 和 find_next_sibling() 對在當(dāng)前節(jié)點后面解析的所有兄弟節(jié)點進(jìn)行迭代。
find_previous_siblings() 和 find_previous_sibling() 對在當(dāng)前節(jié)點前面解析的所有兄弟節(jié)點進(jìn)行迭代。
find_all_next() 和 find_next() 對當(dāng)前節(jié)點之后的 TAG 和字符串進(jìn)行迭代。
find_all_previous() 和 find_previous() 對當(dāng)前節(jié)點之前的 TAG 和字符串進(jìn)行迭代。
以上五組函數(shù)的區(qū)別僅僅是前者返回一個所有符合搜索條件的節(jié)點列表，而后者只返回第一個符合搜索條件的節(jié)點。
因為這 10 個 API 的使用和 find_all() 與 find() 大同小異，所有i這里不在舉例，讀者可以自己探索。
在 Tag 或 BeautifulSoup 對象的 .select() 方法中傳入字符串參數(shù)即可使用 CSS 選擇器的語法找到 TAG。
1、通過某個標(biāo)簽逐層查找。
# demo 11
tags = soup.select("body a")
for tag in tags:
print(tag['href'])
#輸出結(jié)果
https://www.google.com
https://www.baidu.com
https://cn.bing.com
2、查找某個標(biāo)簽下的直接子標(biāo)簽
# demo 12
tags = soup.select("p > a")
print(tags)
tags = soup.select("p > #google")
print(tags)
#輸出結(jié)果
[<a class="website" href="https://www.google.com" id="google">Google</a>, <a class="website" href="https://www.baidu.com" id="baidu">Baidu</a>, <a class="website" href="https://cn.bing.com" id="bing">Bing</a>]
[<a class="website" href="https://www.google.com" id="google">Google</a>]3、通過 CSS 類名直接查找
# demo 13
tags = soup.select(".website")
for tag in tags:
print(tag.string)
#輸出結(jié)果
Google
Baidu
Bing4、通過標(biāo)簽的 id 屬性查找
# demo 14
tags = soup.select("#google")
print(tags)
#輸出結(jié)果
[<a class="website" href="https://www.google.com" id="google">Google</a>]5、通過屬性的值來查找
# demo 15
tags = soup.select('a[href="https://cn.bing.com"]')
print(tags)
#輸出結(jié)果
[<a class="website" href="https://cn.bing.com" id="bing">Bing</a>]本章節(jié)介紹了 Beautiful Soup 關(guān)于文檔搜索的相關(guān)操作，熟練掌握這些 API 的操作可以讓我們更快更好找到我們想要定位的節(jié)點，不要看到這么多函數(shù)嚇怕了，其實我們只需要熟練掌握 find_all() 和 find() 兩個函數(shù)即可，其余 API 的使用都大同小異，稍加練習(xí)即可快速上手。
avaScript 是互聯(lián)網(wǎng)上最流行的腳本語言，這門語言可用于 HTML 和 web，可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機等設(shè)備。它是一個腳本語言，它是一個輕量級，但功能強大的編程語言，它也是有語法規(guī)則，有變量定義的編程語言。
在js中，聲明變量，可以用var或let關(guān)鍵字。在ES6之前，我們都是用var來聲明變量，而且JS只有函數(shù)作用域和全局作用域，沒有塊級作用域，所以{}限定不了var聲明變量的訪問范圍，而let解決了這個問題。在ES6中，還新增了const關(guān)鍵字，用于聲明常量。
let s = "老陳說編程"
var i = 100;
const PI = 3.14;在js中，數(shù)據(jù)類型有值類型：字符串（String）、數(shù)字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined)，還有引用數(shù)據(jù)類型：對象(Object)、數(shù)組(Array)和函數(shù)(Function)。可以使用 typeof 操作符來檢測變量的數(shù)據(jù)類型。
// 字符串
var laochen="老陳說編程";
// 數(shù)字
var num = 10;
// 布爾
var x = true;
// 數(shù)組
var p = new Array("Python","前端","Java","App");
p[1]="前端+小程序"
/*對象*/
var person={
id: 666,
firstname : "老陳",
lastname : "陳老"
};
/* 訪問對象屬性 */
firstname =person.firstname;
lastname =person["lastname"];字符串用于存儲和處理文本。在日常，在編程中，都是經(jīng)常見到，以至于大多數(shù)編程語言，都對其特別"照顧"，提供好多專門用于處理字符串的方法。在Javascript中，字符串可以使用單引號或雙引號聲明。方法挺多的，用到時，自己查一下就好了，我只說幾個關(guān)鍵的。
var s = "老陳說編程";
// 用索引訪問字符
var c = s[2];
// 計算字符串的長度
var len = s.length;
// 用加號或concat()附件其他字符串
var new_str = s + "，只說實用的技術(shù)";
new_str = new_str.concat(",如Python、Java、App等。");
// 獲取子字符串
var sub = new_str.substring(0,11);上過幼兒園的朋友都知道，要進(jìn)行數(shù)學(xué)運算時， 要用到+、-、*、/等運算符。有了運算符，計算方便的不得了，特別是1+1這種。好了，不開玩笑了，說下Javascript的4種運算符。
1. 算術(shù)運算符
在大多數(shù)編程語言中，算術(shù)運算符都會有+(加法）、-(減法)、*(乘法)、/(除法)、%(取模-余數(shù)）、++(自增)、--(自減)這幾種，你學(xué)會了Js的，在其他編程語言中，用法也是一樣的。
var x = 100, y = 8;
// 自增
y++;
// 自減
x--;
// 加法
x = x + y;
// 減法
x = x - y;
// 乘法
x = x * y;
// 除法
x = x / y;
// 取模
x = x % y;2. 賦值運算符
同大多數(shù)編程語言一樣，Js的賦值也是用=，同運算符結(jié)合之后，便有了+=、-=、*=、/=和%=。
var x = 100, y = 8;
// 加法
x += y;
// 減法
x -= y;
// 乘法
x *= y;
// 除法
x /= y;
// 取模
x %= y;3. 比較運算符
比較運算符在邏輯語句中使用，以測定變量或值是否相等，結(jié)果返回true或者false。在Js中，比較兩個數(shù)用==符號， 不等于!=， 大于>，小于<，大于或等于>=和小于或等于<= 。
var x = 100, y = 8;
var result = (x>=y);4. 邏輯運算符
邏輯運算符用于測定變量或值之間的邏輯，常用多個組合式的判斷。大多數(shù)編程語言，常用的邏輯運算符有和&&、或||和非!，這3個符號。
var x = 1001, y = 11;
var result = (x>80) && y > 10;語句，是一門編程語言的核心內(nèi)容，有了語句，編程的世界才精彩。JavaScritp語句內(nèi)有有條件語句、for循環(huán)語句和while語句。
1. 條件語句
條件語句用于基于不同的條件來執(zhí)行不同的動作(業(yè)務(wù))，在 JavaScript 中，我們可使用的條件語句有if、if...else、if...else if....else和switch 語句。
let lang = 1;
let result = ""
switch (lang) {
case 1:
result = "Python";
break;
case 2:
result = "前端";
break;
case 3:
result = "App";
break;
default:
result = "Java";
}2. for循環(huán)
for循環(huán)可以將代碼塊執(zhí)行指定的次數(shù)，如果您希望一遍又一遍地運行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的。
for 循環(huán)的語法：for (語句 1; 語句 2; 語句 3) { 被執(zhí)行的代碼塊 } 。
let result = ""
for (let i=0; i<10; i++)
{
result += i + "<br/>";
}3. while循環(huán)
while 循環(huán)會在指定條件下循環(huán)執(zhí)行代碼塊。只要符合指定條件為 true，循環(huán)就可以一直執(zhí)行代碼塊。
while (條件)
{
需要執(zhí)行的代碼
}
let i = 1;
let result = "";
while (i < 6) {
result += i + "<br/>";
i++;
}do/while 循環(huán)是 while 循環(huán)的變體。該循環(huán)會在檢查條件是否為真之前執(zhí)行一次代碼塊，然后如果條件為真的話，就會重復(fù)這個循環(huán)。
do
{
需要執(zhí)行的代碼
}
while (條件);
let i = 1;
let result = ""
do {
result += i + "<br/>";
i++;
}
while (i < 5);函數(shù)是可重復(fù)使用的代碼塊，在面向?qū)ο罄铮瘮?shù)也叫作方法。JavaScript 函數(shù)語法:
function 函數(shù)名(argument1,argument2)
{
// 執(zhí)行代碼
}
函數(shù)參數(shù)可以是0個，也可以是多個。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript語法</title>
<style>
button {
border: none;
color: white;
padding: 8px 32px;
font-size: 16px;
margin-top: 15px;
}
.bl {
background-color: #4CAF50; /* Green */
}
</style>
<script>
function myFun(name) {
alert(name + "說編程");
}
</script>
</script>
</head>
<body>
<button class="bl" onclick="myFun('老陳')">調(diào)用函數(shù)</button>
</body>
</html>好了，有關(guān)javascript語法的內(nèi)容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點贊，就是對老陳繼續(xù)創(chuàng)作和分享最大的鼓勵。
一個當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗。想學(xué)編程的朋友，可關(guān)注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒錯的。
#前端##HTML5##JavaScript##程序員##Web#
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
