精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
jQuery+bootstrap
userphoto

2023.03.19 湖南

關注

jQuery操作標簽

class操作

addClass(); // 添加指定的CSS類名。removeClass(); // 移除指定的CSS類名。hasClass(); // 判斷樣式存不存在toggleClass(); // 切換CSS類名,如果有就移除,如果沒有就添加。

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')  // 批量移除

用于checkboxradio

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()// 刪除匹配的元素集合中所有的子節點。

事件操作

事件綁定

  1. .on( events [, selector ],function(){})

  • events: 事件

  • selector: 選擇器(可選的)

  • function: 事件處理函數

    jQuery對象.click(function(){})
    jQuery對象.change(function(){})
    
    jQuery綁定事件有兩種方式
    	$('#d1').click(function(){})
    	$('#d1').on('click',function(){})
    有時候第一種綁定事件的方式無法生效 那么就使用第二種

移除事件

  1. .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框架
本站僅提供存儲服務,所有內容均由用戶發布,如發現有害或侵權內容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
day58——jQuery事件特性、bootstrap基本使用
JS組件系列——Bootstrap組件福利篇:幾款好用的組件推薦
JQuery中的事件以及動畫
bootstrap中多個modal彈出的問題解決方案
基于jquery,bootstrap數據驗證插件bootstrapValidator 教程
30分鐘快速掌握Bootstrap
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯系客服!

聯系客服

主站蜘蛛池模板: 嵊泗县| 肃北| 荆门市| 拉孜县| 永城市| 洮南市| 抚顺市| 宾川县| 平果县| 东台市| 垫江县| 兰西县| 包头市| 金阳县| 马鞍山市| 岫岩| 临桂县| 恭城| 内黄县| 银川市| 浠水县| 洛浦县| 高淳县| 凭祥市| 黑河市| 读书| 铜梁县| 大厂| 罗江县| 措美县| 汪清县| 汤阴县| 景洪市| 彩票| 青田县| 磐安县| 洛南县| 通辽市| 宜兴市| 洪洞县| 铅山县|