jQuery
1.jQuery的介绍
1.1jQuery的定义
jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery极大地简化了JavaScript编程。
1.2jQuery的作用
jQuery和JavaScript它们的作用一样﹐都是负责网页行为操作﹐增加网页和用户的交互效果的﹐只不过jQuery简化了JavaScript编程﹐jQuery实现交互效果更简单。
1.3.jQuery的优点
jQuery兼容了现在主流的浏览器﹐增加了程序员的开发效率
jQuery简化了JavaScript编程﹐代码编写更加简单
2.jQuery的使用
Document
哈哈
3.jQuery选择器
1.标签选择器
2.类选择器
3.id选择器
4.层级选择器
5.属性选择器
Document
hello my name is hemingkang
nihao
haha
xiaokang
哈哈
4.选择集过滤
4.1选择集过滤就是在选择标签的集合里面过滤自己需要的标签
4.2选择集过滤的操作
? has(选择器名称)方法，表示选取包含指定选择器的标签
? eq(索引)方法，表示选取指定索引的标签
Document
哈哈
5.选择集转移
选择集转移就是以选择的标签作为参照，然后获取转移后的标签
Document
我
三级标题
我是一个子标签康康
郭伟
杨楷文
网站
6.获取和设置标签内容
Document
哈哈
7.获取和设置元素属性
能够知道获取和设置元素属性的操作
prop方法设置标签属性，样式属性用css方法
Document
我是一个段落标签
8.jquery事件
8.1 常用事件
? click（）鼠标点击
? blur() 元素失去焦点
? focus() 元素获得焦点
? mouseover()鼠标进入（进入子元素也触发）
? mouseout()鼠标离开 （离开子元素也触发）
? ready() DOM加载完成
Document
- 里门
- 凯文
- 博讯
9.事件代理
事件代理就是利用事件冒泡的原理（事件冒泡就是事件会向他的父级一级一级的传递），把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能
Document
康康
- 谢谢
- 不客气
- 你好
10.javascript对象
10.1JavaScript对象的介绍
javascript中的所有事务都是对象：字符串、数值、函数、等都可以认为是对象，此外，JavaScript允许自定义对象，对象可以拥有属性和方法。
10.2JavaScript创建对象操作
创建自定义javascript对象有两种方式：
? 通过顶级Object类型实例化一个对象
? 通过对象字面量创建一个对象
Document
11.json
11.1json的介绍
json是JavaScript Object Notation的首字母缩写﹐翻译过来就是javascript对象表示法﹐这里说的json就是类似于javascript对象的字符串﹐它同时是一种数据格式﹐目前这种数据格式比较流行﹐逐渐替换掉了传统的xml数据格式。
11.2json的格式
? 1.对象格式
? 2.数组格式
对象格式:
对象格式的json数据﹐使用一对大括号({})﹐大括号里面放入key:value形式的键值对﹐多个键值对使用逗号分隔。
对象格式的json数据:
{
"name":"tom",
"age":18
}
格式说明:
json中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。
数组格式:
数组格式的json数据，使用一对中括号([])，中括号里面的数据使用逗号分隔。
数组格式的json数据:
["tom",18,"programmer"]
实际开发的json格式比较复杂,例如:
{
"name":"jack",
"age":29,
"hobby":["reading","travel","photography"]
"school":{
"name":"Merrimack College",
"location":"North Andover, MA"
}
}
json数据转换成JavaScript对象
json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。
示例代码:
var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);
// 操作属性
alert(oPerson.name);
alert(oPerson.age);
- json就是一个javascript对象表示法，json本质上是一个字符串。
- json有两种格式：1. 对象格式, 2. 数组格式
Document
12.ajax
学习目标
- 能够知道ajax的作用
12.1 ajax的介绍
ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。
这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。
12.2 ajax的使用
jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。
$.get和$.post方法的参数说明:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)
- url 请求地址
- data 设置发送给服务器的数据，没有参数不需要设置
- success 设置请求成功后的回调函数
- data 请求的结果数据
- status 请求的状态信息, 比如: "success"
- xhr 底层发送http请求XMLHttpRequest对象
- dataType 设置返回的数据格式
- "xml"
- "html"
- "text"
- "json"
- error 表示错误异常处理
- func 错误异常回调函数
小结
- ajax 是发送http请求获取后台服务器数据的技术
- ajax的简写方式可以使用$.get和$.post方法来完成