jQuery

1.jQuery介绍

JS中支持使用 $ 这个标识符

• 引入：我们以前使用DOM对象来改变或者获取相关属性的value值，DOM对象的方法都特别的长，不容易记住， 而且代码的观赏性较差，因此就出现了一种新的技术JQuery。
  
• jQuery:是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化 JavaScript 对 HTML DOM 操作
  
• jQuery是一个Java的工具类，库是存放东西的，JQuery是存放js代码的地方。
  放的是用js代码写的function() --> (函数)
  
• jQuery官网介绍 ：jQuery是一个快速、小且功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，并提供了一个跨多种浏览器的易于使用的API。jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。
  write less , do more

2. 为什么使用 jQuery

• 它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器 处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX 异步对象。

3. jQuery的特点

（1）写少代码,做多事情【write less do more】

（2）免费，开源且轻量级的 js 库，容量很小

（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome

（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX 功能  （5）文档手册很全，很详细

（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）

（7）出错后，有一定的提示信息

（8）不用再在 html 里面通过

例如：使用 JavaScript 定位 DOM 对象常用的三种方式：

（1）通过 ID 属性：document.getElementById()

（2）通过 class 属性：getElementsByClassName()

（3）通过标签名：document.getElementsByTagName()

上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率容易出错。

jQuery 分别使用(“#id”) , (“.class 名”) , $(“标签名") 封装了上面的 js 方法。

4.关于jQuery的下载

• 官网地址：jQuery，在官网地址点击要下载的版本，会发现是一堆代码，直接将这个网页保存即可。（Ctrl+S 直接进行保存到本地即可）

• 官网名称：

• 本地下载完的名称

• 开发时使用的是 ：uncompressed 未压缩版
  
• 工作时使用的是 ：compressed （min）压缩版
  
• 压缩版与未压缩版的区别：

• 压缩版压缩掉了代码原来的空白以及注释，代码紧密的凑在一起。
• 未压缩版就是开发人员书写时的格式，不会去除空白地方和注释。

5. DOM对象

• DOM 对象 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展 标志语言的标准编程接口。 通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节 点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。比如：网页中的按钮、文本、盒子等等...

6. JavaScript 对象和 jQuery 对象

• 用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对 象的 API。 用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。
• jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。 JQuery 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便， 我们都是将 JavaScript 对象转化成 Jquery 对象

7.DOM 对象和 jQuery 对象

8. DOM 对象与 jQuery 对象之间的转换

8.1  DOM 对象转换 jQuery 对象

• 使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为 jQuery 对象才可以 使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了 与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

8.2 jQuery 对象转换DOM对象

• jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM 对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

9.选择器（非常重要）

• 选择器就是一个字符串，是用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom对象。
• 通过选择器定位获取的dom对象，此时会转变为 jQuery对象

9.1 基本选择器

• id选择器：通过dom对象的id定位dom对象，通过id找对象，id在当前页面中是唯一的。

$("#dom对象的id值")

• class选择器：class表示css中的样式，使用样式的名称定位dom对象。

$(".class样式名")

• 标签选择器：使用标签的名称定位dom对象。

$("标签名称")

9.2 所有选择器

• 所有选择器：选取页面中所有的DOM对象

$("*")

9.3 组合选择器

• 组合选择器是多个被选中对象间使用逗号隔开后形成的选择器，可以组合 id、class、标签名等
  
• 可以任意组合，一个、两个、三个都可以。

$("#id,.class,标签名")

jQuery基础知识总结

10.表单选择器

• 表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单， 表单选择器是根据元素类型来定义的
  注意：无论是否存在表单，表单选择器都会根据相应的type属性值做出选择。
  表单选择器主要是根据 type值进行定位的
  只有type属性的标签才具有 表单选择器
  

<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">
$(":tr"): 不能用，tr 不是 input 标签
复制代码

表单选择器: 使用  标签的type属性值，定位dom对象的方法。

语法格式 :  $(":type属性值")

例如：
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
$(":butten")选取所有的按钮
复制代码