前端(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>
原文地址:https://www.cnblogs.com/foreverlin/p/10112379.html