lt;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>21-jquery-css樣式操作的方法</title>
<!-- <script src="../static/js/jquery-3.6.0.js"></script>
<script>
$(function(){
})
</script> -->
<script src="../static/js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 逐個設置,一次只設置一個
// $("div").css("height", '100px'); // 設置div的高度為100
// $("div").css("width", "100px"); // 設置div的寬度為100
// $("div").css("background", "red"); // 設置div的背景為紅色
// 2. 鏈式設置
// 注意:鏈式操作如果大于3布建議分開, 因為可讀性就變差了
// $("div").css("height", '200px').css("width", "150px").css("background", "blue"); // 把div設置成高200,寬150,藍色背景
// 3.批量設置
$("div").css({
width: '300px',
height: '250px',
background: 'pink',
});
// 4.獲取css樣式值
let h = $("div").css("height") // 獲取div的高度并賦值給h
$("div").text(h) // 把h的值寫到div當中
})
</script>
</head>
<body>
<div></div>
</body>
</html>
近項目需求,寫了一個類似百度搜索框的功能。
把代碼整理了一遍,然后分享出來給大家看看,如果有不對的地方請多指教。
實現效果
使用的語言:html,css,JavaScript,jQuery
代碼部分
html部分:
js部分:
全部代碼:
果你是一名前端人員,你單單的使用jq插件顯然不夠,js在大多時候比較擱置,但你如果前端技術想要提升,那么js的精通對你顯得很重要,本文只是他到js的document與css。
1.Document與Element和TEXT是Node的子類。
Document:樹形的根部節點
Element:HTML元素的節點
TEXT:文本節點
>>HtmlElement與HtmlDocument
a:HtmlElement對象表示HTML中的一個個元素。
b:HtmlDocument對象表示 HTML 文檔樹的根。HTMLDocument 接口對 DOM Document 接口進行了擴展,定義 HTML 專用的屬性和方法。
>>HTML的DOM對象
a:DOM Event:Event 對象代表事件的狀態。
b:DOM Attribute:Attr 對象表示 HTML 屬性。
c:DOM Element:Element 對象表示 HTML 元素,Element 對象可以擁有類型為元素節點、文本節點、注釋節點的子節點。
d:DOM Document:每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。Document 對象是 Window 對象的一部分,可通過 window.document 屬性對其進行訪問#log span 與 #log>span的區別?
<div id="log">
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>
<div>
<span>Span4</span>
<span>Span5</span>
</div>
</div>
#log span的效果:
#log>span的效果:
2.CSS選擇器
與CSS選擇器的標準化一起的另外一個稱做"選擇器API"的W3C標準定義了獲取匹配一個給定選擇器的元素的JavaScript方法。該API的關鍵是Document方法querySelectorAll()。它接收包含一個CSS選擇器的字符串參數,返回一個表示文檔中匹配選擇器的所有元素的NodeList對象。
querySelectorAll()返回的NodeList對象并不是實時的:它包含在調用時刻選擇器所匹配的元素,不包括后續的通過JavaScript更改文檔的匹配元素。
querySelectorAll()強大到即使在沒有其的原生支持的瀏覽器中依舊可以使用CSS選擇器。它是一種終極的選取方法技術。
基于jQuery的Web應用程序使用一個輕便的,跨瀏覽器的和querySelectorAll()等效的方法,命名為$().
jQuery的CSS選擇器匹配代碼已經作為一個獨立的標準庫提出來并發布了,命名為Sizzle。
3.HTML屬性作為Element的屬性
表示HTML文檔元素的HTMLElement對象定義了讀寫屬性,他們映射了元素的HTML屬性。
例如:
var image=document.getElementById("my_image");
var imgurl=image.src;
可以使用<img>元素的HTMLElement對象的src屬性.
4.數據集屬性
有時候在HTML元素上綁定一些額外的信息。HTML5提供看一種方法。
任意一”data-*“為前綴的小寫的屬性名字都是合法的。
5.Web瀏覽器很擅長解析HTML,通常設置innerHTML效率非常高。但是:對innerHTML屬性使用”+=“操作符重復追加文本時效率低下,因為它既要序列化又要解析。
插入節點方法:appendChild()與insertBefore()的異同?
6.視口坐標與文檔坐標
視口坐標:指的是顯式文檔內容的那一部分(也即我們在瀏覽器中能看到的那部分區域),不包括瀏覽器的外殼元素,比如菜單欄,工具條等。
文檔坐標:指的是包含整個頁面的整個部分(也即我們在瀏覽器中能看的那部分區域以及需要依靠滾動條來滾動查看的區域)。
該書中提供了幾個實用的方法:
a:查詢窗口滾動條的位置
//查詢窗口滾動條的位置
functon getScrollOffsets(w){
w = w || window;
var sLeft,sTop;
if(w.pageXOffset != null) {
sLeft = w.pageXOffset;
sTop = w.pageYOffset;
return {x:sLeft,y:sTop};
}
b:查詢窗口的視口尺寸
//查詢窗口的視口尺寸
function getViewportSize(w){
w = w || window;
var cWidth,cHeight;
if(w.innerWidth != null){
cWidth = w.innerWidht;
cHeight = w.innerHeight;
return {w:cWidth,h:w.cHeight};
}
if(document.compatMode == "CSS1Compat"){
cWidth = document.documentElement.clientWidth;
cHeight = doument.documentElement.clientHeight;
return {w:cWidth,h:w.cHeight};
}else if(document.compatMode == "BackCompat"){
cWidth = document.body.clientWidth;
cHeight = doument.body.clientHeight;
return {w:cWidth,h:w.cHeight};
}
}
7.查詢元素的幾何尺寸
getBoundingClientRect()方法
具體見亂燉中的這篇文章:使用getBoundingClientRect()來獲取頁面元素的位置
需要注意的是:getBoundingClientRect這個方法不同于getElementByTagName()這樣的DOM方法返回的結果是實時的,但是getBoundingClientRect卻不是,它類似于一種靜態快照。用戶滾動的時候,并不會去實時更新。
getBoundingClientRect()與getClientRects()的區別?
8.判斷元素在某點
elementFromPoint()能夠用來判斷判定視口中的指定位置上有什么元素。
傳遞X與Y坐標(使用視口或窗口坐標而不是文檔坐標)
它有一個取代者,那就是target屬性。
9.滾動
Window的scrollBy()與scroll()和scrollTo()類似。
只是scrollBy的參數是相對的,并在當前滾動條的偏移量上增加。
如:
scrollIntoView()的使用?
offsetWidth()
offsetHeight()
offsetLeft()
offsetTop()
offsetParent()
clientWidth()
clientHeight()
clientLeft()
clientTop()
scrollWidth()
scrollHeight()
scrollLeft()
scrollTop()
Client他就是Web瀏覽器客戶端-專指它定義的窗口或視口。
10.HTML表單
服務器端程序是基于表單提交動作的
客戶端程序是基于事件的
JavaScript的From。
切圖網(qietu.com)是一家專門從事web前端開發的公司,專注we前端開發,關注用戶體驗,歡迎訂閱微信公眾號:qietuwang
*請認真填寫需求信息,我們會在24小時內與您取得聯系。