css基礎(chǔ)選擇器的種類(lèi),dom操作?
文檔對(duì)象模型( DOM, Document Object Model )主要用于對(duì)HTML和XML文檔的內(nèi)容進(jìn)行操作。DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù),通過(guò)對(duì)節(jié)點(diǎn)進(jìn)行操作,實(shí)現(xiàn)對(duì)文檔內(nèi)容的添加、刪除、修改、查找等功能。
一、DOM樹(shù)
DOM樹(shù)有兩種,分別為節(jié)點(diǎn)樹(shù)和元素樹(shù)。
節(jié)點(diǎn)樹(shù):把文檔中所有的內(nèi)容都看成樹(shù)上的節(jié)點(diǎn);
元素樹(shù):僅把文檔中的所有標(biāo)簽看成樹(shù)上的節(jié)點(diǎn)。
二、DOM常用操作
2.1 查找節(jié)點(diǎn)
document.getElementById('id屬性值');
返回?fù)碛兄付╥d的第一個(gè)對(duì)象的引用
document/element.getElementsByClassName('class屬性值');
返回?fù)碛兄付╟lass的對(duì)象集合
document/element.getElementsByTagName('標(biāo)簽名');
返回?fù)碛兄付?biāo)簽名的對(duì)象集合
document.getElementsByName('name屬性值');
返回?fù)碛兄付Q(chēng)的對(duì)象結(jié)合
document/element.querySelector('CSS選擇器');
僅返回第一個(gè)匹配的元素
document/element.querySelectorAll('CSS選擇器');
返回所有匹配的元素
document.documentElement
獲取頁(yè)面中的HTML標(biāo)簽
document.body
獲取頁(yè)面中的BODY標(biāo)簽
document.all['']
獲取頁(yè)面中的所有元素節(jié)點(diǎn)的對(duì)象集合型
2.2 新建節(jié)點(diǎn)
document.createElement('元素名');
創(chuàng)建新的元素節(jié)點(diǎn)
document.createAttribute('屬性名');
創(chuàng)建新的屬性節(jié)點(diǎn)
document.createTextNode('文本內(nèi)容');
創(chuàng)建新的文本節(jié)點(diǎn)
document.createComment('注釋節(jié)點(diǎn)');
創(chuàng)建新的注釋節(jié)點(diǎn)
document.createDocumentFragment( );
創(chuàng)建文檔片段節(jié)點(diǎn)
2.3 添加新節(jié)點(diǎn)
parent.appendChild( element/txt/comment/fragment );
向父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)后追加新節(jié)點(diǎn)
parent.insertBefore( newChild, existingChild );
向父節(jié)點(diǎn)的某個(gè)特定子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)
element.setAttributeNode( attributeName );
給元素增加屬性節(jié)點(diǎn)
element.setAttribute( attributeName, attributeValue );
給元素增加指定屬性,并設(shè)定屬性值
css的命名規(guī)則?
一、網(wǎng)頁(yè)制作中規(guī)范使用DIV+CSS命名規(guī)則,可以改善優(yōu)化功效特別是團(tuán)隊(duì)合作時(shí)候可以提供合作制作效率。
所有的命名最好都小寫(xiě)
屬性的值一定要用雙引號(hào)("")括起來(lái),且一定要有值如class="DIVcss",id="divcss"
每個(gè)標(biāo)簽都要有開(kāi)始和結(jié)束,且要有正確的層次,排版有規(guī)律工整
空元素要有結(jié)束的tag或于開(kāi)始的tag后加上"/"
表現(xiàn)與結(jié)構(gòu)完全分離,代碼中不涉及任何的表現(xiàn)元素,如style、font、bgColor、border等
<h1>到<h5>的定義,應(yīng)遵循從大到小的原則,體現(xiàn)文檔的結(jié)構(gòu),并有利于搜索引擎的查詢。
給每一個(gè)表格和表單加上一個(gè)唯一的、結(jié)構(gòu)標(biāo)記id
給圖片加上alt標(biāo)簽
盡量使用英文命名原則
盡量不縮寫(xiě),除非一看就明白的單詞
二、相對(duì)網(wǎng)頁(yè)外層重要部分CSS樣式命名:
外套 wrap ----------------用于最外層
頭部 header --------------用于頭部
主要內(nèi)容 main ------------用于主體內(nèi)容(中部)
左側(cè) main-left ------------左側(cè)布局
右側(cè) main-right -----------右側(cè)布局
導(dǎo)航條 nav -----------------網(wǎng)頁(yè)菜單導(dǎo)航條
內(nèi)容 content ---------------用于網(wǎng)頁(yè)中部主體
底部 footer -----------------用于底部
DIV+CSS命名小結(jié):
無(wú)論是使用“.”(小寫(xiě)句號(hào))選擇符號(hào)開(kāi)頭命名,還是使用“#”(井號(hào))選擇符號(hào)開(kāi)頭命名都無(wú)所謂,但我們最好遵循。
主要的、重要的、特殊的、最外層的盒子用“#”(井號(hào))選擇符號(hào)開(kāi)頭命名,其它都用“.”(小寫(xiě)句號(hào))選擇符號(hào)開(kāi)頭命名,同時(shí)考慮命名的CSS選擇器在HTML中重復(fù)使用調(diào)用。
通常我們最常用主要命名有:
wrap(外套、最外層)、header(頁(yè)眉、頭部)、nav(導(dǎo)航條)、menu(菜單)、title(欄目標(biāo)題、一般配合h1\h2\h3\h4標(biāo)簽使用)
、content (內(nèi)容區(qū))、footer(頁(yè)腳、底部)、logo(標(biāo)志、可以配合h1標(biāo)簽使用)、banner(廣告條,一般在頂部)、copyRight(版權(quán))。
css3和css一樣嗎?
CSS3是CSS的子集,CSS3是最新的標(biāo)準(zhǔn),提供了很多好用的新屬性,提升了網(wǎng)頁(yè)的表現(xiàn)性。
CSS3提供了更好用的選擇器最新的CSS3中,對(duì)偽類(lèi)、偽元素選擇器做了嚴(yán)格的規(guī)范。有了偽類(lèi)后,不用在div標(biāo)簽里面添加額外的元素完成一些DOM操作,可以通過(guò)::before,::after完成,代碼簡(jiǎn)潔明了。對(duì)于鼠標(biāo)的操作,也可以通過(guò)::hover等類(lèi)似的操作完成。非常高效。還有::first–child等類(lèi)似的選擇器去操作子元素。
CSS3使動(dòng)畫(huà)效果越來(lái)越方便css3里面通過(guò)animation來(lái)完成動(dòng)畫(huà),設(shè)置@keyframes即可,一些輕量級(jí)的動(dòng)畫(huà)不必再通過(guò)js完成。
CSS3完成圓角、陰影美化更方便以前的css完成類(lèi)似的功能只能通過(guò)圖片做背景,現(xiàn)在只需要border-radius、boxshadow即可。非常高效簡(jiǎn)潔。
CSS3提供了全新的盒模型這個(gè)特性十分有用。原來(lái)的盒模型width=content.+border+padding。你規(guī)定了width.每次都要自己計(jì)算,現(xiàn)在有了boder-box不用這么麻煩了。
CSS3的flex布局是最強(qiáng)大的IE已死,不需要再考慮它的兼容性!!!用flex布局,節(jié)省很多時(shí)間,節(jié)省的時(shí)間可以學(xué)很多東西,而不是浪費(fèi)時(shí)間去適應(yīng)落后的ie!!!
還有很多好用的css3特性,這個(gè)版本提供了巨大的生產(chǎn)力!!!很感謝它,期待下一個(gè)grid布局~
以上是我的看法~
css和jquery有什么區(qū)別?
jQuery
jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架,是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)(或JavaScript框架)。jQuery設(shè)計(jì)的宗旨是“write Less,Do More”,即倡導(dǎo)寫(xiě)更少的代碼,做更多的事情。它封裝JavaScript常用的功能代碼,提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式,優(yōu)化HTML文檔操作、事件處理、動(dòng)畫(huà)設(shè)計(jì)和Ajax交互。
jQuery的核心特性可以總結(jié)為:具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口;具有高效靈活的css選擇器,并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展;擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
CSS (層疊樣式表)
層疊樣式表(英文全稱(chēng):Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè),還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制,支持幾乎所有的字體字號(hào)樣式,擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。