版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35537301/article/details/83043164
1、jQuery的介绍
1. 简介
- jQuery是一个跨浏览器，快速、简洁的JavaScript框架
- jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情
- jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
- jQuery2.0以后，不兼容IE6/7/8
2. 作用
可以简化html和js之间的操作
2、jQuery使用
1.导入jQuery文件
script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>2.编写jQuery代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>获取jQuery对象</title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
var $username = $("#username");
alert("jQuery对象"+$username.val());
//var $username = jQuery("#username");
//alert($username.val());
})
</script>
</head>
<body>
<input type="text" id="username" value="jack" />
</body>
</html>3、jQuery语法
3.1 获取对象
- jQuery(选择器)或者$(选择器)
- 严格区分大小写
3.2 获取value
- jQuery对象.val()
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>获取jQuery对象</title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
var $username = $("#username");
alert("jQuery对象"+$username.val());
})
window.onload = function(){
var username = document.getElementById("username");
alert("JavaScript对象"+username.value);
}
</script>
</head>
<body>
<input type="text" id="username" value="jack" />
</body>
</html>3.3 jQuery对象和JavaScript对象的转换
3.3.1 JavaScript对象转换成jQuery对象
- $(JavaScript对象)
3.3.2 jQuery对象转换成JavaScript对象
- 第一种方式
- jquery对象[index]
- 第二种方式
- jquery对象.get(index)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
var username = document.getElementById("username");
alert("js---->jQuery "+$(username).val());
})
window.onload =function (){
var $username = $("#username");
// var usernameObj = $username[0];
// alert("jQuery--->js 方式1 "+usernameObj.value);
var usernameObj = $username.get(0);
alert("jQuery--->js 方式2 "+usernameObj.value);
}
</script>
<body>
<input type="text" id="username" value="jack"/>
</body>
</html>4、jQuery事件
4.1 页面加载
$(document).ready(function(){
// 在这里写你的代码...
});$(function($) {
// 你可以在这里继续使用$作为别名...
});JavaScript只能给onload赋一次值,后面的会覆盖前面的(只能弹出一个)
jQuery能够赋值多次(全部弹出)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面加载事件</title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
window.onload = function (){
alert("JavaScript页面加载事件");
}
$(document).ready(function(){
alert("jQuery页面加载事件");
})
</script>
</head>
<body>
</body>
</html>
4.2常用的事件
| 事件名称 | 说明 |
| click | 单击 |
| submit | 表单提交事件 |
| change | 内容改变触发的事件 |
| focus | 获取焦点 |
| blur | 失去焦点 |
4.3 jQuery事件和函数的绑定
$(选择器).事件名称(function(){
函数体
})<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的事件和函数的绑定</title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bId").click(function(){
alert("事件绑定");
})
})
</script>
</head>
<body>
<input type="button" id="bId" value="点击查看" />
</body>
</html>
4.4 常见的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<style type="text/css">
#e02{
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#e01").blur(function(){
$("#textMsg").html("文本框失去焦点：blur");
}).focus(function(){
$("#textMsg").html("文本框获得焦点：focus");
}).keydown(function(){
$("#textMsg").append("键盘按下：keydown");
}).keypress(function(event){
$("#textMsg").append("键盘按：keypress");
}).keyup(function(){
$("#textMsg").append("键盘弹起：keyup");
});
var i = 0;
$("#e02").mouseover(function(){
$("#divMsg").html("鼠标移上：mouseover");
}).mousemove(function(){
//$("#divMsg").html("鼠标移动：mousemove , " + i++ );
}).mouseout(function(){
$("#divMsg").html("鼠标移出：mouseout");
}).mousedown(function(){
$("#divMsg").html("鼠标按下：mousedown");
}).mouseup(function(){
$("#divMsg").html("鼠标弹起：mouseup");
});
$("#e03").click(function(){
$("#buttonMsg").html("单击：click");
}).dblclick(function(){
$("#buttonMsg").html("双击：dblclick");
});
});
</script>
</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span> <br/>
<hr/>
<div id="e02" ></div><span id="divMsg"></span> <br/>
<hr/>
<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>5、jQuery效果
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>效果</title>
<style type="text/css">
div {
border: 1px solid #000;
width: 100px;
height: 100px;
}
</style>
<!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 隐藏和显示
$("#b1").click(function() {
// 隐藏
// $("#b1Div").hide(1000);
// 显示
// $("#b1Div").show(1000);
// 切换
$("#b1Div").toggle(1000);
});
//滑入和滑出
$("#b2").click(function(){
//滑出
//$("#b2Div").slideUp(1000);
//滑入
//$("#b2Div").slideDown(1000);
//切换
$("#b2Div").slideToggle(1000);
});
//淡入和淡出
$("#b3").click(function(){
//淡出
//$("#b3Div").fadeOut(1000);
//淡入
//$("#b3Div").fadeIn(1000);
//切换
//$("#b3Div").fadeToggle(1000);
//
$("#b3Div").fadeTo(1000,0,function(){
alert("淡化成功");
})
})
});
</script>
</head>
<body>
<input type="button" id="b1" value="显示/隐藏 b1Div" />
<div id="b1Div"></div> <br/>
<input type="button" id="b2" value="滑出/滑入b2Div" />
<div id="b2Div"></div> <br/>
<input type="button" id="b3" value="淡出/淡入b3Div" />
<div id="b3Div"></div>
</body>
</html>