Fork me on GitHub

jQuery学习笔记（一）

发表于 | 分类于

jQuery概述

jQuery概念

  • JavaScript：基于JS语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素，同时能用来动态操作样式css、数据访问、控制响应事件等。

    • 不使用JQuery（使用JavaScript）时获取DOM文本的操作如下：
      1
      document.getElementById('info').value = 'Hello World!';

  • JQuery是基于JavaScript的，与JS作用一样，在使代码更加简练的同时提高了代码的效率。

    • 使用JQuery时获取DOM文本操作如下：
      1
      $('#info').val('Hello World!');

  • 可以看出，使用JQuery的优势之一是可以使代码更加简练，使开发人员更加专注于逻辑本身。

jQuery是什么

  • jQuery是一个快速简洁的JavaScript代码仓库，称为JavaScript框架。
  • jQuery可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。
  • jQuery的优势：
    • 轻量级、体积小，使用灵巧(只需引入一个js文件)
    • 强大的选择器
    • 出色的DOM操作的封装
    • 出色的浏览器兼容性
    • 可靠的事件处理机制
    • 完善的Ajax
    • 链式操作、隐式迭代
    • 方便的选择页面元素(模仿CSS选择器更精确、灵活)
    • 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
    • 控制响应事件(动态添加响应事件)
    • 提供基本网页特效(提供已封装的网页特效方法)
    • 快速实现通信(ajax)
    • 易扩展、插件丰富

jQuery包的引入

  • jQuery可以使用 HTML 的<script>标签引入。
    • 引入本地的JQuery
    • 引入Google在线提供的库文件（稳定可靠高速）
    • 使用Google提供的API导入

讲解$(function(){})

  • 在JQuery库中，$是JQuery的别名，$()等效于就jQuery()。
  • $(function(){});相当于页面初始化函数，当页面加载完毕，会执行jQuery()。
  • 希望在做所有事情之前，jQuery操作DOM文档。必须确保在DOM载入完毕后开始执行，应该用ready事件做处理HTML文档的开始。
  • $(document).ready(function(){});
    • 类似于js的window.onload事件函数，但是ready事件要先于onload事件执行
    • window.onload = function(){};
  • jQuery的ready事件不等于JS的onload事件：
    • 执行时机不同：load需要等外部图片和视频等全部加载才执行。ready是DOM绘制完毕后执行，先与外部文件。
    • 用法不同：load只可写一次，ready可以多次。

window.onload与$(document).ready()对比

window.onload $(document).ready()
执行时机 必须等网页中所有内容加载完后(包括图片)才执行 网页中的DOM结构绘制完后就执行,可能DOM元素相关的东西并没有加载完
编写个数 不能同时执行多个 能同时执行多个
简化写法 无 $(function(){ });

jQuery有哪些功能(API)

  • 选择器
  • 过滤器
  • 事件
  • 效果
  • ajax

jQuery基本选择器

  • jQuery基本选择器可分为ID选择器，标签选择器，类选择器，通配选择器和组选择器5种。
    • ID选择器：document.getElementById(id)与$(“#id”)对比
      id唯一，返回单个元素。
    • 标签选择器：document.getElementsByTagName(tagName)与$(“tagname”)对比
      多个标签，返回数组。
    • 类选择器:$(“.className”)
      多个classname（改变背景图片）。
    • 通配选择器：document.getElementsByTagName(“*“)与$(“*“)对比
      指范围内的所有标签元素。
    • 组选择器：$(“seletor1,seletor2,seletor3”)
      无数量限制，用逗号分割。

初步了解jQuery

jQuery的优势

  • 使用jQuery可以方便DOM的选取和操作、响应用户操作、简化AJax操作。
    • 方便的选取DOM元素，操作DOM元素。（HTML元素选取、HTML元素操作、获取DOM元素、动态修改页面样式、动态改变DOM内容）
    • 响应用户操作。（HTML事件函数、JavaScript特效和动画、响应用户的交互操作、为页面添加动态效果）
    • 简化AJAX操作。（方便地为网站提供AJAX交互、统一Ajax操作）

jQuery与DOM之间的关系

  • jQuery对象就是用jQuery包装DOM之后产生的对象。jQuery对象是jQuery独有的，可以使用jQuery的各种方法。

    1
    2
    3
    $("#test").html();
    //获取ID为test的元素内的html代码。
    //其中html()是jQuery里的方法 。

  • 以上代码的作用等同于用DOM实现代码：

    1
    document.getElementById("id").innerHTML;

  • 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。

  • 用#id作为选择器获取得的是jQuery对象，document.getElementById(“id”)得到的DOM对象，这两者并不等价。

jQuery与DOM之间的相互转换

  • DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

    JQuery对象 -> DOM对象

  • 将一个JQuery对象转换成DOM对象有两种转换方法：[index]和.get(index);

    1. jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

      1
      2
      var v1 = $("#test") ; //jQuery对象
      var v2 = $v1[0]; //DOM对象

    2. 通过.get(index)方法，得到相应的DOM对象。

      1
      2
      var v1 = $("#test"); //jQuery对象
      var v2 = v1.get(0); //DOM对象
DOM对象 -> JQuery对象
  • 对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象。
    • 如$(document.getElementById(“test”))。
  • DOM对象转换为JQuery对象之后就可以使用JQuery的方法了。
    1
    2
    var v1=document.getElementById("test"); //DOM对象
    var v2=$(v1); //jQuery对象

jQuery中“$”的作用

  • $其实就是jQuery的别称。是jQuery提供的一个函数，用来将DOM元素、选择器包装成jQuery对象。

    1
    2
    var v1 = $('#id');
    var v2 = jQuery('#id');//两者是等同的

  • “$”其实是一个符号，$()代替了jQuery(),也可以使用其他的字符来代替”$”。

    1
    2
    var jq = jQuery.noConflict();//使用jq来代替"$"。
    var v1 = jq('#id'); // 等同于var v1 = $('#id');
------ 本文结束 ------