01 jQuery入门

Posted xujinglog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了01 jQuery入门相关的知识,希望对你有一定的参考价值。

1.jQuery概诉

1.1 javascript

仓库:可以把很多东西放到这个仓库里面,找东西只需要到仓库里面查找到就可以了

javaScript库:即library,是一个封装好的特定的集合(方法和函数)。
从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate,hide,show比如获取元素

简单理解:库就是一个JS文件,对原生JS代码进行封装,高效使用

常见的javaScript库

  • jQuery

  • prototype

  • YUI

  • Dojo

  • Ext js

  • 移动端的zepto

1.2 jQuery的概念

jQuery 是一个快速、简介的javaScript库,宗旨是"write Less,Do More" ,倡导写更少的代码做更多的事情

j 是 javaScript ,Q 是 Query查询,意思就是查询js,把js中的DOM操作做了封装,可以快速的查询使用里面的功能

优化了DOM操作、事件处理、动画设计、Ajax交互

学习jQ的本质就是学习调用这些函数(方法),提高开发效率

1.3 jQuery 的优点

优点

  • 轻量级。核心文件才几十kb,不会影响页面加载速度

  • 跨浏览器兼容,基本兼容主流浏览器

  • 链式编程,隐式迭代

  • 对事件、样式、动画支持、大大简化DOM操作

  • 支持插件扩展开发,如:树形菜单、日期控件、轮播图

  • 免费、开源

2.jQ的基本使用

2.1 jQuery的下载

1x :兼容 IE 678 等低版本浏览器, 官网不再更新

2x :不兼容 IE 678 等低版本浏览器, 官网不再更新

3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的版本

官网地址: https://jquery.com/

各个版本的下载:https://code.jquery.com/

2.2 jQuery的使用步骤

  1. 引入jQuery文件

  2. 使用即可

     <!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="jquery.min.js"></script>
         <style>
             div {
                 width: 200px;
                 height: 200px;
                 background-color: pink;
             }
         </style>
     </head>
     
     <body>
         <div></div>
         <script>
             $(‘div‘).hide()
         </script>
     </body>
     
     </html>
    

2.3 jQuery的入口函数

两种写法

$(document).ready(function() {
	...// DOM加载完成的入口
})

$(function() {
    ...// DOM加载完成的入口
})
  1. 等着DOM结构渲染完毕即可执行内部代码,不用等待外部资源加载完成加载完成,jQuery帮我们完成了封装

  2. 相当于原生js中的DOMcontentLoaded

  3. 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码

  4. 更推荐使用第一种方式

2.4 jQuery的顶级对象$

  1. $是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$

  2. $ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用 jQuery 的方法。

     <!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="jquery.min.js"></script>
     
         <style>
             div {
                 width: 200px;
                 height: 200px;
                 background-color: pink;
             }
         </style>
     </head>
     
     <body>
         <div></div>
         <script>
             // 1.$是jQuery的别称
             $(function() {
                 alert(‘11‘)
             })
             jQuery(function() {
                 alert(‘22‘)
             })
             // 2.$是jQuery的顶级对象,相当于原生javaScript中的window
         </script>
     </body>
    

2.5 jquery对象和DOM对象

  1. 原生JS获取来的对象就是DOM对象

  2. jQuery方法获取的元素就是jQuery对象

  3. jQuery对象本质:利用$对DOM对象包装后产生的对象(伪数组形式存储)

  4. jquery 对象只能使用jquery方法,DOM对象则使用 原生js属性和方法

这两个可以互相转换,因为原生js比jq更大,原生有的属性jq没有,想要使用这些属性和方法需要把jq对象转换DOM对象才能使用

DOM对转换jq对象

$(DOM对象)

jq对象转换为DOM对象

$(‘‘)[index]
$(‘‘).get(index)

演示

<!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="jquery.min.js"></script>
</head>

<body>
    <video src="mov.mp4" muted></video>
    <script>
        // 1. DOM对象转换为jquery对象
        // (1)直接获取视频,得到jq对象
        $(‘video‘)

        // (2) 使用原生js 获取过来DOM对象
        var myvideo = document.querySelector(‘video‘)
            // $(myvideo).play() jq 没有play方法
            // myvideo.play()

        // 2.jq对象转换为DOM对象
        $(‘video‘)[0].play()
        $(‘video‘).get(0).play()
    </script>
</body>

</html>

以上是关于01 jQuery入门的主要内容,如果未能解决你的问题,请参考以下文章

01 jQuery入门

01 jQuery入门

jQuery应用 代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面