jquery的入门
- 一个网页可以有几部分组成?
- 开发前端的三剑客:HTML Css Js
- jquery是什么
- jquery是js的一个框架，jquery是对js的封装，jquery是第三方组织写的一个js文件
- jquery和js的关系类似:JDBC和DBUtils关系
- 有什么特点?
- jquery是为了简化js的书写
- jquery的宗旨:写的更少，做的更多
- 如何使用jquery
- 你如果想要使用jquery，引入这个js文件，使用选择器查找元素，再调用函数
##jquery的版本介绍
jquery下载
- jQuery的官方下载地址：http://www.jquery.com
如何选择版本
- 1.x：兼容IE678，使用最为广泛的（一般项目来说，使用1.x版本就 可以了）
- 2.x：不兼容IE678，很少有人使用（如果不考虑兼容低版本的浏览器可以使用2.x）
- 3.x：不兼容IE678，只支持最新的浏览器（除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不 支持这个版本）
什么是开发版本
jQuery-x.x.x.js为开发版本，开发版本 源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大
jQuery-x.x.x.min.js为生产版本，生产版本没有代码缩进和 注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小。
jquery的入门
使用步骤
- 引入
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>- 调用
$(function(){
//加载完成
});
//获取ip为inputId的元素
$(“#inputId”)
jQuery在线引用地址
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
##jquery和js的转换
将js对象转为jquery对象
document.getElementById(“inputId”);
$(js对象) ----->jquery对象
jquery对象的本质是一个数组
- jquery对象 = [js对象,js对象,js对象]
将jquery对象转为js
- jquery对象[0] ----->js对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//------------1:js代码-----------
// window.onload = function () {
// var inputIdEle = document.getElementById("inputId");
// // alert(inputIdEle.value);
// /*
// 1:inputIdEle被称为js对象
// 2:将js对象转为jquery对象
// $(js对象) ----->jquery对象
// */
// alert($(inputIdEle).val());
// }
//------------2:jquery代码-----------
$(function () {
var inputIdEle = $("#inputId");
/*
1:inputIdEle是一个jquery对象
2:将jquery对象转为js
jquery对象[0] ----->js对象
3：jquery对象的本质是一个数组
jquery对象 = [js对象,js对象,js对象]
*/
alert(inputIdEle[0].value);
});
</script>
</head>
<body>
用户名:<input id="inputId" type="text" name="username" value="我是WZX"/>
</body>
</html>
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.1.0.min.js"></script>
<body>
用户名:<input id="inputId" type="text" name="username" value="学编程"/>
<script type="text/javascript">
//2:获取输入框架
var $inputId = $("#inputId");
// 3:获取value对应的值
alert($inputId.val());
</script>
</body>
</html>
运行效果;
##案例二代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.1.0.min.js"></script>
<body>
用户名:<input id="inputId" type="text" name="username" value="学编程"/>
<script>
// window表示当前窗口
// onLoad表示页面加载完成
//将function通=赋值给onLoad,将来页面加载完成，自动执行function．绑定事件
window.onload = function(){
alert("加载完成");
var input = document.getElementById("inputId");
input.onclick = function () {
alert("点了按钮");
}
}
</script>
</body>
</html>
运行效果
案例三代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.1.0.min.js"></script>
<body>
用户名:<input id="inputId" type="text" name="username" value="学编程"/>
<script>
//跟案例二效果一样，不过是用另一种更常用的方法
//当页面加载完成执行下列方法
$(function () {
alert("加载完成");
var input = document.getElementById("inputId");
input.onclick = function () {
alert("点了按钮");
}})
</script>
</body>
</html>
