animate方法 jQuery中元素的创建 创建十个p标签 创建列表 动态创建列表
生活随笔
收集整理的這篇文章主要介紹了
animate方法 jQuery中元素的创建 创建十个p标签 创建列表 动态创建列表
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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>// 參數(shù)1:鍵值對----css屬性和值// 參數(shù)2:時間----1000毫秒--1秒// 參數(shù)3:回調(diào)函數(shù)$(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中元素的創(chuàng)建
<!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中創(chuàng)建一個超鏈接$(function(){$("#btn").click(function(){// 在父級元素div中追加一個創(chuàng)建后的子元素// 父級元素.append(子級元素);// $("#dv").append($("<a href='http://www.baidu.com'>百度</a>"));// 創(chuàng)建一個子級元素直接加到父級元素$("<a href='http://www.baidu.com'>騰訊</a>").appendTo($("#dv"));});});</script> </head> <body> <input type="button" value="創(chuàng)建一個a標(biāo)簽" id="btn"> <div id="dv"></div></body> </html>點擊按鈕創(chuàng)建十個p標(biāo)簽
<!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>創(chuàng)建列表
<!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(){// 創(chuàng)建列表加入到div中// 創(chuàng)建ul,加入到div中var ulObj = $("<ul style='list-style-type:none;cursor:pointer'></ul>");$("#dv").append(ulObj);// 創(chuàng)建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="創(chuàng)建列表" id="btn"> <div id="dv"></div></body> </html>動態(tài)創(chuàng)建列表
<!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>/*** 內(nèi)置對象:js中系統(tǒng)自帶的,Array,Object,Date,Math,RegExp* 瀏覽器對象:window* 自定義對象:自己定義的構(gòu)造函數(shù)創(chuàng)建的對象* DOM對象:通過DOM方式獲取的對象* jQuery對象:通過jQuery方式獲取對象*/// 數(shù)組中有十個人的名字$(function(){var array = ["趙四","王五","李四","張三","王朝","馬漢","馬超","武器","天神","龍王"];// Date----內(nèi)置對象// 根據(jù)id選擇器獲取按鈕,添加點擊事件$("#btn").click(function(){// 先創(chuàng)建ul加入到div中var ulObj = $("<ul></ul>").appendTo($("#dv"));// 創(chuàng)建li標(biāo)簽,加入到ul中----循環(huán)遍歷數(shù)組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","");});}});});// 點擊按鈕的時候?qū)崿F(xiàn)// 在div中動態(tài)的創(chuàng)建列表</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv"></div></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的animate方法 jQuery中元素的创建 创建十个p标签 创建列表 动态创建列表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： tab栏切换 动画的相关方法上 动画的相
- 下一篇： 添加元素的注意问题 复习 介绍 元素的创