JQuery

一.基本介绍

jQuery 是一个快速、简洁的 JavaScript 库 ，其设计的宗旨是“write Less，Do More”，即倡导

写更少的代码，做更多的事情。

A.JavaScript库

定义：

是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理

解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如

获取元素等。

简单理解;

就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快

速高效的使用这些封装好的功能了。

B.常见的JavaScript库

1. Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
   
2. Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
   
3. YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
   
4. Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。
   
5. Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。
   
6. jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使
   
7. 它。
   
8. 移动端的zepto
   

A1.为什么使用jquery

Query 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导

写更少的代码，做更多的事情。

学习本质：就是学习调用这些函数（方法）.

A2.jQuery 的 2 把利器

1.jQuery 核心函数

简称： jQuery 函数（ $ / jQuery ）， jQuery 库向外直接暴露的就是 $ / jQuery

引入 jQuery 库后，直接使用即可

当函数用： $(xxx)

当对象用： $.xxx()

// jQuery函数：直接可用
console.log($, typeof $); // ƒ ( selector, context ) {} function
console.log(jQuery === $); // true

jQuery 核心对象

简称： jQuery 对象

得到 jQuery 对象：执行 jQuery 函数返回的就是 jQuery 对象

使用 jQuery 对象： $obj.xxx()

// jQuery对象：执行jQuery函数得到它
console.log($(), typeof $(), $() instanceof Object); // jQuery.fn.init {}
"object" true

A3.jquery函数的使用

• 作为一般函数调用： $(param)
  
• 1. 参数为函数：当 DOM 加载完成后，执行此回调函数
  
• 2. 参数为选择器字符：查找所有匹配的标签并将它们封装成 jQuery 对象
  
• 3. 参数为 DOM 对象：将 dom 对象封装成 jQuery 对象
  
• 4. 参数为 html 标签字符串（用得少）：创建标签对象并封装成 jQuery 对象
  
• 作为对象使用： $.xxx()
  
• $.each() ：隐式遍历数组
  
• $.trim() ：去除两端的空格
  

// 需求1.点击按钮：显示按钮的文本，显示一个新的输入框
// 1、参数为函数：当 DOM 加载完成后，执行此回调函数
$(function () { // 绑定文档加藏完成的监听
// 2、参数为选择器字符：查找所有匹配的标签并将它们封装成`jQuery`对象
$("#btn").click(function () {
// alert(this.innerHTML); // this是什么？发生事件的dom元素（<button>）
// 3、参数为 DOM 对象：将 dom 对象封装成`jQuery`对象
alert($(this).html());
// 4、参数为 html 标签字符串（用得少）：创建标签对象并封装成`jQuery`对象
$('<input type="text" name="msg3"><br/>').appendTo("div");
});
// 需求2.遍历输出数组中所有元素值
var arr = [3, 7, 4];
$.each(arr, function (index, item) {
console.log(index, item); // 0 3 1 7 2 4
});
})

A4. jQuery 对象的使用

理解

• 即执行 jQuery 核心函数返回的对象
  
• jQuery 对象内部包含的是 dom 元素对象的伪数组（可能只有一个元素）
  
• jQuery 对象拥有很多有用的属性和方法，让程序员能方便的操作 dom
  
• 属性和方法
  
• 基本行为：操作标签的基本方法
  
• 属性：操作内部标签的属性或值
  
• CSS：操作标签的样式
  
• 文档：对标签进行增删改操作
  
• 筛选：根据指定的规则过滤内部的标签
  
• 事件：处理事件监听相关
  
• 效果：实现一些动画效果
  

B.选择器

B1.选择器是 jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素

注意：jQuery选择器返回的是jQuery对象。

<script type="text/javascript">
//常用选择器
//根据id获取元素 获取到的结果：类数组对象
console.log( $('#div0') );
console.log( $('#div0')[0] );
//根据class获取元素
console.log( $('.div_1') );
//根据标签名称来获取元素
console.log( $('div') );
//根据属性获取元素
console.log( $('input[name=username]') );
//根据表单元素属性获取元素
console.log( $(':checked') );
</script>

B2.层级选择器

B3.过滤选择器 ： 这类选择器都带冒号

B3.jQuery 筛选方法

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法