Day25 js应用 & jQuery & Ajax

1 事件的冒泡和捕获

.事件冒泡：作用于子标签的事件会传递给父标签；如果希望作用于子标签的事件不传递给父标签，需要在子标签中对事件进行捕获
事件捕获: 事件对象.stopPropagation()

实现城市下拉菜单

动态添加背景

安妞切换效果

practice : 网页安妞切换

2 jQuery 基础

2.1 jQuery简介

jQuery本质就是js，它是为了能够更方便的使用js而封装的一个库
如果想要使用jQuery必须先导入jQuery的js文件
js可以将任何内容转换js对象，例如:document、节点、事件对象
jQuery提供的方法只支持jQuery对象
在jQuery中() -> 创建jQuery对象的语法
document -> js对象； $(document) -> jQuery对象

2.2 ready方法 - 等待网页中内容加载完成

和onload功能一样
语法：
(function(){
页面加载完成后才会执行的代码})

2.3 节点操作

2.3.1 获取节点

语法: $(选择器)
说明: 选择器 - 和CSS中的选择器一样

2.3.2 选择器

普通选择器: 和css一样的
其他特殊情况
- 选择器1>选择器2 - 选中选择器中的选择器2对应的直系子标签
- 选择器1+选择器2 - 选中紧跟着选择器1的选择器2(选择器1和选择器2对应的标签必须是兄弟关系)
- 选择器~选择器2 - 选中离选择器1最近的选择器2(选择器1和选择器2对应的标签必须是兄弟关系)
- 选择器:first - 第一个选择器
- 选择器:last - 最后一个选择器
- 选择器>*:first-child - 选中选择器中第一个子标签 first不是子标签
- 选择器 *:first-child - 选中选择器中第一个子标签

2.3.3 创建节点

语法:
("

我是一个段落

2.3.4 添加节点

jq节点1.append(jq节点2) - 在节点1中的最后添加节点2
节点1.prepend(节点2) - 在节点1的最前面插入节点2
节点1.before(节点2) - 在节点1的前面插入节点2
节点1.after(节点2) - 在节点1的后面插入节点2

2.3.5 删除标签

jq对象.remove() - 删除指定节点
jq对象.empty() - 清空指定节点

2.4 属性操作

2.4.1 标签内容属性: innerHTML、innerText、value

html方法(相当于innerHTML)
- 节点.html() - 获取节点内容
- 节点.html(值) - 给节点内容赋值
text()方法(相当于innerText)
val()方法(相当于value)

2.4.2 普通属性

节点.attr(属性名) - 获取指定节点指定属性的值
节点.attr(属性名,值) - 修改指定节点直接属性的值
class属性
- 节点.addClass(值) - 添加class属性值
- 节点.removeClass(值) - 移除指定的class值

2.4.3 样式属性

获取样式属性的值节点.css(样式属性名)
修改样式属性的值节点.css(样式属性名,值)
节点.css(对象) - 同时设置多种样式

2.4.4 事件绑定

方法一：直接绑定
- 节点.on(事件名,函数) - (和js中的addEventLinsenner功能一样)
- 注意: this是js对象，evt是jQuery对象
- evt是事件对象不是节点对象，所以获取属性的时候以对象获取属性的方式来获取console.log(evt.clientX, evt.clientY)
方式二:
- 节点.on(事件名,选择器,函数) - 给指定节点绑定指定事件，并且让节点中选择器对应的子标签对事件做出反应

2 Ajax请求

practice：周公解梦

Day25 js应用 & jQuery & Ajax

1 事件的冒泡和捕获

2 jQuery 基础

2.1 jQuery简介

2.2 ready方法 - 等待网页中内容加载完成

2.3 节点操作

2.3.1 获取节点

2.3.2 选择器

2.3.3 创建节点

2.3.4 添加节点

2.3.5 删除标签

2.4 属性操作

2.4.1 标签内容属性: innerHTML、innerText、value

2.4.2 普通属性

2.4.3 样式属性

2.4.4 事件绑定

我是标题0

我是标题1

2 Ajax请求

你可能感兴趣的:(Day25 js应用 & jQuery & Ajax)