前端筆記整理
標籤分類
html標籤,頁面.<html lang="en"英語或zh-cn中文>
head標籤,不可見,對body內標籤的修飾,沒有body就沒有head
title標籤,頁面標題
meta標籤 聲明編碼
body標籤 能直接寫內容
img標籤 src='圖片地址'
a標籤 href="超連接地址"
ul無序列表
ol有序列表
dl自定義列表
table表格
p標籤 段落,上下加空白行以區分.文本級標籤,內部不能再嵌套塊級
div 普通塊級標籤,用的最多,用head修飾
hr單筆和,分割線
Form表單 action:交互內容提交地址
input:輸入 text普通文本. password密文
radio單選按鈕,跟選項是分開的.經過name屬性來分組.組內單選
checkbox 多選按鈕
input的type,submit按鈕可用來提交.放在form裏的普通button按鈕同效
file傳文件,date日期,
input的button屬性,是form裏的普通按鈕.
hidden隱藏reset重置
lable: for屬性,點擊lable的內容,for的id獲取焦點
textarea:文本框
select下拉式選擇框.
option每一個選項 selected默認選中
選擇器
#id 經過id選擇
span 經過標籤類型選
.自定義 經過標籤的class屬性選
div空格span 從div裏找全部span,
div>span,從div的第一層包含內找span
div+span,div挨着的span,必須是同級,中間不能隔其餘標籤.
div~span,div同級的,下面的span,弟弟選擇器.
div,span 全部的div和span 並集
div.span div中屬性爲span的,跟空格區別是,點後面是屬性名.交集
僞類選擇器
a:link a標籤訪問前
a:visited a標籤訪問後
a:active a標籤點擊時
input:focus 輸入框獲取焦點時
任意標籤:hover 鼠標浮動時
僞元素
p:first-letter p標籤的第一個字符
p:before 前綴加內容及樣式 p:after後綴加內容及樣式
選擇器優先級
行內>id選擇器>類選擇器>標籤選擇器>繼承
1000 100 10 1 0
全部的值能夠累加可是不進位
優先級若是相同,寫在後面的生效
div.a{
background-color: green !important; 提升樣式的優先級到最高
}
文本
text-align 文字的水平對齊
left 左對齊
center 居中
reght 右對齊
text-decoration 文本裝飾
none; 沒有下劃線
line-through; 中劃線
overline; 上劃線
underline; 下劃線
text-indent 文本縮進
text-indent: 2em; em單位是一個相對單位,相對當前字體大小的像素是1em
line-height 行高,設置行高=容器高度,文字自動垂直居中
line-height: 200px;
color:設置字體顏色
背景圖片
background-color: red; 在沒有背景圖片覆蓋的範圍顯示背景顏色
background-image: url('timg.jpg'); 設置背景圖片
background-repeat: no-repeat; 設置圖片不重複 repeat-x水平重複 repeat-y垂直重複
background-position: right top; 圖片的位置 左中右x 上中下y
/*left center right /top center bottom*/
background-attachment: fixed; 在窗口中固定圖片的位置
background:red url("timg.jpg") no-repeat left center; 把全部的設置綜合寫在background中
邊框的設置
width: 100px;
height: 100px;
/*border-color: tomato green gray yellow;*/
/*border-width: 1px 3px 5px 7px;*/
/*border-style: solid dotted dashed double;*/
/*一個值:上下左右
四個值:遵循順時針上右下左
三個值:上 右左 下
兩個值:遵循上下 左右
*/
/*border-top-style:solid ;*/ 單獨設置頂線的樣式(left,bottom,right)
/*border-left-style:solid ;*/ 單獨設置左邊線的樣式
/*border-top-color:red;*/ 單獨設置頂線顏色
border:yellow solid 10px; 統一設置邊框的顏色 樣式 寬度
塊和行內的概念\轉換
對於行內標籤來講不能設置寬和高 有些時候須要行內標籤也設置寬和高,須要進行行內-->塊,行內->行內塊 display的屬性值 : block塊 inline行內 inline-block行內快 none display: block; 獨佔一行而且能夠設置寬高 display: inline-block; 既能夠設置寬高又不會獨佔一行 行內\塊轉行內快 display: inline; 表示一個行內元素,不能設置寬高 display: none; 不只不顯示內容,連位置也不佔了
盒模型
border : 邊框的寬度
padding : 內邊距的距離
content : width height
背景包含的部分:padding + conntent
計算一個盒子的總大小: 寬width+2padding+2border 高height+2padding+border
外邊距 margin
上下的盒子若是設置bottom和top會致使塌陷,取兩個設置的最大值做爲外邊距
margin: 0 auto;表示左右居中(父盒子寬度,子盒子寬度)
分方向的設置
border-top border-right border-bottom border-left
padding-top padding-right padding-bottom padding-left
margin-top margin-right margin-bottom margin-left
給圖形設置圓角
border-radius: 5px;
列表樣式
在css中去掉列表的樣式
ul,li{
list-style: none;
}
浮動
float:left /right
浮動的元素會脫離標準文檔流,本來塊級元素就再也不獨佔整行了
而且在原頁面中也不佔位置了,以後的元素會擠到頁面上影響頁面的排版
清除浮動 clear:both
僞元素清除法:
.clearfix:after{
content: '';
clear: both;
display: block;
}
<body>
<div class="father clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="main">
主頁的內容
</div>
</body>
overflow超出部分
內容多餘標籤的大小 visible 可見(默認) hidden 超出部分隱藏 scroll 超出顯示滾動條
定位
position : relative /absolute /fixed
top:10px;
right:10px;
bottom:10px;
left:10px;
相對定位 :相對本身原來的位置移動,移動以後還佔據原來的位置
絕對定位 :絕對定位是相對於整個html頁面,不會佔據原來的位置,層級的提高
若是咱們設置了絕對定位的元素 的父元素 沒有設置position,那麼咱們對元素的全部設置都是基於整個頁面
若是設置了position,那麼子盒子的absolute位置會根據父盒子的位置定位
父相子絕:子元素設置的絕對位置會對應着祖級元素的相對位置
固定定位 :固定是相對於整個窗口的
z-index圖層值
用法說明: z-index 值表示誰壓着誰，數值大的壓蓋住數值小的， 只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。 從父現象：父親慫了，兒子再牛逼也沒用
opacity整個標籤的透明度
opacity: 0.5;調整d4對應的整個標籤的透明度是50%
.d4{
opacity: 0.5;
}
<div class="d4">
你好你好娃哈哈
<img src="timg.jpg" alt="">
</div>
內容回顧
css選擇器的優先級
行內(1000) > id(100) > 類(10) > 標籤(1) > 繼承(0)
顏色
rgb(255,255,255) #000000-#FFFFFF 單詞表示 rgba(255,255,255,0.5)
字體
font-family 設置"微軟雅黑","宋體" font-size 設置字體大小 默認的字體大小16px font-weight bold粗體
文本
text-align 對齊方式 left(默認) right center text-decoration 字體的劃線 none underline overline line-through line-height 設置行高 字體會自動在行高內垂直居中 text-indent 縮進em單位
背景
background-color :設置顏色
background-image :url('xxx.jpg')
background-repeat :no-repeat
background-position :水平位置 垂直位置 (left center right) (top center bottom)
background-attachment:fixed
background-size :調整背景圖片的大小
background:顏色 背景圖 是否重複 位置;
邊框
border-style:solid; 設置邊框樣式 border-color:顏色1 顏色2 顏色3 顏色4; border-width:10px; 設置邊框寬度 border: solid red 5px; border-top-style:dotted; border-top: solid red 5px; border-radius:邊框圓角
display
不顯示不佔位 :none 塊級元素 : block 行內元素 : inline 行內塊 : inline-block
盒模型
content : width height 內容
padding : 5px 內邊距
padding-top ...
border : 見上面
margin : 外邊距
margin-left ...
上下的盒子會塌陷 : 取上下間距之間的最大值
不設置border的父子盒子也會塌陷
更多的描述兄弟之間的關係,若是是父子之間的關係用padding來描述
浮動
float:left right
浮動起來的盒子會脫離標準文檔,且不在獨佔一行
父盒子不能被子盒子撐起來
清除浮動 : clear:both
僞元素清除法:
clearfix:after{
content:'';
clear:both;
display:block
}
overflow:hidden scroll auto
overflow
溢出部分如何處理? visible 默認 溢出了也會顯示 hidden 溢出部分隱藏 auto scroll 溢出以後顯示滾動條
定位
position : relative absolute fixed top: left: right: bottom: 相對定位 : 相對本身原來的位置定位,還佔據本身原來的位置 絕對定位 : 相對於有定位的父盒子/整個html界面的位置,不佔據原來的位置 固定定位 : 相對瀏覽器窗口的
z-index
表示的在頁面上標籤顯示的前後順序 1.值越大的越在前面顯示 2.設置的值沒有單位沒有範圍 3.浮動的盒子不能設置index 4.從父現象:父級的優先級不高,兒子的優先級再高也沒用
透明度opacity
opacity:0.5 是整個標籤的透明度
javascript
javascript包含:
ECMAscript js的一種標準化規範 標出了一些基礎的js語法
DOM document object model 文本對象模型 主要操做文檔中的標籤
BOM browser object model 瀏覽器對象模型 主要用來操做瀏覽器
js引入和script標籤
方式一:在html頁寫js代碼
<script>
alert('hello,world')
</script>
方式二: 引入js文件
<script src="first.js"></script>
輸入輸出
彈出框alert
alert('hello') 彈出框中的內容是"hello"
彈出輸入框
var inp = prompt('問句') 彈出輸入框,輸入的內容會被返回給inp
控制檯輸出
console.log(變量或值)
基礎的數據類型
查看類型
typeof 變量; typeof(變量);
數字number
整數 var a = 1 小數 var b = 1.237 保留小數 b.toFixed(2) //1.24
string 類型的經常使用方法
屬性 : length
方法:
trim() 去空白
a.concat('abc') a拼接'abc'串
charAt(索引) 給索引求字符
indexOf(字符) 給字符求索引
slice(start,end) 顧頭不顧尾,能夠用負數,取子串
.toLowerCase() 所有變小寫
.toUpperCase() 所有變大寫
.split(',',2) 根據(第一個參數)分隔符切割,切前多少個結果
boolean 布爾值
true : [] {}
false : undefined null NaN 0 ''
null 空和undefined未定義
null 表示空 boolean值爲false undefined 沒有定義 建立變量可是不賦值 boolean值爲false
內置對象類型
數組 Array
建立: var arr = ['a','b','c']; var arr2 = new Array(); 索引操做: arr[0] 查看 arr2[0] = 'alex' 賦值操做
Array經常使用的屬性和方法
屬性:length
方法:
.push(ele) 尾部追加元素
.pop() 獲取尾部的元素
.unshift(ele) 頭部插入元素
.shift() 頭部移除元素
.slice(start, end) 切片
.reverse() //在原數組上改的 反轉
.join(seq) //a1.join('+')，seq是鏈接符 將數組元素鏈接成字符串
.concat(val, ...) //連個數組合並,獲得一個新數組，原數組不變 鏈接數組
.sort() //排序
.splice() //參數：1.從哪刪(索引), 2.刪幾個 3.刪除位置替換的新元素(可多個元素) 刪除元素，並向數組添加新元素。
數據類型之間的轉換
string --> int
parseInt('123') //123
parseInt('123abc') //123
parseInt('abc') //NaN not a number
string --> float
parseFloat('1.233')
float/int --> String
var num = 123
String(123)
var str = num.toString()
任意類型 --> Boolean
Boolean(數據)
字符串和數字相加 --> 字符串
字符串和數字相減 --> 數字
運算符
賦值運算符
= += -= *= /= %=
比較運算符
> < >= <= == != 不比較類型 === !== 比較類型和值(經常使用)
算數運算符
+ - * / % ** ++ -- var a = 1 undefined var b = a++ // a=2 b=1 var c = ++a // a=3 c=3
邏輯運算符
&& 邏輯與 ||邏輯或 !邏輯非 true && true //true true || false //true !true //false
流程控制
if語句 if(條件){代碼}else if(條件2){代碼2}else{代碼3}css
case語句 if的變種,多選1. 遇條件開啓執行狀態,遇break開始執行. 遇default直接執行.html
var err_type = 'info'
switch(err_type) {
case 'warining':
console.log('警告');
break;
case 'error':
console.log('錯誤');
break;
default:
console.log('沒錯')
}
循環語句
whilejava
var i = 1; //初始化循環變量
while(i<=9){ //判斷循環條件
console.log(i);
i = i+1; //更新循環條件
}
forjquery
//方式一:
for(var i = 1;i<=10;i++){
console.log(i)
}
//方式二:
var arr = [1,2,3,4,5]
for (n in arr){
console.log(n)
}
三元運算符正則表達式
var 結果 = boolean表達式 ? 爲true返回的值:爲false返回的值
函數
function 函數名(參數){
函數體
return 返回值
}
函數名(參數)
//注意 : 傳遞的參數能夠和定義的個數不同,可是不要這麼寫
// 返回值只能有一個
//arguments僞數組
function add(){
console.log(arguments);
}
add(1,2,3,4)
function add(a,b){
console.log(arguments);
}
add(1,2,3,4)
匿名函數json
var add = function(){
console.log('hello,world');
}
//add()調用
自調用函數數組
(function(a,b){
console.log(a,b)
})(1,2)
基礎數據類型
number
整數和小數都屬於number類型 toFixed(2) 保留兩位小數
string
'字符串' "字符串"
屬性 :length
方法 :trim(),concat('str'),charAt(索引),indexOf(元素),slice(start,end),split(sep,返回前n個值)
toLowerCase(),toUpperCase()
json數據類型序列化
'{"key":18,"123":[1,2,3]}'
自定義對象 = JSON.parse(json字符串)
json字符串 = JSON.stingify(自定義對象)
正則的用法
建立一個正則:
var reg = RegExp('正則表達式') //注意,寫在字符串中全部帶\的元字符都會被轉義,應該寫做\\
var reg2 = /正則表達式/ //內部的元字符就不會轉義了
reg.test('待檢測的字符串') //若是字符串中含有符合表達式規則的內容就返回true,不然返回false
在字符串中應用正則
var exp = 'alex3714'
exp.match(/\d/) //只匹配從左到右的第一個
exp.match(/\d/g) //匹配全部符合規則的 返回一個數組
var exp2 = 'Alex is a big sb'
exp2.match(/a/) //只匹配小寫a
exp2.match(/a/i) //i表示不區分大小寫 A也會被匹配出來
exp2.match(/a/ig) //不區分大小寫並匹配全部
exp.search(/正則表達式/i) //不區分大小寫,從exp字符串中找出符合條件的子串的第一個索引位置
exp.split(/正則表達式/i,n) //不區分大小寫,根據正則切割,返回前n個結果
exp.replace(/正則/gi,'新的值') //i表示不區分大小寫,g表示替換全部,將符合正則條件的內容替換成新的值
Date對象
建立對象:
var dt = new Date() //獲取到當前時間
dt.toLocalString() //轉換成'2019/8/13 10:18:12'
dt.getFullYear() //年
dt.getMonth() //月 1月是0
dt.getday() //週中天 週日是0
dt.getDate() //月中天 1號是1
dt.getHours() //時 從0開始
dt.getMinutes() //分 從0開始
dt.getSeconds() //秒 從0開始
自定義時間:
var dt2 = new Date('2018/1/1 12:12:12') 1月1日
var dt2 = new Date(2018,1,1); 2月1日
面向對象(瞭解)
function Student(name,age){
this.stu_name = name
this.stu_age = age
}
Student.prototype.show = function(){
console.log(this.stu_name,this.stu_age)
}
var stu = Student('alex',84) // 實例化
stu.stu_name // 查看屬性
stu.stu_age
stu.show() // 調用方法
object.prototype.show = function(){
console.log(this.stu_name,this.stu_age)
}
DOM
整個文檔就是一棵樹
整個文檔是從上到下依次加載的
當加載到script標籤的時候,會有一個特殊的變量提高的解析方法,致使咱們後定義的函數能夠提早被調用
每個節點描述 : 父標籤 子標籤 兄弟節點
屬性
文本
標籤名
1.找到對應的標籤
2.給標籤綁定對應的事件,關係,內容等
3.操做對應的標籤
直接查找
var a = document.getElementById('baidu') //直接返回一個元素對象
var sons = document.getElementsByClassName('son') //返回元素組成的數組
sons[0] //獲取到一個標籤對象
var divs = document.getElementsByTagName('div') //返回元素組成的數組
間接查找
找父親
var a = document.getElementById('baidu')
var foodiv = a.parentNode //獲取到父節點的對象
找兒子
var foo= document.getElementById('foo')
foo.children //獲取全部的子節點,返回一個數組
foo.firstElementChild //獲取第一個子節點
foo.lastElementChild //獲取最後一個子節點
找兄弟
var son1 = document.getElementById('son1')
console.log(son1)
var son2 = document.getElementById('son2')
console.log(son2)
son1.nextElementSibling //找下一個兄弟 返回一個對象
son1.previousElementSibling //找上一個兄弟 返回一個對象
標籤的建立
var obj = document.createElement('標籤名') // a div ul li span
obj就是一個新建立出來的標籤對象
標籤的添加
父節點.appendChild(要添加的節點) //添加在父節點的兒子們以後 父節點.insertBefore(要添加的節點,參考子節點) //添加在父節點的某個兒子以前
標籤的刪除
父節點.removeChild(要刪除的子節點) 子節點1.parentNode.removeChile(子節點2)
標籤的替換
父節點.replaceChild(新標籤,舊兒子)
標籤的複製
節點.cloneNode() //只克隆一層 節點.cloneNode(true) //克隆本身和全部的子子孫孫 注意 :若是克隆出來的標籤的id是重複的,那麼修改以後才能應用到頁面上
節點的屬性操做
節點對象.getAttribute('屬性名')
節點對象.setAttribute('屬性名','屬性值')
節點對象.removeAttribute('屬性名')
節點對象.classList.add('類名')
節點對象.classList.remove('類名')
節點對象.classList.contains('類名')
節點對象.classList.toggle('類名')
節點對象.value = 值
節點對象.value查看值
節點對象.style.樣式屬性 = 值 設置樣式 全部帶中線的方法都要改變成駝峯命名
節點的文本操做
節點對象.innerText = '只能寫文字' 只識別文本,全部的標籤也當作文本識別 節點對象.innerHTML = '能夠放標籤' 能夠識別標籤
Math
floor ceil max min random abs round
事件
綁定方式:
<button id="btn">點擊一下</button>
方式一:
var btn = document.getElementById('btn')
btn.onclick = function () {
alert('點我幹嗎')
}
方式二:
btn.onclick = clik
function clik() {
alert('不要點')
}
方式三:
<button id="btn" onclick="clik()">點擊一下</button>
function clik() {
alert('不要點')
}
window對象
定時器瀏覽器
定時器方法
var tid = setInterval("fn()",n) 每隔n毫秒就執行fn函數一次
var tid = setTimeout("fn()",n) n毫秒以後執行fn函數一次
clearInterval(tid) 清除定時器
window的子對象 window.location
屬性: window.location.href 查看當前網頁的url window.location.href = 'http://www.baidu.com' 修改當前網頁的url,修改以後會跳轉 方法: window.location.reload() 刷新頁面
select的onchange事件
select對象.options.selectedindex 被選中的選項在options中的索引位置
常見事件
onclick() 單機事件 onmouseover() 鼠標懸浮 onmouseout() 鼠標離開 onscroll() 滾動軸移動 window.onscroll() onChange() 文本區域內內容變化 onfocus() 獲取焦點 onblur() 失去焦點
history對象
history.back() go(-1) //回到上一頁 history.go(0) //刷新 history.forward() go(1) //去下一頁
jQuery
$簡寫
jquery對象和dom對象的關係和轉換
jquery封裝了dom dom轉成jquery : jQuery(dom對象) $(dom對象) jquery轉成dom : jq對象[index]
jquery選擇器
標籤選擇器 *通用選擇器
$('#id') id選擇器
$('.box') 類選擇器
$('li') $('a') 標籤選擇器
$('*') 通用選擇器 全部的標籤
$('div.box') 交集選擇器
$('div,p,a')div,p並集選擇器
$('div li') 後代
$('div>ul>li')子代
$('.baidu+li')毗鄰
$('.baidu~li')弟弟
屬性選擇器
$('[屬性名]') 必須是含有某屬性的標籤
$('a[屬性名]') 含有某屬性的a標籤
$('選擇器[屬性名]') 選擇器加屬性名
$('選擇器[屬性名="aaaa"]') 屬性名是後面的屬性值
$('選擇器[屬性名$="xxx"]') 屬性值以xxx結尾的
$('選擇器[屬性名^="xxx"]') 屬性值以xxx開頭的
$('選擇器[屬性名*="xxx"]') 屬性值包含xxx
$('選擇器[屬性名1][屬性名2="xxx]') 擁有屬性1,且屬性二的值='xxx',符合前面選擇器要求的
jquery篩選器
$('選擇器:篩選器')
$('選擇器:first')
做用於選擇器選擇出來的結果
first 找第一個
last 最後一個
eq(index) 經過索引找
even 找偶數索引
odd 找奇數索引
gt(index) 大於某索引的
lt(index) 小於某索引的
not(選擇器) 不含 符合選擇器 要求的
has(選擇器) 後代中含有該選擇器要求的(找的不是後代,找的是自己)
表單篩選器
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':reset')
$(':button')
注意 : date type的input是找不到的
狀態篩選器
enabled$(':enabled') 能用的
disabled $(':disabled') 被鎖定不能用的
checked $(':checked')選中的,下拉式選框也算.
selected$(':selected') 下拉式選框
$(':checkbox:checked') 多選框能選的
$('input:checkbox:checked')
jquery的篩選器方法
:$('ul p').siblings() 找全部同級,兄弟
$('ul p').prev() 找上一個哥哥,前面選擇器每有一個標籤,就會找一個哥哥
$('ul p').prevAll() 找全部哥哥
$('ul p').prevUntil('選擇器') 從上往下找,找到這個哥哥就中止.
next() 找一個弟弟
nextAll() 找全部弟弟
nextUntil('選擇器') 找到這個弟弟就中止
parent() 找一個祖宗,選擇器裏若是有多個標籤,每個都會找到一個祖宗.
parents() 找全部直系祖宗
parentsUntil('選擇器') 這裏若是放body,就是找到body如下的大標籤.
children() 找全部兒子
children().first 第一個兒子.
篩選方法
first()
last()
eq(index)
not('選擇器') 去掉知足選擇器條件的
filter('選擇器')交集選擇器,在全部的結果中繼續找知足選擇器要求的
find('選擇器') 後代選擇器 找全部結果中符合選擇器要求的後代
has('選擇器') 經過後代關係找當代 後代中有符合選擇器要求的就把當代的留下
jq對象的循環問題
// 1.不要用for(i in li_list){}的方式循環一個jq對象
for(let i=0;i<li_list.length;i++){ //let 聲明的變量的做用域只在for循環中
console.log(i)
} jq對象中,除了找到的內容外,還有額外的內容. 因此直接for循環會有問題. jq提供了length方法,
等於獲取找到的內容長度.
事件的綁定
<body>
<button>點擊1</button>
<button>點擊2</button>
</body>
<script src="jquery.3.4.1.js"></script>
<script>
$('button').click(
function () {
alert('你點了我一下!')
}
)
</script>
標籤的文本操做
text()
$('li:first').text() // 獲取值
$('li:first').text('wahaha') // 設置值
$('li:last').html() // 獲取值
$('li:last').html('qqxing') // 設置值
$('li:first').html('<a href="http://www.mi.com">爽歪歪</a>') //a標籤
var a = document.createElement('a')
a.innerText = '我是AD鈣'
$('li:last').html(a) //a 是dom對象
var a2 = document.createElement('a')
var jqobj = $(a2)
jqobj.text('乳娃娃')
$('li:last').html(jqobj) //jqobj是jquery對象
標籤的操做
增長
父子關係:
追加兒子 :(父).append(子) (子).appendTo(父)
頭部添加 :(父).prepend(子) (子).prependTo(父)
兄弟關係:
添加哥哥 :參考點.before(要插入的) 要插入的.insertbefore(參考點)
添加弟弟 :參考點.after(要插入的) 要插入的.insertAfter(參考點)
若是被添加的標籤本來就在文檔樹中,就至關於移動
例子append
var li = document.createElement('li')
var jq = $(li).text('張藝興')
$('ul').append(jq)
var li = document.createElement('li')
var jq = $(li).text('張藝興')
$('ul').append(jq[0])
var li = document.createElement('li')
var jq = $(li).text('張藝興')
$('ul').append('<li>鹿晗</li>')
例子appendTo
var li = document.createElement('li')
var jq = $(li).text('張藝興')
jq.appendTo('ul')
var dom_ul = document.getElementsByTagName('ul')[0]
var li = document.createElement('li')
var jq = $(li).text('張藝興')
jq.appendTo(dom_ul)
var li = document.createElement('li')
var jq = $(li).text('張藝興')
jq.appendTo($('ul'))
對已經存在的內容進行添加 -- 移動
$('li:first').appendTo('ul')
$('li:last').prependTo('ul')
$('ul').prepend('<li>李東宇</li>')
$('<li>鄧帥</li>').prependTo('ul')
$('#l2').before('<li>李東宇</li>')
$('<li>李東宇222</li>').insertBefore('#l2')
$('#l2').after('<li>鄧帥</li>')
$('<li>鄧帥222</li>').insertAfter('#l2')
刪除 修改 克隆
刪除 : remove detach empty
remove : 刪除標籤和事件,被刪掉的對象作返回值
detach : 刪除標籤,保留事件,被刪掉的對象作返回值
empty : 清空內容標籤,本身被保留
修改 : replaceWith replaceAll
replaceWith : a.replaceWith(b) 用b替換a
replaceAll : a.replaceAll(b) 用a替換b
複製 : clone
var btn = $(this).clone() //克隆標籤但不能克隆事件
var btn = $(this).clone(true) //克隆標籤和事件
var obj = $('button').remove()
obj是button標籤,可是事件已經被刪除了
var a = document.createElement('a')
a.innerText = 'wahaha'
$(a).replaceAll('p')
$('p').replaceWith(a)
標籤的屬性操做
通用屬性
attr
獲取屬性的值
$('a').attr('href')
設置/修改屬性的值
$('a').attr('href','http://www.baidu.com')
設置多個屬性值
$('a').attr({'href':'http://www.baidu.com','title':'baidu'})
removeAttr
$('a').removeAttr('title') //刪除title屬性
若是一個標籤只有true和false兩種狀況,適合用prop處理
$(':checkbox:checked').prop('checked') //獲取值
$(':checkbox:checked').prop('checked',false) //表示取消選中
若是設置/獲取的結果是true表示選中,false表示取消選中
類的操做
添加類 addClass
$('div').addClass('red') //添加一個類
$('div').addClass('red bigger') //添加多個類
刪除類 removeClass
$('div').removeClass('bigger') //刪除一個類
$('div').removeClass('red bigger')
轉換類 toggleClass //有即刪 無即加
$('div').toggleClass('red')
$('div').toggleClass('red bigger')
value值的操做
$(input).val()
$(':text').val('值')
$(':password').val('值')
對於選擇框 : 單選 多選 下拉選擇
設置選中的值須要放在數組中 :
$(':radio').val([1])
$(':radio').val([1,2,3])
css樣式
css('樣式名稱','值')
css({'樣式名1':'值1','樣式名2':'值2'})
$('div').css('background-color','red') //設置一個樣式
$('div').css({'height':'100px','width':'100px'}) //設置多個樣式
滾動條
scrollTop() scrollLeft() $(window).scrollLeft() $(window).scrollTop()
盒子模型
內容寬高 : width和height 內容+padding : innerWidth和innerHeight 內容+padding+border :outerWidth和outerHeight 內容+padding+border+margin : outerWidth(true)和outerHeight(true) 設置值:變得永遠是content的值
表單操做
$(':submit').click(
function () {
return false
}
)
若是返回false不提交
若是返回true不提交
動畫
show系列
show hide toggle
slide滑動系列
slideUp slideDown slideToggle(時間,回調函數)
fade淡入淡出系列
fadeOut fadeIn fadeToggle
動畫的中止
stop 永遠在動畫開始以前,中止動畫
事件
事件綁定
// bind 參數都是選傳的,接收參數e.data
$('button').bind('click',{'a':'b'},fn)
function fn(e) {
console.log(e.data)
console.log(e.data.a)
}
$('button').bind('click',fn)
function fn(e) {
console.log('wahaha')
}
// 簡寫的事件名稱當作方法名
$('button').click({'a':'b'},fn)
function fn(e) {
console.log(e.data)
console.log(e.data.a)
}
$('button').click(fn)
function fn(e) {
console.log('wahaha')
}
解除綁定
$('button').unbind('click')
各類事件app
click(function(){...}) // 單機事件
blur(function(){...}) // 失去焦點
focus(function(){...}) // 得到焦點
change(function(){...}) // input框鼠標離開時內容改變觸發
keyup(function(){...}) // 按下的鍵盤觸發事件 27對應的是esc鍵 獲取鍵盤編號 e.keyCode
mouseover/mouseout // 若是給父元素綁定了over事件,那麼這個父元素若是有子元素,每一次進入子元素也 觸發父元素的over事件
mouseenter/mouseleave = hover(function(){...}) //鼠標的懸浮
事件冒泡
<style>
.outer{
width: 300px;
height: 300px;
background-color: red;
}
.inner{
width: 100px;
height: 100px;
background-color: forestgreen;
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
<script>
$('.outer').click(
function () {
alert('outer')
}
)
$('.inner').click(
function (e) {
alert('inner')
// e.stopPropagation() //阻止事件冒泡方法1
return false //阻止事件冒泡方法2
}
)
</script>
事件委託
$('div').on('click','button',{'a':'b'},function (event) {
console.log(event.data)
alert('不準點')
})
至關於把button元素的點擊事件委託給了父元素div
後添加進來的button也能擁有click事件
頁面的加載
document.onload = function(){
//js 代碼
}
window.onload = function () {
$('button').click(function () {
alert('不準點')
})
}
onload要等到全部的文檔 音視頻都加在完畢才觸發
onload只能綁定一次
//jquery的方式,只等待文檔加載完畢以後就能夠執行,在同一個html頁面上能夠屢次使用
$(document).ready(
function () {
//文檔加在完畢以後能作的事情
})
//jquery的方式(簡寫)*****
$(function () {
//文檔加在完畢以後能作的事情
})
//示例
$(function () {
$('button').click(function () {
alert('不準點')
})
})
//jquery中等待全部的資源包括視頻 音頻都加載完才執行function中的代碼,可使用屢次
$(window).ready(
function () {
alert('123')
})
each
<body>
<ul>
<li>選項一</li>
<li>選項二</li>
<li>選項三</li>
</ul>
</body>
<script>
$('li').each(
function (ind,dom) { //主動傳ind是每項的索引,dom是每一項的標籤對象
console.log(ind,dom)
}
)
</script>
相關文章
- 1. 前端規範整理筆記
- 2. 整理的前端Vue框架筆記
- 3. web前端開發筆記整理（五）
- 4. 前端面試筆記（整理）
- 5. 前端面試整理筆記一
- 6. web前端開發筆記整理（二）
- 7. 前端學習筆記整理一 HTML
- 8. web前端開發筆記整理（一）
- 9. web前端開發筆記整理（三）
- 10. web前端開發筆記整理（六）
- 更多相關文章...
- • ASP.NET Razor - 標記 - ASP.NET 教程
- • WSDL 端口 - WSDL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端規範整理筆記
- 2. 整理的前端Vue框架筆記
- 3. web前端開發筆記整理（五）
- 4. 前端面試筆記（整理）
- 5. 前端面試整理筆記一
- 6. web前端開發筆記整理（二）
- 7. 前端學習筆記整理一 HTML
- 8. web前端開發筆記整理（一）
- 9. web前端開發筆記整理（三）
- 10. web前端開發筆記整理（六）