addClass(); // 添加指定的CSS類名。removeClass(); // 移除指定的CSS類名。hasClass(); // 判斷樣式存不存在toggleClass(); // 切換CSS類名,如果有就移除,如果沒有就添加。
$("p").css("color", "red"); // 將所有p標簽的字體設置為紅色
$(window).scrollTop() // 獲取右側滾動條距離頂端的位移量
HTML代碼:
html()// 取得第一個匹配元素的html內容html(val)// 設置所有匹配元素的html內容
文本值:
text()// 取得所有匹配元素的內容text(val)// 設置所有匹配元素的內容
值:
val()// 取得第一個匹配元素的當前值val(val)// 設置所有匹配元素的值
$('div').attr('style') // 獲取第一個標簽的style屬性值$('div').attr('class','c1') // 批量設置單個 class設置為c1$('div').attr({'name':'jason','pwd':123}) // 批量設置多個$('div').removeAttr('class') // 批量移除
用于checkbox
和radio
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()// 刪除匹配的元素集合中所有的子節點。
.on( events [, selector ],function(){})
events: 事件
selector: 選擇器(可選的)
function: 事件處理函數
jQuery對象.click(function(){}) jQuery對象.change(function(){}) jQuery綁定事件有兩種方式 $('#d1').click(function(){}) $('#d1').on('click',function(){}) 有時候第一種綁定事件的方式無法生效 那么就使用第二種
.off( events [, selector ][,function(){}])
off()
方法移除用 .on()
綁定的事件處理程序。
events: 事件
selector: 選擇器(可選的)
function: 事件處理函數
<button id="d1">是兄弟就來砍我!!!</button> <script> $('#d1').click(function () { $('body').append($(this).clone()) // 不克隆事件 $('body').append($(this).clone(true)) // 克隆事件 }) </script>
$('#d1').hover(function () {alert(123)}) 鼠標懸浮上去和移開各自觸發一次 如果想要將懸浮和移開分開執行不同的操作 需要寫兩個函數 $('#d1').hover( function () {alert(123)}, # 懸浮觸發 function () {alert(123)} # 移走觸發 )
<input type="text" id="d1"><script> $('#d1').on('input',function () { console.log($(this).val()) })</script>// 動態返回輸入的值
'如果給已經有事件的標簽綁定事件 那么會依次執行 '如果想要取消后續時間的執行 可以使用兩種方式阻止1.方式1(推薦使用) $('#d1').click(function () { alert(123) return false // 取消當前標簽對象后續事件的執行 })2.方式2(自帶關鍵字) $('#d1').click(function (e) { alert(123) e.preventDefault() })
'在多個標簽嵌套的并且都有相同事件的情況下 會出現逐級匯報的現象 方式1 return false 方式2 e.stopPropagation()
事件委托是通過事件冒泡的原理,利用父標簽去捕獲子標簽的事件。
'針對動態創建的標簽 提前寫好的事件默認是無法生效的 $('body').on('事件類型','選擇器',function(){}) // 將body內所有的點擊事件交給button標簽處理 $('body').on('click','button',function(){}) // 如果body內有多個button 不需要去給每一個都綁定一個事件 1.可以大量節省內存占用,減少事件注冊,比如在ul上代理所有li的click事件。 2.可以實現當新增子對象時無需再次對其綁定(動態綁定事件)
// 隱藏show([s,[e],[fn]]) // 顯示hide([s,[e],[fn]]) // 隱藏toggle([s],[e],[fn]) // 切換// 滑動slideDown([s],[e],[fn]) // 向下滑動slideUp([s,[e],[fn]]) // 向上滑動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框架 內部提供了很多漂亮的標簽樣式和功能 我們只需要CV使用即可# bootstrap版本 推薦使用v3版本# 基本使用 必須先導入后使用 1.本地導入 2.cdn導入 bootcdn bootstrap需要使用jQuery來實現動態效果 # 文件組成 bootstrap需要導入兩個文件 一個是css文件 一個是js文件 """使用前端框架 幾乎不需要自己寫css 只需要寫class即可"""
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container
容器。我們提供了兩個作此用處的類。注意,由于 padding
等屬性的原因,這兩種 容器類不能互相嵌套。
.container
類用于固定寬度并支持響應式布局的容器。
<div class="container"> // 兩邊有留白 ... </div>
.container-fluid
類用于 100% 寬度,占據全部視口(viewport)的容器。
<div class="container-fluid"> // 沒有留白 ... </div>
class = 'row' 默認開設一行均分12份class = 'col-md-n' 指定需要幾份(電腦屏幕) // 柵格參數可以做到響應式布局xs sm md lg...如果一行十二份用不完 可以調整位置 col-md-offset-3
參考官網即可 有樣式有源碼 拷貝使用即可# 表格樣式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'針對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>
<span class="glyphicon glyphicon-user"></span># 更多圖標http://www.fontawesome.com.cn/
學習編程,一定要會看官方文檔,不僅是bootstrap框架