HTML-CSS-JS-JQ常用知識點總結
html:展示
文件 標籤:
<html>
<head>
<title></title>
<meta>
<link>
<style></style>
</head>
<body></body>
</html>
排版標籤:
p 段落
hr 分割線
br 換行
字體標籤:
<font></font>
h1~h6 標題標籤
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>
td的重要屬性:
colspan:列合併
rowspan:行合併
表單標籤:★
表單作用:收集用戶信息
form:
常見的屬性:
action:設置提交路徑
method:提交方式
get和post
常見的子標籤:
input
select
textarea
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>
默認值:
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({
"":"",
"":""
}):設置多個
removeAttr|removeProp(屬性)
addClass("class名稱")
removeClass("class名稱")
css: 針對style屬性
css("屬性"):
css("屬性","值"):
css({
"":"",
"":""
}):設置多個
height() width()
對value屬性 標籤體的操作
xxx():獲取
xxx("笑嘻嘻的說法"):設置
val():
html():
text():
對文檔操作:
內部插入
append
prepend
外部插入
after
before
刪除
empty()清空
remove()刪除
效果:
hide() show() toggle()
滑入滑出
slideDown() slideUp()
淡入淡出
fadeIn() fadeOut()
遍歷
方式1:
jquery對象.each(function(){});
方式2:
$.each(jquery對象,function(){});
備註：由於個人原因，本博客暫停更新。如有問題可聯繫本人，本人提供技術指導、學習方向、學習路線。本人微信wlp1156107728(添加註明來意) QQ1156107728(添加註明來意)