简介
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
1:选择器
jQuery大大简化了DOM获取页面某个节点或者某一类节点的固定方法。
//javascript 获取ID
document.getElementById("demo")
//jQuery 获取ID
$("#demo")
DOM文档加载步骤:
1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function()})内对应代码
5.加载图片等二进制资源
6.页面加载完毕,执行window.onload
2:修改页面的外观
由于各个浏览器对CSS3标准的支持不同,是很多CSS3的样式风格没能很好的体现。jQuery的出现很好的解决了这个问题。它通过封装好的JavaScript代码,是各种浏览器能很好的使用CSS3标准。
3:更改页面内容
通过强大而方面的API,jQuery可以很方便的修改页面的内容,甚至整个页面的框架。
API手册:https://jquery.cuishifeng.cn/
4:响应事件
不需要在考虑浏览器的兼容性问题,可以更加轻松的处理事件。
//ready:在浏览器加载web页面时触发,可以写多次ready事件,不会后者覆盖前者,依次从上向下执行,我们常用$(函数)简化,ready和onload同时存在时,二者都会触发执行,ready快于onload
$(document).ready(function(){
// 在这里写你的代码...
});
//or
$(function($) {
// 你可以在这里继续使用$作为别名...
});
//change:当内容改变时触发
//发生变化时改变其背景颜色
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
//focus:焦点获取
//当输入框获得焦点时,改变它的背景色
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
//blur:焦点失去
//当输入域失去焦点 (blur) 时改变其颜色
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
//select:选中所有的文本值
//在文本域后添加文本,以显示出提示文本(Text marked!):
$("input").select(function(){
$("input").after(" Text marked!");
});
//keyup/keydown/keypress:演示在IE和Firefox中获取event对象的不同
//mousemove:在指定区域中不断移动触发
//mouseover:鼠标移入时触发
//mouseout:鼠标移出时触发
//submit:在提交表单时触发,true表示提交到后台,false表示不提交到后台
//click:单击触发
//dblclick:双击触发
//当双击按钮时,隐藏或显示元素
$("button").dblclick(function(){
$("p").slideToggle();
});
5:为页面添加动画
jQuery的库提供了大量可自定义参数的动画效果。
//必需的 params 参数定义形成动画的 CSS 属性。
//可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
//可选的 callback 参数是动画完成后所执行的函数名称。
$(selector).animate({params},speed,callback);
//简单应用:它把 <div> 元素移动到左边,直到 left 属性等于 250 像素为止
$("button").click(function(){
$("div").animate({left:'250px'});
});
6:与服务器异步交互
jQuery提供了一整套Ajax相关的操作,大大方便了异步交互的开发和使用。
具体使用方法:https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
7:简化常用的JavaScript操作
jQuery提供了很多附加的功能来简化常用的JavaScript操作;jquery主要简化bai的是HTML DOM的操作。
//javascript 获取ID
document.getElementById("demo")
//jQuery 获取ID
$("#demo")