JQuery入门+js库文件分享
程序员文章站
2022-07-02 15:38:27
资料 链接：https://pan.baidu.com/s/1aHUnfPcs1VJAas5zj5abQA 提取码：b1hb 包括本章节需要的js库文件，以及JQuery的api文档 什么JQuery jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的Ja ......
资料
链接：https://pan.baidu.com/s/1ahunfpcs1vjaas5zj5abqa
提取码：b1hb
包括本章节需要的js库文件，以及jquery的api文档
什么jquery
jquery是一个快速、简洁的javascript框架，是继prototype之后又一个优秀的javascript代码库（或javascript框架）。jquery设计的宗旨是“write less，do more”，即倡导写更少的代码，做更多的事情。它封装javascript常用的功能代码，提供一种简便的javascript设计模式，优化html文档操作、事件处理、动画设计和ajax交互。
jquery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jquery兼容各种主流浏览器，如ie 6.0+、ff 1.5+、safari 2.0+、opera 9.0+等
jquery的作用
- 写更少的代码,做更多的事情: write less ,do more
- 将我们页面的js代码和html页面代码进行分离
jq的入门
导入js库文件
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
//js文档加载完成的事件
window.onload = function(){
alert("window.onload 111");
}
window.onload = function(){
alert("window.onload 222");
}
/*文档加载完成的事件*/
jquery(document).ready(function(){
alert("jquery(document).ready(function()");
});
/*
jquery 简写成 $
*/
$(document).ready(function(){
alert("$(document).ready(function()");
});
/*
最简单的写法
*/
$(function(){
alert("$(function(){");
});
</script>
实验发现只输出了window.onload 222和jquery的三个输出，说明js的第二个输出方法替换了之前的输出，而jquery没有
jq中根据id查找元素
全都是根据选择器去找的
#id{}
.类名{}
$("#id的名称")
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
//文档加载顺序
$(function(){
$("#div1").html("李四");
// div1.innerhtml = "王五";
});
// alert($("#div1"));
</script>
</head>
<body>
<div id="div1">张三</div>
</body>
</html>
jq和js之间的转换
- jq对象,只能调用jq的属性和方法
- js对象 只能调用js的属性和方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
function changejs(){
var div = document.getelementbyid("div1");
// div.innerhtml = "js成功修改了内容"
//将js对象转成jq对象
$(div).html("转成jq对象来修改内容")
}
$(function(){
//给按钮绑定事件
$("#btn2").click(function(){
//找到div1
// $("#div1").html("jq方式成功修改了内容");
//将jq对象转成js对象来调用
var $div = $("#div1");
// 第一种方法
// var jsdiv = $div.get(0);
var jsdiv = $div[0];
jsdiv.innerhtml="jq转成js对象成功";
});
});
</script>
</head>
<body>
<input type="button" value="js修改div内容" onclick="changejs()" />
<input type="button" value="jq方式修改div内容" id="btn2" />
<div id="div1">
这里的内容一会要被js/jq代码修改掉
</div>
<div id="div1">
这里的内容一会要被js/jq代码修改掉1111
</div>
</body>
</html>
jq的开发步骤
将我们页面的js代码和html页面代码进行分离
1. 导入jq相关的文件 2. 文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器 3. 确定相关操作的事件 4. 事件触发函数 5. 函数里面再去操作相关的元素
jq中的动画效果
显示和隐藏 img.style.display
show() hide() slideup slidedown fadein fadeout animate : 自定义动画
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
1. 导入jq相关的文件
2. 文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素
-->
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//显示页面图片
//给按钮绑定事件
$("#btn1").click(function(){
// $("#img1").show();
// 滑动
// $("#img1").slidedown();
// 淡入淡出
// $("#img1").fadein(5000);
$("#img1").animate({ width:"800px",opacity:"1"},5000);
});
//隐藏页面图片
$("#btn2").click(function(){
//获得img
// $("#img1").hide(10000);
// $("#img1").slideup(500);
// $("#img1").fadeout(5000);
$("#img1").animate({ width:"1366px",opacity:"0.2"},5000);
});
});
</script>
</head>
<body>
<input type="button" value="显示" id="btn1" />
<input type="button" value="隐藏" id="btn2"/> <br />
<img src="../../img/333.png" id="img1" width="500px" />
</body>
</html>
上一篇： ASP讲座之四：ASP内置组件