多库共存
<!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();
// 普通的变量,10
var $ = 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>