jQuery教程
jQuery 和 JavaScript 和 Ajax三者的区别
1.js是一门前端语言
2.Ajax是一门技术，提供了异步更新的机制
3.jQuery是一个框架，它是对js进行封装，使其使用更为方便，也封装了复杂的ajax的操作
js是一种客户端执行的脚本语言，ajax是基于javascript的一种技术，一个是语言一个是技术
ajax是一种创建交互网页应用的开发技术
js组成部分
核心部分 ECMAScript
文档对象模型 Document Object model
浏览器对象模型Brower Object model
ajax 异步的javascript 和 xml
组成部分
基于html和 css标准的表示
使用文档对象模型进行动态显示和交互
使用xml和json作为数据交互和操作
使用xml HttpRequest对象和服务器进行异步通讯
使用javascript进行所有操作
jQuery
是一个快速的简洁的javascript库，是使用户能够更方便的去处理HTML documents events 实现动画效果，方便为网站提供便捷的ajax操作
jquery 安装
1.从jquery官网下载
https://jquery.com
2.从CDN中载入jquery
百度CDN https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
jquery.js
jquery.min.js
新浪CDN
谷歌CDN
3.在html中使用jquery
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery.js" ></script> </head> <body></body>
</html>
jquery语法
基础语法：$(selector).action()
通过美元符号定义使用jquery
选择符(selector) 查询或者查找html元素
jquery的action()执行对元素的操作
jquery入口函数
文档就绪函数
$(document).ready(function() {
//jQuery的代码
})为了防止文档在没有完全加载之前运行了jquery 对html进行了操作
简洁写法
$(function(){
//jQuery的代码
})javascript入口函数
window.onload = function(){
//js的代码
}区别
jquery的入口函数实在所有html标签加载之后 就会去执行
javascript的入口函数实等到所有的内容包括图片 视频 音频等文件完全加载完毕之后才会执行
jquery选择器
jquery选择器是基于元素的id 类 属性等值进行查找，基于已经存在的css选择器
$("*") 表示选取所有html元素
$(this) 表示选取当前html元素
$("#test") 表示通过id获取元素
$(".test") 表示通过class获取元素
$("div") 表示通过元素的名称获取元素
所得到的元素 可能是一个 也可能是多个
jquery事件
| 鼠标事件 | 键盘事件 | 表单事件 |
|---|---|---|
| click | keypress | submit |
| dbclick | keydown | focus |
| mouseenter | keyup | blur |
| mouseleave | change |
为元素添加事件语法
$(".dd").click(function(){
//事件的具体操作
})jquery效果
1.隐藏元素和显示元素
hide() show() toggle()
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
$(selector).toggle(speed,callback)speed 规定元素隐藏的速度 slow fast 和毫秒数
callback 回调函数，当元素执行完操作之后的操作代码示例
$(function() { //jQuery的代码 $(".dd").click(function() { //点击事件的具体操作 $(this).hide(1000,function(){ alert("元素消失了") }) })$("#in").change(function() { $(".dd").toggle() })
})
2.淡入淡出
fadeIn()用于淡入已经隐藏的元素
$(selector).fadeIn(speed,callback)示例
$("#btn").click(function(){
$("#d1").fadeIn(2000)
})fadeOut()用于淡出已经隐藏的元素
示例
$("#btn1").click(function(){
$("#d1").fadeOut(2000)
})fadeToggle() 淡入淡出切换
示例
$("#btn3").click(function() {
$("#d1").fadeToggle(2000)
})fadeTo() 让元素 淡入或者淡出到某种程度
fadeTo(speed，opacity，callback) opacity范围0~1 之间
示例
$("#btn4").click(function() {
$("#d1").fadeTo(2000,0.5)
})3.滑动效果
slideDown(speed，callback)用于元素向下滑动显示
示例
$("#btn5").click(function() {
$("#d1").slideDown()
})slideUp(speed，callback)用于元素向上滑动隐藏
示例
$("#btn6").click(function() {
$("#d1").slideUp()
})slideToggle(speed，callback)用于元素向上向下滑动切换
4.动画
animate()方法用于创建自定义动画
animate({params}，speed，callback)
{params} 必填参数，定义形成动画的css属性
示例1：操作单个属性
$("#btn7").click(function() {
$("#d2").animate({
left: \'300px\'
},3000)
})示例2：同时操作多个属性
$("#btn7").click(function() {
$("#d2").animate({
left: \'300px\',
height:\'150px\',
width:\'150px\'
},3000)
})示例3：动画的队列
$("#btn7").click(function() {
$("#d2").animate({left: \'300px\'}, 3000)
$("#d2").animate({height: \'150px\'}, 3000)
$("#d2").animate({width: \'150px\'}, 3000)
})练习：尝试使用jquery动画操作css3中的transform: rotateZ(180deg) 使其向右移动，在移动的过程中旋转180°
5.jquery链式操作
示例
$("#btn8").click(function() {
$("#d2")
.css("background-color","green")
.css("left","300px")
.slideUp(2000)
.slideDown(2000)
})jquery HTML
html Dom的操作
1.获取设置内容
text() html() val()
text():设置返回元素文本内容 等价 innerText = "jj"
html():设置返回元素的内容（包含了html标记） innerHTML
val():设置返回表单字段的值 value
示例
$("#btn9").click(function() {
var txt = $("#d2").text("哈哈哈哈")
console.log(txt)
})
$("#btn10").click(function() {
var txt = $("#d2").html("<h1>tiger</h1>")
console.log(txt)
})
$("#btn11").click(function() {
var txt = $("#time").val("2020-01-01")
console.log(txt)
})attr()获取或者赋予 html属性值
示例
$("#btn12").click(function() {
var txt = $("#d2").attr("style", "transform:rotateZ(45deg)")
console.log(txt)
})2.html元素的添加
append() 在被选元素里面的 末尾插入数据
$("#d2").append("<h1>在div之后追加的元素</h1>")prepend() 在被选元素里面的 开头插入数据
$("#d2").prepend("<h1>在被选元素之前追加的元素</h1>")after() 在被选元素之后插入数据
before() 在被选元素之前插入数据
$("#d2").after("<p>追加了一个p标签</p>")
$("#d2").before("<p>追加了一个p标签</p>")3.元素删除
remove() 和 empty()
remove 删除被选元素 以及子元素
empty 从被选元素中删除子元素
4.操作css类
addClass() 向被选元素 添加一个或者多个类
removeClass() 删除css类
<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title></title> <style> .b-font { font-weight: bolder; } .blue-font { color: blue; } </style> </head> <body> <p id="p1">今天天气 真不错 还要我比较胖 不然就被吹走...</p> <button id="btn1">粗体字</button> <button id="btn2">蓝色字</button> <button id="btn3">删除粗体样式</button> <button id="btn4">删除蓝色字样式</button> <script type="text/javascript" src="js/jquery.js"></script> <script> $(function() { //添加css类 $("#btn1").click(function() { $("#p1").addClass("b-font") }) $("#btn2").click(function() { $("#p1").addClass("blue-font") }) //删除css类 $("#btn3").click(function() { $("#p1").removeClass("b-font") }) $("#btn4").click(function() { $("#p1").removeClass("blue-font") }) }) </script> </body>
</html>
练习
实现动态的给文本域里面的文字 修改颜色 以及 字体大小 和 字体的粗细
页面上需要有个文本域
通过选择颜色 来修改文本域中的文字 颜色
答案
<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .textarea { display: block; height: 400px; width: 800px; margin: 10px auto; } .div { width: 800px; margin: 10px auto; } .font-Weight { font-weight: bolder; } </style> </head> <body> <textarea class="textarea" id="txtArea"></textarea> <div class="div"> <button id="fontC">加粗</button> <button id="fontX">不加粗</button> 字体颜色： <input id="fontColor" type="color" /> 字体大小： <select id="fontSize"> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="12">12</option> <option value="14">14</option> <option value="16">16</option> <option value="18">18</option> </select> </div> <script type="text/javascript" src="js/jquery.js"></script> <script> $(function() { $("#fontC").click(function() { $("#txtArea").addClass("font-Weight") }) $("#fontX").click(function() { $("#txtArea").removeClass("font-Weight") }) $("#fontColor").change(function() { //获取修改的颜色的值 //并添加css样式 var color = $("#fontColor").val() $("#txtArea").css("color", color) }) $("#fontSize").change(function(){ var fontSize = $("#fontSize").val() $("#txtArea").css("font-size", fontSize+"px") }) }) </script> </body>
</html>
css()方法设置返回被选元素的一个或者多个css样式
//单个css样式
var p1 = $("#p1").css("color","#0000FF")
//多个css样式
var p1 = $("#p1").css({"color":"blue","font-size":"200%"})作业
编写一个form表单 里面包含一下 输入框
账号的输入框
密码的输入框
当鼠标获取输入框焦点的时候 修改输入框的背景色 颜色自定
当鼠标失去输入框焦点的时候 输入框的背景颜色是 还原
5.jQuery AJAX
load()从服务器加载数据并且返回数据放入到被选元素中
$(selector).load(url,data,callback)url:数据访问的地址 必填
data：传入到服务器的数据
示例
$("#div1").load("http://10.25.185.76:8080/AjaxServer/TestController")public class LoginServlet extends HttpServlet{public void doGet(HttpServletRequest request,HttpServletResponse response){ } public void doPost(HttpServletRequest request,HttpServletResponse response){ request.getParamter("username") }
}
get() 和 post()
get:从指定的资源上 请求数据
post：向指定的资源提交处理的数据
get()语法
$.get(url,callback)示例
<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title></title> </head> <body> <!--<div id="div1"></div>--> <button id="btn">查询数据</button> <table id="tab"> </table> <script type="text/javascript" src="js/jquery.js"></script> <script> $(function() { $("#btn").click(function() { $.get("http://10.25.185.76:8080/AjaxServer/TestController", function(data, status) { //把json格式的字符串 转变成json对象 var json = JSON.parse(data) var html = "" $.each(json, function(index, value) { html += "<tr><td>" + value.userName + "<td/><td>" + value.userEmail + "<td/><td>" + value.userAge + "<td/><td>" + value.userAddress + "<td/></tr>" }) $("#tab").html(html) }) }) }) </script> </body>
</html>
post()语法
$.post(url,data,callback)示例
<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title></title> </head> <body> <!--<div id="div1"></div>--> <form id="form1"> 用户名：<input type="text" name="username" /><br> 年 &nbsp; &nbsp;龄：<input type="text" name="userage" /><br> 邮 &nbsp; &nbsp;箱：<input type="text" name="useremail" /><br> 地 &nbsp; &nbsp;址：<input type="text" name="useraddress" /><br> <button id="addbtn" type="button">添加数据</button> </form> <br /> <button id="btn">查询数据</button> <table id="tab"> </table> <script type="text/javascript" src="js/jquery.js"></script> <script> $(function() { //$("#div1").load("http://10.25.185.76:8080/AjaxServer/TestController") $("#btn").click(function() { $.get("http://10.25.185.76:8080/AjaxServer/TestController", function(data, status) { //把json格式的字符串 转变成json对象 var json = JSON.parse(data) var html = "" $.each(json, function(index, value) { html += "<tr><td>" + value.userName + "<td/><td>" + value.userEmail + "<td/><td>" + value.userAge + "<td/><td>" + value.userAddress + "<td/></tr>" }) $("#tab").html(html) }) }) $("#addbtn").click(function(){ //获取表单数据 var data = $("#form1").serialize() $.post("http://10.25.185.76:8080/AjaxServer/TestController",data,function(){ $("input").val("") }) }) }) </script> </body>
</html>
ajax()
$.ajax({name:value,name:value})示例
<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title></title> </head> <body> <!--<div id="div1"></div>--> <form id="form1"> 用户名：<input type="text" name="username" /><br> 年 &nbsp; &nbsp;龄：<input type="text" name="userage" /><br> 邮 &nbsp; &nbsp;箱：<input type="text" name="useremail" /><br> 地 &nbsp; &nbsp;址：<input type="text" name="useraddress" /><br> <button id="addbtn" type="button">添加数据</button> </form> <br /> <button id="btn">查询数据</button> <table id="tab"> </table> <script type="text/javascript" src="js/jquery.js"></script> <script> $(function() { showData() $("#addbtn").click(function(){ inputData() }) $("#btn").click(function(){ showData() }) }) function inputData() { var data = $("#form1").serialize() $.ajax({ //请求方式 post get type: "post", url: "http://10.25.185.76:8080/AjaxServer/TestController", async: true, data: data, success:function(){ showData() } }); } function showData() { $.ajax({ type: "get", url: "http://10.25.185.76:8080/AjaxServer/TestController", async: true, success: function(data) { var json = JSON.parse(data) var html = "" $.each(json, function(index, value) { html += "<tr><td>" + value.userName + "<td/><td>" + value.userEmail + "<td/><td>" + value.userAge + "<td/><td>" + value.userAddress + "<td/></tr>" }) $("#tab").html(html) } }); } </script> </body>
</html>