HTML-CSS-JS-JQ經常使用知識點總結

時間 2019-11-09

標籤 html css 經常使用知識總結欄目 HTML 简体版

原文原文鏈接

html:展現
文件標籤:
<html>
<head>
<title></title>
<meta>
<link>
<style></style>
</head>
<body></body>
</html>
排版標籤:
p 段落
hr 分割線
br 換行javascript

字體標籤:
<font></font>
h1~h6 標題標籤css

b strong
i
圖片標籤:
<img src="圖片的路徑" alt="替代文字" width="" height=""/>
超連接標籤
<a href="跳轉的路徑" target="在那裏打開">xx</a>
列表標籤
<ul></ul>
<ol></ol>
子標籤
<li></li>
表格★
<table border="1">
<tr>
<td></td>
</tr>
</table>html

td的重要屬性:
colspan:列合併
rowspan:行合併java

表單標籤:★
表單做用:收集用戶信息
form:
常見的屬性:
action:設置提交路徑
method:提交方式
get和post
常見的子標籤:
input
select
textareajquery

input標籤:
屬性:
type取值:(10)
text:文本框
password:密碼
radio:單選框
checkbox:多選框
file:文件框正則表達式

submit:提交
reset:重置
button:普通按鈕數組

hidden:隱藏域
image:圖片提交
name屬性:
1.提交到服務器
2.將單選框或者複選框設置爲一組瀏覽器

select:下拉選
格式:
<select name="">
<option>-請選擇-</option>
<option value="">展現的信息</option>
</select>服務器

textarea:文本域
格式:
<textarea rows="" cols="">默認值</textarea>app

默認值:
text password:設置value屬性
radio checkbox:設置 checked="checked"屬性
select:在option上設置 selected="selected"屬性
value能夠設置按鈕的展現文字

框架:
frameset:框架集
經常使用屬性:
cols:
rows:
經常使用子標籤:
frame
frame:
經常使用屬性:
src:展現的頁面
name:給當前的frame起個名字方便a標籤使用

塊標籤:div+css佈局
div
span

css:★
層疊樣式表:渲染
格式:
選擇器:{屬性:值;屬性1:值1}
html和css的整合
方式1:內斂樣式表經過標籤的style屬性
<xxx style="..."/>
方式2:內部樣式表經過head的style子標籤
<style>....</style>
方式3:外部樣式表經過link標籤導入
<link...>

選擇器:
id選擇器 #id值
class選擇器 .class值
元素選擇器標籤名

屬性選擇器標籤名[屬性="值"]
後代選擇器
選擇器後代選擇器
錨僞類

字體文本背景列表(list-style-type:none) 浮動:float
清除浮動(分類) clear
顯示(分類) display: none block inline
框模型:內邊距邊框外邊距

js:javascript 腳本直接解釋就能夠
js和html整合:
方式1:在html頁面中
<script></script>
方式2:外部的js文件
<script src=""></script>
js組成部分:
ECMAScript:語法
BOM:瀏覽器對象模型
DOM:文檔對象模型

基礎語法:
var 變量名=值;
數據類型:
原始類型
Undefined Null String Number Boolean
經過typeof判斷屬於那種類型
引用類型
Number Boolean
★String
屬性:length
方法:
substring
★Array
屬性:length
方法:
join(分隔符):打印數組
Math
Date
RegExp
直接量語法:
/正則表達式/
方法:
test()
全局
decodeURI
encodeURI

eval()
////////////////////////
函數:
function 函數名(參數列表){
函數體
}

匿名函數:
function(){....}

事件:
常見事件:
焦點:
onfocus
onblur
表單:
onsubmit
onchange
頁面元素加載
onload
單擊
onclick
綁定事件:
方式1:經過標籤的事件屬性
<xxx onxxx="函數(參數)"/> 參數如果:this 將當前的dom對象傳遞給函數
方式2:派發事件
dom對象.onxxx=function(){...}

bom
window:窗口
經常使用屬性:
window.location

經常使用方法:
消息框
alert() confirm() prompt()
定時器
setInterval()
setTimeout()
打開關閉 open close
location:定位
location.href;獲取當前的url
location.href="..";設置url 至關於a標籤
history:歷史
go()

dom
節點(Node)
元素節點
屬性節點
文本節點

文檔節點
獲取其餘節點
document.getElementById("id值"):一個元素
document.getElementsByTagName("標籤名"):多個
document.getElementsByClassName("class值")
document.getElementsByName("name值")
操做屬性
dom對象.屬性:
例如
dom對象.value;
dom對象.value="";
dom對象.style.css屬性="值";
操做標籤體:
dom對象.innerHTML;獲取
dom對象.innerHTML="";設置

jquery:
js類庫:對原生js常見的方法和對象進行封裝,方便使用
html和jquery整合:
經過script標籤src屬性
獲取jquery對象:
$("選擇器") jQuery("選擇器")
dom對象和jquery對象轉換
dom>>>jquery $(dom對象)
jquery>>>dom
方式1:
jquery對象[index]
方式2:
jquery對象.get(index)
頁面載入:
$(document).ready(function(){....})
$(function(){ ...})
事件和js中的事件同樣:把on去掉便可
$("選擇器").xxx(function(){...})
選擇器:
$("#id") $(".class") $("元素") $("[屬性]") $("[屬性='值']")
a b: 後代 a>b:孩子 a+b:大弟弟 a~b:全部弟弟
:first :last :odd :even :eq(index)..
:has('選擇器')
:hidden :visible
:input
:checked :selected
屬性和css操做:
attr|prop
prop("屬性"):獲取
prop("屬性","值"):設置一個
prop({
"":"",
"":""
}):設置多個