animate方法 jQuery中元素的创建 创建十个p标签 创建列表 动态创建列表
生活随笔
收集整理的這篇文章主要介紹了
animate方法 jQuery中元素的创建 创建十个p标签 创建列表 动态创建列表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
animate方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>img {position: absolute;}</style><script src="jquery-1.12.1.js"></script><script>// 參數1:鍵值對----css屬性和值// 參數2:時間----1000毫秒--1秒// 參數3:回調函數$(function(){$("#im").animate({"width":"200px","height":"200px","left":"100px","top":"100px"},2000).animate({"width":"20px","height":"20px","left":"10px","top":"1000px"},50).animate({"width":"80px","height":"80px","left":"800px","top":"50px","opacity":0.5},2000);});</script> </head> <body> <img src="bird.png" id="im" ></body> </html>?jQuery中元素的創建
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 100px;border: 5px solid red;}</style><script src="jquery-1.12.1.js"></script><script>// 頁面加載后,點擊按鈕,在div中創建一個超鏈接$(function(){$("#btn").click(function(){// 在父級元素div中追加一個創建后的子元素// 父級元素.append(子級元素);// $("#dv").append($("<a href='http://www.baidu.com'>百度</a>"));// 創建一個子級元素直接加到父級元素$("<a href='http://www.baidu.com'>騰訊</a>").appendTo($("#dv"));});});</script> </head> <body> <input type="button" value="創建一個a標簽" id="btn"> <div id="dv"></div></body> </html>點擊按鈕創建十個p標簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;border: 1px dashed red;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("#btn").click(function(){for(var i=0;i<10;i++){$("#dv").append($("<p>oh my god.</p>"));}});});</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv"></div></body> </html>創建列表
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 600px;border: 2px dotted orangered;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 點擊按鈕$("#btn").click(function(){// 創建列表加入到div中// 創建ul,加入到div中var ulObj = $("<ul style='list-style-type:none;cursor:pointer'></ul>");$("#dv").append(ulObj);// 創建li,加入到ul中$("<li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <li>5555</li>").appendTo(ulObj).mouseenter(function(){$(this).css("backgroundColor","green");}).mouseout(function(){$(this).css("backgroundColor","");}).click(function(){$(this).css("color","pink").css("fontFamily","Century Gothic").css("fontSize","50px");});});});</script> </head> <body> <input type="button" value="創建列表" 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: 600px;border: 2px dotted darkgreen;}ul li {cursor: pointer;}</style><script src="jquery-1.12.1.js"></script><script>/*** 內置對象:js中系統自帶的,Array,Object,Date,Math,RegExp* 瀏覽器對象:window* 自定義對象:自己定義的構造函數創建的對象* DOM對象:通過DOM方式獲取的對象* jQuery對象:通過jQuery方式獲取對象*/// 數組中有十個人的名字$(function(){var array = ["趙四","王五","李四","張三","王朝","馬漢","馬超","武器","天神","龍王"];// Date----內置對象// 根據id選擇器獲取按鈕,添加點擊事件$("#btn").click(function(){// 先創建ul加入到div中var ulObj = $("<ul></ul>").appendTo($("#dv"));// 創建li標簽,加入到ul中----循環遍歷數組for(var i=0;i<array.length;i++){$("<li>"+array[i]+"</li>").appendTo(ulObj).mouseenter(function(){$(this).css("backgroundColor","green");}).mouseleave(function(){$(this).css("backgroundColor","");});}});});// 點擊按鈕的時候實現// 在div中動態的創建列表</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv"></div></body> </html>?
總結
以上是生活随笔為你收集整理的animate方法 jQuery中元素的创建 创建十个p标签 创建列表 动态创建列表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： tab栏切换 动画的相关方法上 动画的相
- 下一篇： 添加元素的注意问题 复习 介绍 元素的创