JQuery简介

JQuery是一个快速、简洁的Javascript库，其设计的宗旨是“write Less ,Do More",即倡导写更少的代码，

做更多的事情。

J就是Javascript；Query查询;意思就是查询JS，把Js中的DOM操作做了封装，我们可以快速的查询使用里面

的功能。

jquery封装了javascript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。

学习jQuery的本质：就是学习调用这些函数（方法）.

jQuery出现的目的是加快前端人员的开发速度，我们可以非常方柏霓的调用和使用它，从而提高效率。

 

那么jquery如何使用呢？

第一步、引入jquery文件

  在线引入<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
本地引入<script src="js/jquery.min.js"></script>，得先到jquery.com下载jquery源文件

第二步、调用jquery函数

jquery的入口函数

$(function(){})或者

$(document).ready(function(){
　　//入口

<!DOCTYPE html><html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="js/jquery.min.js"></script> -->
    <!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> -->
    <!-- <script src="https://code.jquery.com/jquery-3.5.1.js"></script> -->
    <!-- 　<script src="http://libs.baidu.com/jquery/3.4.1/jquery.min.js"></script> -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
   
    <div></div>
    <script>
　　　　　　
//hide()是jquery自带的函数
        $('div').hide();
    </script>
</body>

</html>

$是jQuery的别称(另外的名字）

$(function(){
}）;想当于jQuery(function(){});

1、DOM对象：用原生JS获取过来的对象就是DOM对象

例：var div=document.querySelector('div');

2、jquery对象：用jQuery方式获取过来的对象是jQuery对象。本质：通过把DOM元素进行了包装

例：$(div);//这是一个jquery对象

3、jquery对象只能使用jquery方法；DOM对象则使用原生的JavaScript属性和方法

 

DOM对象与jQuery对象之间是可以相互转换的。

因为原生JS比jQuery更大，原生的一些属性和方法jQuery没有给我们封装。想要使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用

1、DOM对象转换为jQuery对象：$(DOM对象）

2、jQuery对象转换为DOM对象（两种方式）：jQuery对象[index]或jQuery对象.get[index]

　　$('div')[index] index是索引号

　　$('div').get(index) index是索引号

　　

 

posted @ 2020-08-10 10:42  webpon  阅读(226)  评论(0)  编辑  收藏  举报