简介
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。[1]由约翰·雷西格（John Resig）在2006年1月的BarCamp NYC上发布第一个版本。目前是由Dave Methvin领导的开发团队进行开发。全球前10,000个访问最高的网站中，有65%使用了jQuery，是目前最受欢迎的JavaScript库。
jQuery 版本
- 原版的代码有统一格式，体积较大，方便阅读，用于测试、学习和开发。
- 精简版的代码去掉了格式，体积较小，用于发布。
查看是否调用了jQuery
<script>
if(typeof jQuery != "undefined"){ /*jQuery类型不等于undefined，说明引用了jQuery库*/
alert("jQuery has been installed!");
}else{
alert("jQuery has not found!");
}
</script>
jQuery相比js的优势，使用更少的代码实现相同或者更多的功能
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
<script>
$("div").click(function(){ //$开头告诉浏览器执行jQuery代码，如果用js实现的话，需要创建三次onclick = function(){}代码。
alert("the div has been clicked!");
});
</script>
添加文本
<div id="circle"></div>
<p></p>
<script>
$("#circle").click(function(){ //点击circle, 在p区域添加文本信息
$("p").html("hello");
});
</script>
显示iframe链接中的网址
<div id="circle"></div>
<iframe height=498 width=510 src='http://player.youku.com/embed/XMzc2OTI3NDI4NA==' frameborder=0 'allowfullscreen'></iframe>
<script>
$("#circle").hover(function(){
alert($("iframe").attr("src"));
});
</script>
使用jQuery改变css样式
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
<script>
$("div").click(function(){
$(this).css("width","400px"); //调整当前选中的对象，进行调整。
$(this).fadeToggle() ; //渐变消失
});
</script>
<p>this is some text.</p>
<button id="mybutton" >fadeOut</button>
<button id="mybutton2" >fadeIn</button>
<script>
$("#mybutton").click(function(){
$("p").fadeOut("slow",function(){
alert("fade our completed!");
}); //fadeout执行完毕后，执行function函数，输出alert
});
$("#mybutton2").click(function(){
$("p").fadeIn() ;
});
</script>
jQuery 实现动画
<div id="circle"></div>
<script>
$("#circle").click(function(){
$(this).animate( //this指定当前选中的对象
{width:"300px",
height:"300px",
borderRadius:"150px", //注意与CSS不同，没有-，而是Radius首字母大写
marginTop:"50px", //注意与CSS不同，没有-，而是Top首字母大写
marginLeft:"50px"}, //注意与CSS不同，没有-，而是Left首字母大写
1500
) ;
});
</script>
AJAX
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出[1]。
传统的Web应用允许用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。
与此不同，AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。
类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。虽然其名称包含XML，但实际上数据格式可以由JSON代替，进一步减少数据量，形成所谓的AJAJ。而客户端与服务器也并不需要异步。一些基于AJAX的“派生／合成”式（derivative/composite）的技术也正在出现，如AFLAX
<h1>Asyncronous JavaScript And XML</h1>
<script>
$.get("test.html",function(data){ //jQuery实现，读取test.html文件后，将其文件内容输出
alert(data);
})
$.ajax({ //使用ajax实现,只能在服务器上面运行，需要http开头的，在本地file开头运行无效。
url:"test.html"
}).done(function(data){
alert(data);
$("h1").html(data); //修改h1内容
$("h1").append(data); //添加h1内容
})
</script>
正则表达式
<script>
var regex = /great/i; //正则表达式，找到返回great，找不到返回null ,后面加i不区分大小写,后面加g(global)能查到重复出现的所有内容
var string = "reges is Great!";
var result = string.match(regex);
alert(result);
</script>
输入框校验代码
<head>
<title>alan's website</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script type="text/javascript" src="jquery-3.3.1.min.js">
</script>
<style>
#wrapper {
width: 500px;
margin: auto;
margin-top: 20px;
font-family:"Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
}
input {
width: 300px;
height: 40px;
padding-left: 8px;
border-radius: 6px;
font-size: 1.1em;
border: 1px solid gray;
margin-top: 10px;
}
label {
width: 200px;
float: left;
padding-top: 18px;
font-size: 1.2em;
}
#submit {
width: 80px;
height: 30px;
margin-left: 330px;
margin-top: 15px;
}
#error{
color:red;
}
</style>
</head>
<body>
<div id="wrapper">
<p id="error"></p>
<form id="validationForm"> <!-- 使用form之后才能把相关元素送到submit中 -->
<label for="email">Email</label>
<input name = "email" id="email" /> <!-- 只有加了name属性的标签元素才会提交到服务器 -->
<label for="telephone">Telephone</label>
<input name="telephone" id="telephone" />
<label for="password1">password</label>
<input name ="password1" id="password1" type="password"/> <!--type为password类型，输入框文字以密文形式显示-->
<label for="password2">confirm password</label>
<input name ="password2" id="password2" type="password" />
<input id="submit" type="submit" value="submit">
</form>
<script>
$("#validationForm").submit(function(event){
var errormessage = "";
event.preventDefault(); //默认保持，不会将数据送到后台
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
if(!isEmail($("#email").val())){
errormessage = "the email address is not valid<br />"
}
if(!$.isNumeric($("#telephone").val())){
errormessage += "the telephone number is not valid<br />"
}
if($("#password1").val()!=$("#password2").val()){
errormessage += "please enter matching password<br />"
}
$("#error").html(errormessage);
if(errormessage==""){
alert("success!");
}
});
</script>
</div>
</body>
网友评论