整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
常和電腦打交道的朋友，一定有過(guò)這樣的難題，在網(wǎng)上查資料找文章，復(fù)制文章的內(nèi)容才發(fā)現(xiàn)必須要注冊(cè)登錄才支持，也太麻煩了吧！
這種限制復(fù)制文字的網(wǎng)頁(yè)，其實(shí)是用JavaScripty代碼來(lái)實(shí)現(xiàn)限制復(fù)制的，當(dāng)然，解鈴還須系鈴人，今天教大家一串代碼接觸限制。
首先在我們需要復(fù)制內(nèi)容的網(wǎng)頁(yè)中的地址欄中輸入：
javascript：void($={});
然后按下回車(chē)鍵Enter，然后網(wǎng)頁(yè)的內(nèi)容就可以支持任意復(fù)制啦！
同樣方法不僅支持提取網(wǎng)頁(yè)中的文字，還能夠提取書(shū)本、圖片上面的文字，在書(shū)本中遇到需要摘抄到電腦的內(nèi)容，也可以輕松提取，方法如下：
我們打開(kāi)迅捷PDF轉(zhuǎn)換器工具，在特色功能中找到"圖片轉(zhuǎn)文字"，然后將網(wǎng)頁(yè)的圖片截圖，或者書(shū)本中的內(nèi)容拍照上傳。
點(diǎn)擊轉(zhuǎn)換之后即可將文字輸出到Word文檔中，我們一起來(lái)看看效果：
還有一種方法，在網(wǎng)頁(yè)中【右擊】，然后點(diǎn)擊【查看源文件】，接下來(lái)在源文件中找到對(duì)應(yīng)的文字內(nèi)容復(fù)制即可。
掌握好這3種方法，以后不用擔(dān)心網(wǎng)頁(yè)上的文字無(wú)法復(fù)制了
.jQuery的三種$
1)$可以是$(expresion)，即css選擇器、Xpath或html元素，也就是通過(guò)上述表達(dá)式來(lái)匹配目標(biāo)元素。
比如：$("a")構(gòu)造的這個(gè)對(duì)象，是用CSS選擇器構(gòu)建了一個(gè)jQuery對(duì)象--它選擇了所有的<a/>這個(gè)標(biāo)簽。
eg:$("a").click(function{...}) :就是在點(diǎn)擊頁(yè)面上的任何一個(gè)鏈接時(shí)的觸發(fā)事件。
alert($("div>p").html):表示彈出div下的一級(jí)節(jié)點(diǎn)標(biāo)簽為p的內(nèi)容
$("<div><p>Hello</p></div>").appendTo("body")：表示$中的是一個(gè)字符串，用這樣一段字串構(gòu)建了jQuery對(duì)象，然后向<body/>中添加這一字串。
2）$可以是$(element)，即一個(gè)特定的DOM元素。如常用的DOM對(duì)象有document、location、form等。
eg:$(document).find("div>p").html):表示$中的document是一個(gè)DOM元素，即在全文尋找?guī)?lt;p>的<div>元素，并顯示<p>中的內(nèi)容。
3）$可以是$(function)，即一個(gè)函數(shù)，它是$(document).ready的一個(gè)速記方式。
eg:
$(document).ready(function{
alert("Hello world!");
}) //意思是當(dāng)文檔載入完畢就執(zhí)行
可簡(jiǎn)化為：
$(function{
alert("Hello world!");
});
2.對(duì)于選擇HTML文檔中的elements，jQuery有兩種方法：
1）如$("div>ul a")，它的意思是div標(biāo)簽中的ul標(biāo)簽中的a標(biāo)簽
不過(guò)，$('div>ul')和$('div ul')是有區(qū)別的，
$('div>ul')是<div>的直接后代里找<ul>； 而$('div ul')是在<div>的所有后代里找<ul>。
2）用jQuery對(duì)象的幾個(gè)方法（如方法find()、each()等） $("#orderedlist).find("li") 就像 $("#orderedlist li"). each一樣迭代了所有的li，而表達(dá)式中的“#”表示HTML中的ID，如上例中的“#orderedlist”就表示“ID為orderedlist所在的標(biāo)簽”。
3.標(biāo)簽選擇器$('p')、類(lèi)選擇器$('.myClass')、id選擇器$('#myId')
4.$('#sId li:not(.horizontal)')，就是指類(lèi)名"sId"里面的所有l(wèi)i的子孫中沒(méi)有horizontal類(lèi)的所有元素。
5.XPath選擇器
eg：選擇所有帶有title 屬性的鏈接，我們會(huì)這樣寫(xiě)：$('a[@title]') ，下面是解析：
里帶@，說(shuō)明里的是元素的屬性；是個(gè)屬性選擇器
里沒(méi)@，說(shuō)明里的是元素的子孫
1）$('ul li')和$('ul[li]')雖然返回的都是一個(gè)jQuery數(shù)組，但兩者的含義正好相反。前者是要找<ul>下所有<li>子孫，而后者卻是在找所有子孫為<li>的<ul>數(shù)組。
2）在XPath中，要找一個(gè)“以...開(kāi)頭”的屬性，用^=，如找一個(gè)name屬性是以mail開(kāi)頭的input元素，就用 $('input[@name^="mail"]')
要找一個(gè)“以...結(jié)尾”的屬性，要用$=
要找一個(gè)“不頭不尾”的屬性，用*=
6.不屬于上述的CSS和XPath的選擇器，就是自定義的選擇器了，用“:”表示，這里要用的就是:first，:last，:parent ，:hidden，:visible，:odd，:even，:not('xxx')， ":eq(0)"（始于0)，:nth(n），:gt(0)，:lt(0)，:contains("xxx") 如：$('tr:not([th]):even')意為<tr>元素的子孫中不含<th>的所有子孫的偶數(shù)項(xiàng)
7.其他的如下：
$('th').parent—— th標(biāo)簽的父節(jié)點(diǎn)
$('td:contains("Henry")').prev——內(nèi)容包含有"Henry"的<td>的上一個(gè)節(jié)點(diǎn)
$('td:contains("Henry")').next——內(nèi)容包含有"Henry"的<td>的下一個(gè)節(jié)點(diǎn)
$('td:contains("Henry")').siblings——內(nèi)容包含有"Henry"的<td>的所有兄弟節(jié)點(diǎn)
還有一個(gè)，就是end，這個(gè)方法肯定是用在某個(gè)DOM節(jié)點(diǎn)執(zhí)行了某一動(dòng)作之后，還想在與其相關(guān)的節(jié)點(diǎn)上執(zhí)行類(lèi)似動(dòng)作，這里就要用到end。用過(guò)end方法之后，所返回的是執(zhí)行動(dòng)作的那個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)上。舉個(gè)例子
$(...).parent.find(...).addClass.end 這里執(zhí)行動(dòng)作的節(jié)點(diǎn)是find(...)，是一個(gè)數(shù)組對(duì)象，它所做的動(dòng)作是“addClass”，之后，用了個(gè)end，這時(shí)所返回的東東就是指向了parent所指向的節(jié)點(diǎn)，也就是執(zhí)行“addClass”動(dòng)作的那個(gè)數(shù)組對(duì)象的父節(jié)點(diǎn)。
8.要直接訪問(wèn)DOM元素，可用get(0)的方法，如 $('#myelement').get(0)，也可縮寫(xiě)成$('#myelement')[0]
眾號(hào)【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java(100G) Python(80G) 大數(shù)據(jù) 區(qū)塊鏈 測(cè)試 PPT JS(40g+300教程) HTML 簡(jiǎn)歷 領(lǐng)取相關(guān)學(xué)習(xí)資料！
一、HTML
1、<image>標(biāo)簽上title屬性與alt屬性的區(qū)別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說(shuō)明的。且長(zhǎng)度必須少于100個(gè)英文字符或者用戶(hù)必須保證替換文字盡可能的短。
這包括那些使用本來(lái)就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶(hù)，視覺(jué)障礙的用戶(hù)和使用屏幕閱讀器的用戶(hù)等。
title屬性為設(shè)置該屬性的元素提供建議性的信息。使用title屬性提供非本質(zhì)的額外信息。參考《alt和title屬性的區(qū)別及應(yīng)用》
2、分別寫(xiě)出以下幾個(gè)HTML標(biāo)簽：文字加粗、下標(biāo)、居中、字體
加粗：<b>、<strong>
下標(biāo)：<sub>
居中：<center>
字體：<font>、<basefont>、參考《HTML標(biāo)簽列表》
3、請(qǐng)寫(xiě)出至少5個(gè)html5新增的標(biāo)簽，并說(shuō)明其語(yǔ)義和應(yīng)用場(chǎng)景
section：定義文檔中的一個(gè)章節(jié)
nav：定義只包含導(dǎo)航鏈接的章節(jié)
header：定義頁(yè)面或章節(jié)的頭部。它經(jīng)常包含 logo、頁(yè)面標(biāo)題和導(dǎo)航性的目錄。
footer：定義頁(yè)面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁(yè)面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。
參考《HTML5 標(biāo)簽列表》
4、請(qǐng)說(shuō)說(shuō)你對(duì)標(biāo)簽語(yǔ)義化的理解？
a. 去掉或者丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)
b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲(chóng)抓取更多的有效信息：爬蟲(chóng)依賴(lài)于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重；
c. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來(lái)渲染網(wǎng)頁(yè)；
d. 便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。
5、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
聲明位于文檔中的最前面，處于 標(biāo)簽之前。告知瀏覽器以何種模式來(lái)渲染文檔。
嚴(yán)格模式的排版和 JS 運(yùn)作模式是，以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
在混雜模式中，頁(yè)面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。
6、你知道多少種Doctype文檔類(lèi)型？
標(biāo)簽可聲明三種 DTD 類(lèi)型，分別表示嚴(yán)格版本、過(guò)渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類(lèi)型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類(lèi)型：Strict、Transitional 以及 Frameset。
Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁(yè)，
Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁(yè)。
7、HTML與XHTML——二者有什么區(qū)別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關(guān)閉。
c. 標(biāo)簽名必須用小寫(xiě)字母。
d. XHTML 文檔必須擁有根元素。
參考《XHTML 與 HTML 之間的差異》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語(yǔ)義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
d. 音頻、視頻API(audio,video)
e. 畫(huà)布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
h. sessionStorage 的數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)會(huì)被清除
i. 表單控件，calendar、date、time、email、url、search
j. 新的技術(shù)webworker, websocket等
移除的元素：
a. 純表現(xiàn)的元素：basefont，big，center, s，strike，tt，u；
b. 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
9、iframe的優(yōu)缺點(diǎn)？
優(yōu)點(diǎn)：
a. 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問(wèn)題
b. iframe無(wú)刷新文件上傳
c. iframe跨域通信
缺點(diǎn)：
a. iframe會(huì)阻塞主頁(yè)面的Onload事件
b. 無(wú)法被一些搜索引擎索引到
c. 頁(yè)面會(huì)增加服務(wù)器的http請(qǐng)求
d. 會(huì)產(chǎn)生很多頁(yè)面，不容易管理。
參考《iframe的一些記錄》
10、Quirks模式是什么？它和Standards模式有什么區(qū)別？
在寫(xiě)程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問(wèn)題，如何保證原來(lái)的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)。IE6以前的頁(yè)面大家都不會(huì)去寫(xiě)DTD，所以IE6就假定 如果寫(xiě)了DTD，就意味著這個(gè)頁(yè)面將采用對(duì)CSS支持更好的布局，而如果沒(méi)有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區(qū)別：總體會(huì)有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別。
a. 盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
b. 設(shè)置行內(nèi)元素的高寬：在Standards模式下，給等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效，而在quirks模式下，則會(huì)生效。
c. 設(shè)置百分比的高度：在standards模式下，一個(gè)元素的高度是由其包含的內(nèi)容來(lái)決定的，如果父元素沒(méi)有設(shè)置百分比的高度，子元素設(shè)置一個(gè)百分比的高度是無(wú)效的用
d. 設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會(huì)失效。
11、請(qǐng)闡述table的缺點(diǎn)
a. 太深的嵌套，比如table>tr>td>h3，會(huì)導(dǎo)致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
b. 靈活性差，比如要將tr設(shè)置border等屬性，是不行的，得通過(guò)td
c. 代碼臃腫，當(dāng)在table中套用table的時(shí)候，閱讀代碼會(huì)顯得異常混亂
d. 混亂的colspan與rowspan，用來(lái)布局時(shí)，頻繁使用他們會(huì)造成整個(gè)文檔順序混亂。
e. 不夠語(yǔ)義
參考《為什么說(shuō)table表格布局不好？》
12、簡(jiǎn)述一下src與href的區(qū)別
src用于替換當(dāng)前元素；href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫(xiě)，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置
href是Hypertext Reference的縮寫(xiě)，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接
公眾號(hào)【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java Python 大數(shù)據(jù) 區(qū)塊鏈 測(cè)試 PPT JS HTML 簡(jiǎn)歷 領(lǐng)取相關(guān)學(xué)習(xí)資料！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
