多库共存 包装集的问题 点击按钮创建一个p 几个属性介绍 jQuery的插件
生活随笔
收集整理的這篇文章主要介紹了
多库共存 包装集的问题 点击按钮创建一个p 几个属性介绍 jQuery的插件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
多庫共存
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>// 一個html文件引入多個的js文件庫,每個js庫中的頂級對象可能都是$// 1.js $.eat();// 2.js $.sayHi();</script><script src="jquery-1.12.1.js"></script><script>// // 普通的變量,10// var $ = 10;// console.log($);// // 頁面加載// $(function(){// $("#btn").click(function(){// console.log("小蘇好猥瑣哦");// });// });// // 普通的變量,10// var $ = 10;// console.log($);// $ = jQuery;// // 頁面加載// $(function(){// $("#btn").click(function(){// console.log("小蘇好猥瑣哦");// });// });// 把$的權(quán)利給xy了,$就可以作為其他的用法出現(xiàn)在代碼中var xy = $.noConflict();// 普通的變量,10var $ = 10;console.log($);// 頁面加載xy(function(){xy("#btn").click(function(){console.log("小蘇好猥瑣哦");});});</script> </head> <body> <input type="button" value="按鈕" id="btn"></body> </html>包裝集的問題
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>// 包裝集:把很多的DOM對象進(jìn)行包裝或者是封裝---->jQuery對象// jQuery對象---->DOM對象---->jQuery對象[0]---->獲取到這個對象// $("#btn")[0]// $("#btn").get(0);// $(function(){// $("p")[1].innerHTML = "哈哈";// });// 包裝集 ---->length屬性// jQuery中如何判斷這個元素是否存在,就是通過包裝集的length屬性來測試的// 是通過這個對象.length屬性不等于0的方式來判斷// $(function(){ // if($("#btn").length!=0){// console.log("存在");// }else{// console.log("不存在");// }// });</script> </head> <body> <input type="button" value="按鈕" id="btn"> <p>1</p> <p>2</p> <p>3</p></body> </html>點(diǎn)擊按鈕創(chuàng)建一個p
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 100px;background-color: red;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("#btn").click(function(){if($("#p1").length==0){// 點(diǎn)擊按鈕,只創(chuàng)建一個p標(biāo)簽,在div中$("<p id='p1'>這是一個p</p>").appendTo($("#dv"));}});});</script> </head> <body> <input type="button" value="創(chuàng)建一個p" 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: 100px;background-color: green;border: 5px solid red;}</style><script src="jquery-1.12.1.js"></script><script>// innerWidth()/innerHeight() 方法返回元素的寬度/高度 (包括內(nèi)邊距)// outerWidth()/outerHeight() 方法返回元素的寬度/高度 (包括內(nèi)邊距和邊框)// outerWidth(true)/outerHeight(true) 返回返回元素的寬度/高度 (包括內(nèi)邊距// 、邊框和外邊距).$(function(){// div的寬,沒有邊框和寬console.log($("#dv").innerWidth());// div的高,沒有邊框console.log($("#dv").innerHeight());// 有邊框的寬(包括邊框的寬)console.log($("#dv").outerWidth(true));// 有邊框的高(包括邊框的寬)console.log($("#dv").outerHeight(true));});</script> </head> <body> <div id="dv"></div></body> </html>?jQuery的插件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>// 插件:就是一個功能,jQuery插件,別人把功能寫好了,我們直接拿過來就可以了// 輪播圖,別人寫好了,我的頁面中想要有輪播圖的效果,直接拿過來加入到我的頁面// 就可以了// 一般插件使用步驟:/*** 先下載插件的文件,* 壓縮包:(js文件,css文件,插件的js文件,index.html),* 如果沒看見文件,請在對應(yīng)的文件夾中** 引入到自己的開發(fā)工具中,先看效果** 自己創(chuàng)建一個文件夾----插件* 引入他的js文件----jquery-1.xx.js* 引入他的css文件** 引入他的插件js文件** 把index.html讓復(fù)制的html代碼加入到自己的body中(div)* 把index.html文件中的jQuery代碼,復(fù)制到自己的script標(biāo)簽中即可* */</script> </head> <body></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的多库共存 包装集的问题 点击按钮创建一个p 几个属性介绍 jQuery的插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 按键改变元素背景颜色 链式编程的原理 评
- 下一篇： JavaScript中替换字符串中的所有