多库共存
<!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("小苏好猥琐哦");//});// });// 把$的权利给xy了,$就可以作为其他的用法出现在代码中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对象进行包装或者是封装---->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>
点击按钮创建一个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){// 点击按钮,只创建一个p标签,在div中$("<p id='p1'>这是一个p</p>").appendTo($("#dv"));}});});</script></head><body><input type="button" value="创建一个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() 方法返回元素的宽度/高度 (包括内边距)// outerWidth()/outerHeight() 方法返回元素的宽度/高度 (包括内边距和边框)// outerWidth(true)/outerHeight(true) 返回返回元素的宽度/高度 (包括内边距// 、边框和外边距).$(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),* 如果没看见文件,请在对应的文件夹中** 引入到自己的开发工具中,先看效果** 自己创建一个文件夹----插件* 引入他的js文件----jquery-1.xx.js* 引入他的css文件** 引入他的插件js文件** 把index.html让复制的html代码加入到自己的body中(div)* 把index.html文件中的jQuery代码,复制到自己的script标签中即可* */</script></head><body></body></html>
