[TOC]

什么是jQuery

我们以前使用js获取DOM对象时，总是需要写一长串的代码，十分繁琐，操作又臭又长。
image.png
所以有些牛人就把js中的一些操作方式，进行了一些升级，让它变得简短又方便，jQuery是用来帮助我们操作document的，它封装了JavaScript中的一些方法，让我们操作DOM更加方便、容易。

$是函数名

我们以前获取文本对象，大多数都是这么获取的

<body>
    <input type="text" id="txt1" value="i am txt1"/>
    <input type="button" value="btn1" onclick="fun1();"/>
    <script>
        function fun1(){
            var txt1 = document.getElementById("txt1");
            alert(txt1.value);
        }
    </script>
</body>

这样可以获取到我们的文本对象，但是用get方法太长一串了，如果我们想简化代码，可以把get方法封装到一个函数中。

<body>
    <input type="text" id="txt1" value="i am txt1"/>
    <input type="button" value="btn1" onclick="fun1();"/>
    <script>
        function fun1(){
            var txt1 = getDOMObj("txt1");
            alert(txt1.value);
        }
          function getDOMObj(domId){
            return document.getElementById(domId);
        }
    </script>
</body>

那么，现在使用getDOMObj函数和使用最开始的get函数的效果是一样的，如果我们还想简化代码，可以把getDOMObj函数名换成a，换成b…，但是这样简化是简化了，a这种名称，经常被使用赋值别的值，所以我们又想到我们可以使用$这种不怎么用到的字符来做为函数名。
$符是就jQuery中操作符，这里仅做引入知识。

初识jQuery

jQuery优点：

  • 写少代码，做多事情
  • 免费，开源且轻量级的js库，容量很小
  • 兼容市面上主流的浏览器，如IE、Firefox、Chrome
  • 能够处理HTML/JSP/XML、Css、DOM、事件、实现动画效果、也能提供异步Ajax功能
  • 文档手册很全，很详细
  • 成熟的插件可供使用，多种js组件
  • 出错后，有提示信息
  • 不用再HTML中通过