zoukankan      html  css  js  c++  java
  • jQuery之概念以及基本使用

    1. jQuery的概述

    1.1 jQuery的概念

    jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是“Write Less,Do More”

    jQuery主要是封装了JavaScript常用的功能代码,优化了DOM操作、时间处理、动画设计和Ajax交互。

    学习jQuery的本质就是:学习调用这些函数(方法)

    jQuery出现的目的就是加快前端人员的开发速度,我们可以灰常方便地调用以及使用它,从而提高开发效率

    jQuery与原生js形象比喻

     

    1.2 jQuery的优点

    • 轻量级,核心文件才几十kb,不会影响页面加载速度
    • 跨浏览器兼容,基本兼容了现在的主流浏览器
    • 链式编程,隐式迭代
    • 对事件、样式、动画支持,大大优化了DOM操作
    • 支持插件扩展开发,有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等
    • 免费、开源

    2. jQuery的基本使用

    2.1 jQuery的下载

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

     

     

    版本信息:

    1x:兼容IE678等低版本的浏览器,官网不再维护更新

    2x:不兼容IE678等低版本的浏览器,官网不再维护更新

    3x:不兼容IE678等低版本的浏览器,官网主要维护更新的版本

    所有版本的下载网址:https://code.jquery.com/

    2.2 jQuery的使用步骤

    1.引入jQuery文件

    <script type=”text/javascript” href=”jquery.min.js”></script>

           其中jquery.min.js是你所下载下来的jQuery文件

    2.使用即可

    2.3 jQuery的入口函数

    $(function(){

           … //此处是页面DOM加载完成的入口

             //等着页面DOM加载完毕再去执行js代码

    });

    $(document).ready(function(){

           … //此处是页面DOM加载完成的入口

    //等着页面DOM加载完毕再去执行js代码

    });

    1. 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery帮我完成了封装。
    2. 相当于原生js中的DOMContentLoaded
    3. 不同于原生js的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码
    4. 推荐使用第一种

    2.4 jQuery的顶级对象 $

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

           $(function(){

                  alert(11);

    });

    jQuery(function(){

                  alert(11);

    });

           以上代码的结果是一样的

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

    2.5 jQuery对象和DOM对象

    1. 利用原生js来获取的对象就是DOM对象

           var myDiv = document.querySelector(‘div’); //myDiv 是DOM对象

    2. 用jQuery方式获取的对象就是jQuery对象。

           $(‘div’); // $(‘div’)是jQuery对象

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

    4. jQuery对象只能使用jQuery方法,DOM对象则使用原生js的属性以及方法

           myDiv.style.display=’none’;//正常执行

           $(‘div’).style.display=’none’;//执行时会报错

           $(‘div’).hide();//正常执行

           myDiv.hide();//执行时会报错

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

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

    l  DOM对象转换为jQuery对象 $(DOM对象)

    $(‘div’);

    l  jQuery对象转换为DOM对象(两种方式)

    $(‘div’)[index] index是索引号

    $(‘div’).get(index) index是索引号

  • 相关阅读:
    js截取字符串区分汉字字母代码
    List 去处自定义重复对象方法
    63. Unique Paths II
    62. Unique Paths
    388. Longest Absolute File Path
    41. First Missing Positive
    140. Word Break II
    139. Word Break
    239. Sliding Window Maximum
    5. Longest Palindromic Substring
  • 原文地址:https://www.cnblogs.com/Jim-Wang/p/11938773.html
Copyright © 2011-2022 走看看