JQuery
1.安装
-
下载jar包
-
或者
npm install jquery 或者 yarn add jquery
2.jQuery 使用版本
我们可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本
3.jQuery 语法
3.1通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
实例:
-
$(this).hide() - 隐藏当前元素
-
$("p").hide() - 隐藏所有
元素
-
$("p.test").hide() - 隐藏所有 class="test" 的
元素
-
$("#test").hide() - 隐藏 id="test" 的元素
3.2所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
// 开始写 jQuery 代码...
});
或者
$(function(){
// 执行代码
})
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作
jQuery 入口函数与 JavaScript 入口函数的区别:
-
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。可多次执行且不会被覆盖
-
JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。只能执行一次,多次执行会被覆盖
4.事件
dblclick()
当双击元素时,会发生 dblclick 事件。
mouseenter()
当鼠标指针穿过元素时,会发生 mouseenter 事件。
mouseleave()
当鼠标指针离开元素时,会发生 mouseleave 事件。
mousedown()
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
mouseup()
当在元素上松开鼠标按钮时,会发生 mouseup 事件。
hover()
hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
focus()
当元素获得焦点时,发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
blur()
当元素失去焦点时,发生 blur 事件。
blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数:
5.隐藏显示
5.1 jQuery hide() 和 show()
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$(selector).hide(speed,callback);
5.2 jQuery toggle()
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素
6.淡入淡出
jQuery Fading 方法
fadeIn()
用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeOut()
用于淡出可见元素,语法同fadeIn()
fadeToggle()
可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法同fadeIn()
fadeTo()
允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
$(selector).fadeTo(speed,opacity,callback);
7. 上下滑动
slideDown()
用于向下滑动元素。
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
slideUp()
用于向上滑动元素,语法同上
slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
8.动画
animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
实例
$("button").click(function(){
$("div").animate({ left:'250px',
opacity:'0.5',
height:'150px',
'150px' });
});
9.stop()
适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
可以在 stop() 中设置 stopAll 的参数为 true,这样就可以停止所有动画效果而不是只停止当前动画
10.链
允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
11.获取内容
11.1 三个简单实用的用于 DOM 操作的 jQuery 方法:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
11.2 获取属性 - attr()
jQuery attr() 方法用于获取属性值。
$("button").click(function(){
alert($("#runoob").attr("href"));
});
** prop()函数的结果:**
1.如果有相应的属性,返回指定属性值。
2.如果没有相应的属性,返回值是空字符串。
attr()函数的结果:
1.如果有相应的属性,返回指定属性值。
2.如果没有相应的属性,返回值是 undefined。
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用 attr 方法。
12. 设置内容 - text()、html() 以及 val()
12.1我们将使用前一章中的三个相同的方法来设置内容:
-
text() - 设置或返回所选元素的文本内容
-
html() - 设置或返回所选元素的内容(包括 HTML 标记)
-
val() - 设置或返回表单字段的值
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
12.2 设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变(设置)链接中 href 属性的值:
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
attr(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
13. 添加新的 HTML 内容或元素
我们将学习用于添加新内容的四个 jQuery 方法:
内:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
外:
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
$("p").prepend("在开头追加文本");
$("body").append(txt1,txt2,txt3); // 追加新元素
上述方法均可用于添加内容或者元素
14. 删除元素/内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
下面的例子删除 class="italic" 的所有
元素:
$("p").remove(".italic");
15. jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
16. jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性
- 返回指定的 CSS 属性的值,请使用如下语法:
css("propertyname");
- 设置指定的 CSS 属性,请使用如下语法:
css("propertyname","value");
17. jQuery 尺寸方法
jQuery 提供多个处理尺寸的重要方法:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
18. 遍历
18.1向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
- parent():直接父元素
$("span").parent();
-
parents():所有父元素,直至根元素
-
parentsUntil():两者之间的所有祖先元素
$("span").parentsUntil("div");
18.2 向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
- children() 遍历 直接子元素,也可以使用可选参数来过滤对子元素的搜索。
- find() 返回被选元素的后代元素,一路向下直到最后一个后代。
18.3 在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
- siblings() 返回被选元素的所有同胞元素。也可以使用可选参数来过滤对同胞元素的搜索
$("h2").siblings("p");
- next() 返回被选元素的下一个同胞元素
- nextAll() 返回被选元素的所有跟随的同胞元素。
- nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
$("h2").nextUntil("h6");
-
prev()
-
prevAll()
-
prevUntil()
18.4 过滤
first()
last()
eq() 返回被选元素中带有指定索引号的元素。
下面的例子选取第二个
元素(索引号 1):
$("p").eq(1);
filter()
返回带有类名 "url" 的所有
元素:
$("p").filter(".url");
not() 与filter()作用相反
AJAX
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
1. load()
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示"外部内容加载成功!",而如果失败,则显示错误消息:
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
2.get() 和 post() 方法
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
2.1 $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名
第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "
状态: " + status);
});
2.2 $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据:
" + data + "
状态: " + status);
});