目录
1:jQuery特点和功能概述
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。
jQuery 的功能概括
1、jQuery事件:事件是对访问者操作的响应,事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
2、jQuery HTML:html 的元素选取、html的元素操作、html dom遍历和修改、
3、jQuery效果:js特效、动画效果、淡入淡出等
4、jQuery ajax:ajax异步请求方式
2:jQuery基本语法介绍
首先引入jQuery依赖库
<!--此处有两个版本 开发版和生产版 大小不一样 不同版本影响浏览器加载速度 -->
<!--例外也可以不下载,直接用网络cdn连接 ,这里是百度cdn连接-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<script src="./js/jquery-3.3.1.js" type="text/javascript"></script>
为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。所以所有的代码均写在文档加载之后
$(document).ready(function(){
// 开始写 jQuery 代码...
});
提示:简洁写法(与以上写法效果相同):
$(function(){
// 开始写 jQuery 代码...
});
3:jQuery事件
事件是对访问者操作的响应,事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。事件是一切得开始
-----------------------------------单击段落隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--此处有两个版本 开发版和生产版 大小不一样 不同版本影响浏览器加载速度 -->
<!--例外也可以不下载,直接用网络cdn连接 ,这里是百度cdn连接
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
-->
<script src="./js/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
alert("312");
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题2</h2>
<p>这是一个段落1</p>
<p>这是一个段落2</p>
<button type="button">单击事件段落隐藏</button>
</body>
</html>
4:jQuery HTML
html 的元素选取、html的元素操作、html dom遍历和修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>读取html</title>
<!--jQuery语法通过选取html元素,然后对其进行操作 -->
<script src="./js/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//id属性点击事件获取表签的值
$(function() {
$("#b1").click(function() {
alert("内容是:"+$("p").text());
})
});
//#id属性点击事件获取表签的html
$(function() {
$("#b2").click(function() {
alert("HTML是:"+$("p").html());
})
});
//.class属性点击事件获取表签的html
$(function() {
$("button.b3").click(function() {
var name=$("#name").val();//获取标签的值
var password=$("#pass").val();
var passatt=$("#pass").attr("name");//获取属性的值
alert("姓名是:"+name+" 密码是:"+password+" name:"+passatt);
})
});
</script>
</head>
<body>
<p>这是一个段落内容<b>粗体</b>文本</p>
<button type="button" id="b1">点击获取内容</button><br>
<button type="button" id="b2">点击获取html</button><br><br><br><br><br>
姓名:<input type="text" id="name" ><br>
密码:<input type="text" id="pass" name="password"><br>
<button type="button" class="b3">点击获取姓名</button><br>
</body>
</html>
5:jQuery 效果
jQuery 中非常重要的部分,就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--jQuery语法通过选取html元素,然后对其进行操作 -->
<script src="./js/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/* 点击隐藏 */
$(function() {
$("button.b1").click(function() {
$("p.p1").hide();
$("#p3").hide();
});
});
/* 点击展示 */
$(function() {
$("#b2").click(function() {
$("p.p1").show();
$("#p3").show();
});
});
/* 单击事件 */
$(function() {
$("#p2").click(function() {
$(this).hide();
})
});
/* 双击事件*/
$(function() {
$("#p4").dblclick(function() {
$(this).hide();
})
})
</script>
</head>
<body>
<h2>这是一个标题2</h2>
<div >
<p class="p1">这是一个段落1</p>
<p id="p2">单击事件</p>
<p id="p3">这是一个段落3</p>
<p id="p4">双击事件</p>
</div>
<button type="button" class="b1">点我隐藏</button>
<button type="button" id="b2">点我展示</button>
</body>
</html>
6:jQuery Ajax
下一篇重新整理