前端(jQuery)(1)-- JQuery简介及语法
1、jQuery库简介
1.1、jQuery:
jQuery库可以通过一行简单的标记被添加到网页中
1.2、什么是jQuery:
jQuery是一个JavaScript函数库(由于底层封装的问题,不需要再担心浏览器兼容性的问题)
1.3、jQuery库包含的功能:
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数(不同浏览器有一些方面是不相通的,使用jQuery之后就不要担心这个问题了。)
JavaScript特效和动画
HTML DOM遍历和修改
AJAX(不修改页面内容将服务器内容显示在页面上,有非常好的用户体验)
Utilities
2、引入jQuery的方法
2.1、网页中添加jQuery
1.从jquery.com下载jQuery库
2.从CDN中载入jQuery,如从google中加载jQuery
百度和新浪的服务器存有jQuery
例如:http://libs.baidu.com/jquery/1.10.2/jquery.min.js
谷歌和微软的服务器存有jQuery
例如:http://ajax.googleapis.com/ajax/libs/jquery/jquery.min.js
2.2、版本介绍
v1.11.1:1.x支持IE6+
v2.1.1:2.x支持IE9+
3、jQuery的基本语法
3.1、jQuery语法
基础语法: $(selector).action()
美元符号定义jQuery
选择符(selector)查询和查找HTML元素
jQuery的action()执行对元素的操作
例如:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏当前所有段落
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){/*当前文档加载完毕后执行的功能。*/ alert("文档加载完毕!"); $("p").click(function(){ $(this).hide();/*这里的隐藏直接连他所占的div空间都没有了。*/ }); }); </script> </head> <body> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> </body> </html>