今日内容

一、JQuery

零、 复习昨日

1 写出至少15个标签
2 写出至少7个css属性font-size,color,font-familytext-algin,background-color,background-image,background-sizewidth,heighttop,bottom ,left ,rightpositionfloatbordermarginpadding
3 写出input标签的type的不同属性值以及解释type=text,password,radio,checkbox,date,email,file,submit,reset,button
4 写出js通过id获得dom对象的语句var domObj = document.getElementById("id");
5 写出js代码:获得input的值var val = input.value;input.value = "";
6 写出几个表单事件onfocus onblur onchange onsubmit

一、引言

1.1 jQuery概述

jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

Logo

1.2 jQuery特点

• 具有独特的链式语法。
• 支持高效灵活的CSS选择器。
• 拥有丰富的插件。
• 兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.3 为什么要用jQuery

• 目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。很多大公司都在使用 jQuery， 例如：Google、Microsoft、IBM、Netflix

二、jQuery安装

2.1 直接引用jQuery

从 jQuery.com 官网或从GitHub下载合适版本（本课程使用2.1.0版本），放入项目的合适目录中，在页面中直接引用。

有两个版本的 jQuery 可供下载：

• Production version - 用于实际的网站中，已被精简和压缩。
• Development version - 用于测试和开发（未压缩，便于可读）。

jQuery 库是一个 JavaScript 文件，使用 HTML 的 < script src=“”>< /script> 标签引用

2.2 CDN引用

2.2.1 什么是CDN？

CDN的全称是Content Delivery Network，即内容分发网络 , 使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

2.2.2 常见 CDN

百度 CDN

新浪 CDN

Google CDN

Microsoft CDN

三、选择器

选择器有很多种,具体查询APIjQuery 参考手册 - 选择器 (w3school.com.cn)

主要是DOM操作，事件处理。

主要学习几个基本即可

• 标签名
• id
• 类

3.1 元素选择器

• 元素选择器：jQuery 元素选择器基于元素名选取元素。

• 示例：在页面中选取所有

  元素

  
曹操
曹植
曹丕
曹冲

3.2 id选择器

• id选择器：jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

• 页面中元素的 id 应该是唯一的，所以要在页面中选取唯一的元素需要通过 #id 选择器。通过 id 选取元素语法如下：

  
曹操
曹植
曹丕
曹冲

3.3 类选择器

• class选择器：jQuery 类选择器可以通过指定的 class 查找元素。

• 语法如下：

  
曹操
曹植
曹丕
曹冲

3.4 其他选择器

查看API

四、JavaScript和JQuery转换

JS操作是原生js操作,都是对象.属性操作

var ele = document.getElementById(id);
var val = ele.value;
ele.value = "";
ele.style = "";

JQuery是封装js操作,全是函数操作（方法操作 ）

$("#id").val();
$("#id").val("值");
$("#id").css("color","red");
$("#id").click(function() {})

---

JS和JQuery是不同的 （不管使用何种选择器，jp都是将元素封装到数组中）

按钮

4.1 JavaScript转成JQuery

      // js转成jq对象,只需要将js对象装进jq数组中var jqObj = $(jsObj);console.log(jqObj);

4.2 JQuery转成JavacScript

      // jquery转成js对象,只需要从jq数组中取出即可var jsObj = jqBtn[0];console.log(jsObj);

五、事件

5.1 常见事件

js中都是onXX(标签的属性) jQuery(方法) 赋的值是函数，（回调）

语法：

​ jq 对象.事件函数();

扩展：将响应函数当参数传递给click函数 —> 类似lamdba

按钮

5.2 事件语法

• jQuery 事件方法语法：

• 在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

• jq对象.事件方法(),例如

• $(“#i1”).click()

5.3 鼠标事件

  点单击事件点双击击事件