JQuery入门学习
1.简介
(1)作用
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
(2)引入
CDN引入:在head中引入(本文使用的微软的引入,另外还有谷歌(可能会出现failed load source问题,原因外网)、百度等)
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
官网下载JQuery文件:
官网下载
若下载,点击出现源代码,可直接新建JS文件全部复制粘贴过来,然后放入工程文件里面;
最后,在控制台的console进行$.fn.jquery,若出现版本号则添加成功!
2.基本语法
(1)语法格式
$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
了解语法格式后,就可在< sript></ script>中进行操作了。操作第一步需要先引入入口函数 ,不然你会发现不起作用。
简单案例:
<!--通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--解决中文乱码 -->
<meta content="text/html" charset="utf-8">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
window.onload =function () {
console.log("Js 方式入口")
}
<!--入口函数-->
$(document).ready(function () {
console.log("JQuery入口函数test")
// 点击事件
$("[id=test1]").click(function () {
$("p").hide();
})
$(".test2").click(function () {
$("p").show();
})
// 鼠标移动事件
$("div").mouseenter(function () {
alert("hhh")
})
//任意按键即可触发
$(".input1").blur(function () {
alert("检验");
})
$(".input2").keypress(function () {
alert("检验");
})
})
</script>
</head>
<title>first test</title>
<body>
<h2 style="text-align: center; position: center"></h2>
<p>测试文字</p>
<div style="width: 100px; height: 100px; background-color: aqua"></div>
<button id="test1">hide</button>
<button class="test2">show</button>
<button class="test2">keydown</button>
<input type="text" class="input1"/>
<input type="text" class="input2"/>
</body>
</html>
(2)选择器总结
基本方式
通过选择器 id : #name ; class : .name
直接通过标签 例如 p ,button
通过符号 this ,无需打引号,获取当前HTML
$("*") :所有元素
进一步筛选获取:
通过class 进一步定位 $(“p.intro”) 选取 class 为 intro 的
元素
first 位置 $(“ul li:first”) 选取第一个 < ul> 元素的第一个 < li > 元素
[ ] 属性筛选 $("[href]") 选取带有 href 属性的元素
(3)常用事件总结
点击事件: click(), dbclick()
键盘事件: keypress()
鼠标事件: mouseenter()鼠标移开
聚焦事件: blur() 焦点移开 :用户注册时移开进行匹配是否符合
其他:事件大全
3.效果实现
(1)淡入淡出
记住 In:显示 Out 出 Toggle切换即可 (形式有 fade与slide(滑动))
格式: fadeIn(speed,callback)
speed:速度 callback :
回调函数(借用w3school的对比):
有:hide先执行
无: alert先执行
原理
(2)动画实现
记住使用 animate即可 $(selector).animate({params},speed,callback);
可以进行改变CSS的所有属性 记得需要设置position为relative、fixed 或 absolute!
案例:
<!--通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--解决中文乱码 -->
<meta content="text/html" charset="utf-8">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
<!--入口函数-->
$(document).ready(function () {
console.log("JQuery入口函数test")
//$(selector).animate({params},speed,callback);(改变CSS属性)
//默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。
// 如需对位置进行操作,
// 要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
//可以用 animate() 方法来操作几乎所有 CSS 属性
// 不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
// 同时,色彩动画并不包含在核心 jQuery 库中。
// 如果需要生成颜色动画,您需要从 jquery.com 下载 颜色动画 插件。
// 停止动画 stop()
// Callback "slow" 有加"slow"回调 先执行函数外,后函数内 无回调,则先内
//
// $("button").click(function(){
// $("p").hide("slow",function(){
// alert("段落现在被隐藏了");
// }); // 先执行hide
// });
$("button").click(function () {
// $(".div2").hide();
var x =document.getElementById("getX").value;
$(".div1").animate({left: '250px',width: '300px'});
$(".div3").animate({left: x}),
$(".div2").css("color","red")
.slideUp(2000)
.slideDown(2000);//链:放在一块写
})
})
</script>
<style>
div{
position: relative;
}
</style>
</head>
<title>first test</title>
<body>
<div class="div1" style="width: 100px; height: 100px; background-color: aqua"></div>
<div class="div2" style="width: 100px; height: 100px; background-color: aquamarine"></div>
<div class="div3" style="width: 100px; height: 100px; background-color: aliceblue"></div>
<input id="getX" type="text" placeholder="输入移动距离">
<button class="test1">点击我!右移</button>
</body>
</html>
4.属性以及内容操作
(1)获取与添加内容
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
例:$(“p”).text():获取p文本内容(即p直接的内容) $(“p”). text(“hello”)更新内容
若使用append则是在文本后面进行追加内容(after一般是添加 节点)
(2)添加元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
注::如果要使用click=“afterText()”
函数应该写在jquery入口函数外部
5.DOM遍历
用于向上遍历 DOM 树:
parent()
parents()
parentsUntil()
用于向下遍历 DOM 树的 jQuery 方法:
children()
find()
//所有后代
$(document).ready(function(){
$(“div”).find("*");
});
在 DOM 树进行水平遍历:
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
6.AJAX
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新
作用:使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
格式:$(selector).load(URL,data,callback);
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据
示例:
<!--通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--解决中文乱码 -->
<meta content="text/html" charset="utf-8">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
<!--入口函数-->
$(document).ready(function () {
console.log("JQuery入口函数test")
$("button").click(function () {
$.post("http://localhost:8082/Hys/admin/loginCheck",{
name:"test",
},
function (data,status) {
$("p").append(data);
alert(data)
})
})
})
</script>
</head>
<title>first test</title>
<body>
<p>请求数据</p>
<button>click 请求数据</button>
</body>
</html>