前端（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>

巴特西