jQuery操作標(biāo)簽class操作addClass(); // 添加指定的CSS類名。removeClass(); // 移除指定的CSS類名。hasClass(); // 判斷樣式存不存在toggleClass(); // 切換CSS類名，如果有就移除，如果沒有就添加。 CSS$("p").css("color", "red"); // 將所有p標(biāo)簽的字體設(shè)置為紅色位置操作$(window).scrollTop() // 獲取右側(cè)滾動(dòng)條距離頂端的位移量 文本值操作HTML代碼： html()// 取得第一個(gè)匹配元素的html內(nèi)容html(val)// 設(shè)置所有匹配元素的html內(nèi)容 文本值： text()// 取得所有匹配元素的內(nèi)容text(val)// 設(shè)置所有匹配元素的內(nèi)容 值： val()// 取得第一個(gè)匹配元素的當(dāng)前值val(val)// 設(shè)置所有匹配元素的值 屬性操作$('div').attr('style') // 獲取第一個(gè)標(biāo)簽的style屬性值$('div').attr('class','c1') // 批量設(shè)置單個(gè) class設(shè)置為c1$('div').attr({'name':'jason','pwd':123}) // 批量設(shè)置多個(gè)$('div').removeAttr('class') // 批量移除用于 prop() // 獲取屬性removeProp() // 移除屬性 文檔處理添加到指定元素 $(A).append(B)// 把B追加到A$(A).appendTo(B)// 把A追加到B 添加到指定元素 $(A).prepend(B)// 把B前置到A$(A).prependTo(B)// 把A前置到B 添加到指定元素外部的后面 $(A).after(B)// 把B放到A的后面$(A).insertAfter(B)// 把A放到B的后面 添加到指定元素外部的前面 $(A).before(B)// 把B放到A的前面$(A).insertBefore(B)// 把A放到B的前面 移除和清空元素 remove()// 從DOM中刪除所有匹配的元素。empty()// 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。 事件操作事件綁定
移除事件
克隆操作<button id="d1">是兄弟就來砍我!!!</button> <script>
$('#d1').click(function () {
$('body').append($(this).clone()) // 不克隆事件
$('body').append($(this).clone(true)) // 克隆事件
}) </script>懸浮事件$('#d1').hover(function () {alert(123)})
鼠標(biāo)懸浮上去和移開各自觸發(fā)一次
如果想要將懸浮和移開分開執(zhí)行不同的操作 需要寫兩個(gè)函數(shù)
$('#d1').hover( function () {alert(123)}, # 懸浮觸發(fā) function () {alert(123)} # 移走觸發(fā)
)值監(jiān)聽事件<input type="text" id="d1"><script>
$('#d1').on('input',function () { console.log($(this).val())
})</script>// 動(dòng)態(tài)返回輸入的值阻止后續(xù)事件'如果給已經(jīng)有事件的標(biāo)簽綁定事件 那么會(huì)依次執(zhí)行
'如果想要取消后續(xù)時(shí)間的執(zhí)行 可以使用兩種方式阻止1.方式1(推薦使用)
$('#d1').click(function () { alert(123) return false // 取消當(dāng)前標(biāo)簽對(duì)象后續(xù)事件的執(zhí)行
})2.方式2(自帶關(guān)鍵字)
$('#d1').click(function (e) { alert(123)
e.preventDefault()
})事件冒泡'在多個(gè)標(biāo)簽嵌套的并且都有相同事件的情況下 會(huì)出現(xiàn)逐級(jí)匯報(bào)的現(xiàn)象 方式1 return false 方式2 e.stopPropagation() 事件委托事件委托是通過事件冒泡的原理，利用父標(biāo)簽去捕獲子標(biāo)簽的事件。 '針對(duì)動(dòng)態(tài)創(chuàng)建的標(biāo)簽 提前寫好的事件默認(rèn)是無法生效的
$('body').on('事件類型','選擇器',function(){})
// 將body內(nèi)所有的點(diǎn)擊事件交給button標(biāo)簽處理
$('body').on('click','button',function(){})
// 如果body內(nèi)有多個(gè)button 不需要去給每一個(gè)都綁定一個(gè)事件
1.可以大量節(jié)省內(nèi)存占用，減少事件注冊(cè)，比如在ul上代理所有l(wèi)i的click事件。
2.可以實(shí)現(xiàn)當(dāng)新增子對(duì)象時(shí)無需再次對(duì)其綁定（動(dòng)態(tài)綁定事件）動(dòng)畫效果// 隱藏show([s,[e],[fn]]) // 顯示hide([s,[e],[fn]]) // 隱藏toggle([s],[e],[fn]) // 切換// 滑動(dòng)slideDown([s],[e],[fn]) // 向下滑動(dòng)slideUp([s,[e],[fn]]) // 向上滑動(dòng)slideToggle([s],[e],[fn]) // 切換// 淡入淡出fadeIn([s],[e],[fn]) // 淡入fadeOut([s],[e],[fn]) // 淡出fadeTo([[s],o,[e],[fn]]) // 切換fadeToggle([s,[e],[fn]]) // 修改淡化效果為給定的值（值介于 0 與 1 之間）。// 自定義（了解即可）animate(p,[s],[e],[fn]) 前端框架# bootstrap框架 內(nèi)部提供了很多漂亮的標(biāo)簽樣式和功能 我們只需要CV使用即可# bootstrap版本 推薦使用v3版本# 基本使用 必須先導(dǎo)入后使用 1.本地導(dǎo)入 2.cdn導(dǎo)入 bootcdn bootstrap需要使用jQuery來實(shí)現(xiàn)動(dòng)態(tài)效果 # 文件組成 bootstrap需要導(dǎo)入兩個(gè)文件 一個(gè)是css文件 一個(gè)是js文件 """使用前端框架 幾乎不需要自己寫css 只需要寫class即可""" 布局容器Bootstrap 需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè)
<div class="container"> // 兩邊有留白 ... </div>
<div class="container-fluid"> // 沒有留白 ... </div> 柵格系統(tǒng)class = 'row' 默認(rèn)開設(shè)一行均分12份class = 'col-md-n' 指定需要幾份(電腦屏幕) // 柵格參數(shù)可以做到響應(yīng)式布局xs sm md lg...如果一行十二份用不完 可以調(diào)整位置 col-md-offset-3 表格樣式參考官網(wǎng)即可 有樣式有源碼 拷貝使用即可# 表格樣式class="table table-hover table-striped table-bordered"# 單元格顏色class="active"class="success"class="warning"class="danger"class="info" 表單樣式.pull-left 左浮 .pull-right 右浮class='form-control'針對(duì)radio和checkbox不能加!!! 按鈕與圖片# 按鈕樣式class = 'btn'# 按鈕顏色<a href="" class="btn btn-info">言多必失</a> <a href="" class="btn btn-danger">言多必失</a> <a href="" class="btn btn-warning">言多必失</a> <a href="" class="btn btn-primary">言多必失</a> <a href="" class="btn btn-success">言多必失</a># 按鈕尺寸<a href="" class="btn btn-success btn-sm">言多必失</a> <a href="" class="btn btn-success btn-lg">言多必失</a> <a href="" class="btn btn-success btn-block">言多必失</a> 圖標(biāo)樣式<span class="glyphicon glyphicon-user"></span># 更多圖標(biāo)http://www./ 補(bǔ)充學(xué)習(xí)編程，一定要會(huì)看官方文檔，不僅是bootstrap框架 |
|
|
