文章目录

• 一. JQuery介绍
• 二. JQuery使用
• 三. JQuery选择器
• 四. JQuery选择集过滤
• 五.JQuery选择集转移
• 六. JQuery获取和操作标签内容
• 七. JQuery获取和设置元素属性
• 八. JQuery事件
• 九.JQuery事件代理
• • - 事件冒泡
  • - 事件绑定的问题
  • - 事件代理

一. JQuery介绍

• 定义: jquery是JS的一个函数库
• 作用: 负责网页交互
• 优点: 兼容主流浏览器, 简化JS编程过程, 提高开发效率

二. JQuery使用

• JS对象和Jquery对象转换

js对象 ----> jquery对象
oDiv ----> $(oDiv)Jquery对象 ----> js对象
$Div ----> $Div[0]

• 在浏览器中, 可以使用控制台

> var oDiv = document.getElementById('box')
undefined
> oDiv;
 这是一个div 
> var $Div = $(oDiv)
undefined
> $Div
n.fn.init [div#box, context: div#box]
> $Div[0]
 这是一个div 
> $Div[1]
undefined

三. JQuery选择器

这是第一个div
好好学习
这时第二个div
天天向上

四. JQuery选择集过滤

这是第一个div
好好学习
这是第二个div 
天天向上

五.JQuery选择集转移

• 注意: 转移不包含自己, 而过滤是包含自己的

文字1
文字2
文字3
文字4
文字5
文字6
文字7
文字8
this is div1
this is p1
this is div2
this is p2

六. JQuery获取和操作标签内容

• 获取标签内容: 标签对象.html()
• 设置标签内容: 标签对象.html('内容')
• 追加标签内容: 标签对象.append('内容')

好好学习

七. JQuery获取和设置元素属性

百度

八. JQuery事件

• 鼠标点击: click()
• 失去焦点: blur()
• 获得焦点: focus()
• 鼠标进入: mouseover()
• 鼠标离开: mouseleave()
• 页面标签加载完成: $(document).ready()

这是一个div

九.JQuery事件代理

• 事件代理: 使用事件冒泡的原理, 让父标签代理子标签的事件

$(父标签选择器).delegate(子标签选择器, 代理事件, 处理函数);

- 事件冒泡

This is div 
Good Good Study

- 事件绑定的问题

文字1
文字2
文字3
文字4
文字5

- 事件代理

文字1
文字2
文字3
文字4
文字5