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');
------ 本文结束 ------