添加元素的注意问题 复习 介绍 元素的创建 元素添加的方法 元素移除的方法
生活随笔
收集整理的這篇文章主要介紹了
添加元素的注意问题 复习 介绍 元素的创建 元素添加的方法 元素移除的方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
添加元素的注意問題
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>#dv1 {width: 200px;height: 200px;border: 2px solid red;margin-bottom: 20px;}#dv2 {width: 200px;height: 200px;border: 2px solid green;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("#btn").click(function(){// 把第一個div中的p標簽加入到第二個div中// $("#dv2").append($("#dv1>p"));// $("#dv1>p").appendTo($("#dv2"));$("#dv1>p").clone().appendTo($("#dv2"));// 獲取的元素通過append方法添加到另一個元素中的時候,類似于剪切// });});</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv1"><p>我是快樂的</p> </div> <div id="dv2"></div></body> </html>復習
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>/*** 復習:** 選擇器:* id選擇器 $("#id屬性的值")* 標簽選擇器 $("標簽名字")* 類選擇器 $(".類樣式的名字")* 交集選擇器 $("標簽.類樣式的名字") ---->標簽+類選擇器* 并集選擇器 $("選擇器,選擇器,選擇器,...")---->多條件選擇器* 都可以看成是篩選器* 索引選擇器 $("選擇器:eq(索引的值)")* 奇數篩選器 $("選擇器:odd")* 偶數篩選器 $("選擇器:even")* 篩選器 $("選擇器:lt(索引)")---->獲取小于這個索引的元素* $("選擇器:gt(索引)")---->獲取大于這個索引的元素* 其他選擇器* $("選擇器:last")---->最后一個* $("選擇器:first")---->第一個* 獲取當前元素的其他的方法* 當前元素.next()---->下一個兄弟元素* 當前元素.nextAll()---->后面所有的兄弟元素* 當前元素.prev()---->前一個兄弟元素* 當前元素.prevAll()---->前面所有的兄弟元素* 當前元素.siblings()---->所有的兄弟元素(沒有自己)* 當前元素.parent()---->父級元素* 當前元素.chidren()---->當前元素中所有的子元素(直接的子元素)* 當前元素.find("選擇器")---->從當前元素中找某個或者某些元素** 方法:* .val()---->操作表單元素的value屬性,可以獲取也可以設置* .text()---->操作元素中間的文本內容的,相當于innerText* .html()---->操作元素中的html代碼及內容,相當于innerHTML* .css()---->操作元素的樣式* .addClass()---->添加類樣式* .removeClass()---->移除類樣式* .hasClass()---->判斷元素是否應用了類樣式* .index()---->元素的索引** 下面的這些動畫的方法,一般都可以使用兩個參數,參數1:時間,參數2:回調函數* 參數--時間:1000毫秒----1秒* 參數----時間:slow慢,normal----正常,fast---快* https://api.jquery.com/* https://api.jquery.com/fadeIn/#fadeIn-duration-complete* .show()---->顯示* .hide()---->隱藏* .stop()---->停止動畫* animate()---->動畫的方法* slideUp()---->滑入* slideDown()---->滑出* slideToggle()---->切換滑入和滑出* fadeIn()---->淡入* fadeOut()---->淡出* fadeToggle()---->切換淡入淡出* fadeTo(事件,透明度的值)** 元素創建:* $("html的代碼")* 元素的添加* 父級元素.append(子級元素);* 子級元素.appendTo(父級元素);** clone()克隆元素* 父級元素2.append($("父級元素1>子級元素"));相當于剪切過去*/</script> </head> <body></body> </html>介紹
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>/*** 元素的創建--重點* 例子----必須要寫出來* 如何移除某個元素中的其他的元素----不同的方式--都需要寫* 元素的val()方法的使用----注意的問題和使用方式* 自定義屬性----重點* 做案例----操作元素的自定義屬性* 設置或者是獲取元素的選中的問題(單選和復選的)* 元素的樣式設置:寬和高,卷曲的距離,offset的系列的屬性操作--記錄到筆記中* jQuery中的事件綁定----很多的東西** 鏈式編程的元素* 插件* UI* * */</script> </head> <body></body> </html>元素的創建
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;border: 1px solid red;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 點擊一個按鈕,創建一個按鈕// $("#btn").click(function(){// $("<input type='button' value='按鈕'>").appendTo($("#dv"));// });// 元素創建的另一種方式$("#btn").click(function(){// 通過innerHTML的方式創建元素----以字符串的方式$("#dv").html("<input type='button' value='按鈕'>");});});// var num = 10;// num = 100;</script> </head> <body> <input type="button" value="創建一個web按鈕" id="btn"> <div id="dv">小蘇湊合有點帥吧 </div></body> </html>元素添加的方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;border: 1px solid red;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 點擊按鈕,創建元素$("#btn").click(function(){// 把創建的span標簽這個子元素直接插入到div中第一個子元素的前面// $("#dv").prepend($("<span>this is span</span>"));// 主動的方式// $("<span>this is span</span>").prependTo($("#dv"));// 把元素添加到div的后面的位置,是div的下一個兄弟元素了// $("#dv").after($("<span>this is span</span>"));// 把元素添加到div前面的位置,是div的上一個兄弟元素了$("#dv").before($("<span>this is span</span>"));});});</script> </head> <body> <input type="button" value="創建一個web按鈕" id="btn"> <div id="dv"><p>這是一個p</p> </div> <p>這是div后面的第一個子元素</p></body> </html>元素移除的方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 100px;border: 2px solid red;}</style><script src="jquery-1.12.1.js"></script><script>// 頁面加載$(function(){// 點擊按鈕$("#btn").click(function(){// 從父級元素移除子級元素----移除所有的子元素// $("#dv").html("");// 清空// $("#dv").empty();// 清空父元素中的子元素// 自殺,想要干掉誰,直接找到這個元素,調用這個方法就可以了$("#dv").remove();});});</script> </head> <body> <input type="button" value="移除元素" id="btn"> <div id="dv"><p>這是一個p</p><span>這是一個span</span> </div></body> </html>?
總結
以上是生活随笔為你收集整理的添加元素的注意问题 复习 介绍 元素的创建 元素添加的方法 元素移除的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： animate方法 jQuery中元素的
- 下一篇： 点击按钮创建一个表格 点击按钮创建一个表