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