11月17日学习内容整理:jquery文档处理,事件细讲,动画
生活随笔
收集整理的這篇文章主要介紹了
11月17日学习内容整理:jquery文档处理,事件细讲,动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、文檔處理:下面舉例中的B可以是標簽也可以是選擇器也可以是字符串
》》》添加到指定元素內部的后面
$(A).append(B) // 把B放到A內部元素的最后,A是父節點
$(A).appendTo(B) // 把A放到B內部元素的最后,B是父節點
兩者只是順序不一樣,帶to的括號里是父元素
?
》》》添加到指定元素內部的前面$(A).prepend(B) // 把B放到A內部元素的最前面,A是父節點 $(A).prependTo(B) // 把A放到B內部元素的最前面,B是父節點
注意只是放的順序不一樣
?
》》》添加到指定元素外部的后面
$(A).after(B) // 把B放到A外部的最后面,A是參照節點 $(A).insertAfter(B) // 把A放到B外部的最后面,B是參照節點
?
》》》添加到指定元素外部的前面$(A).before(B) // 把B放到A外部的最前面 $(A).insertBefore(B) // 把A放到B外部的最前面
?
》》》移除元素jquery對象.remove()刪除掉所有匹配上的元素 》》》清空元素
jquery對象.empty() // 刪除匹配的元素集合中所有的子節點,就是把匹配元素包含的內容全部刪除,并不包括匹配元素本身
?
》》》替換元素A.replaceWith(B) ? ? A被B代替 A.replaceAll(B) ? ? ? ?B被A代替?
?
?
?
》》》克隆元素:通常克隆完后我們都會把克隆元素放到某一個位置上,就用上面幾種元素位置的方法jquery對象.clone() ? 只復制匹配的元素,它綁定的事件不復制 jquery對象.clone(true) 不光復制元素連帶綁定事件也復制 二、事件 1、綁定事件 》》》jquery對象.事件名(function(){ 執行語句; }) 》》》jquery對象.on("事件名",function(){ 執行語句; }) 2、常用事件 》》》點擊:click 》》》獲取焦點:focus 》》》失去焦點:blur 》》》select標簽選中的內容改變時:change 》》》按鍵彈起時觸發:keyup 3、事件委托:就是通過事件冒泡的原理,利用父標簽去觸發子標簽的事件。 父節點.on("事件名","選擇器",function(){ 執行語句; }) 選擇器就是用來匹配父節點要委托的子節點
?
4、阻止后續事件繼續發生:return false 5、事件綁定的時機:要等整篇文檔都加載完后再去執行綁定事件的操作,當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。這是事件模塊中最重要的一個函數,因為它可以極大地提高web應用程序的響應速度 》》》寫法一:我們通常在用的 $(document).ready(function(){ 這里去寫綁定事件的語句}) 》》》寫法二:簡寫,一般不用這個 $(function(){ 執行語句; }) 》》》》》》》》補充: (1)jquery對象.length ? ? 獲取匹配元素的個數
?
(2).data方法:在匹配元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。 》》》通俗的說就是在匹配的元素上存儲任意數據類型的值 》》》用法: 賦值::::data(key,value)key可以是標簽也可以是自己定義一個名字,value可以是任意數據類型,保存一個jquery對象都可以 取值::::data(key)就可以取到保存的value值,這里要注意還是返回第一個匹配元素的value值 舉例:?
三、動畫:當作方法使用 》》》基本 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]]) ? 呈現相反的效果 3000和5000代表持續時間,單位毫秒,0.6和0.3代表透明度?
》》》自定義 animate(p,[s],[e],[fn]) 3000是持續時間,設置圖片邊框寬度的漸變動畫?
?
轉載于:https://www.cnblogs.com/wanghl1011/articles/7851373.html
總結
以上是生活随笔為你收集整理的11月17日学习内容整理:jquery文档处理,事件细讲,动画的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: CentOS上安装skype
- 下一篇: OEL7.2下Oracle11.2.0.