前端全套视频HTML+CSS+JS+jQuery笔记(十)

4. jQuery

4.1 jQuery概念及特点

前端全套视频HTML+CSS+JS+jQuery笔记(十)_第1张图片

4.2 jQuery的封装原理

前端全套视频HTML+CSS+JS+jQuery笔记(十)_第2张图片
在这里插入图片描述
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第3张图片
function函数名仍然能够被覆盖
在这里插入图片描述

前端全套视频HTML+CSS+JS+jQuery笔记(十)_第4张图片
问题:只执行一次,且无法接收返回值
在这里插入图片描述
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第5张图片
在这里插入图片描述
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第6张图片
用全局区域的值去记录局部变量的值
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第7张图片在这里插入图片描述
所以使用jQuery,$都能直接使用jQuery的内容

4.3 jQuery的选择器

前端全套视频HTML+CSS+JS+jQuery笔记(十)_第8张图片
参考链接:jquery选择器
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第9张图片
返回只有一个元素的数组,val()方法是数组的;
value方法是html元素的
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第10张图片
返回一个数组,看input框有几个
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第11张图片
加了[1],由一个数组转为了一个html元素,所以不能使用val(),要使用value
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第12张图片
:first 仍是一个数组
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第13张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第14张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第15张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第16张图片
在这里插入图片描述
不要表头,td[属性]

4.4 jQuery操作元素属性

前端全套视频HTML+CSS+JS+jQuery笔记(十)_第17张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第18张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第19张图片

4.5 jQuery操作元素内容

前端全套视频HTML+CSS+JS+jQuery笔记(十)_第20张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第21张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第22张图片
可解析;相当于js的 innerHtml
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第23张图片
相当于js的 innerText

4.6 jQuery操作元素样式

前端全套视频HTML+CSS+JS+jQuery笔记(十)_第24张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第25张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第26张图片
使用json对象修改css属性
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第27张图片
注意这是追加属性,不会覆盖。
在这里插入图片描述
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第28张图片

4.7 jQuery操作文档结构

前端全套视频HTML+CSS+JS+jQuery笔记(十)_第29张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第30张图片
在后面追加文本内容
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第31张图片
把u1内的内容放到div中
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第32张图片
放到前面
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第33张图片
外部插入,可以用来在每个验证框后插入吗?需要试验
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第34张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第35张图片
在这里插入图片描述

4.8 jQuery操作事件

前端全套视频HTML+CSS+JS+jQuery笔记(十)_第36张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第37张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第38张图片
注意:使用js方式是覆盖;而使用jQuery是追加,也可以添加多个事件
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第39张图片
把click整个事件解绑
在这里插入图片描述
一次性筷子事件
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第40张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第41张图片
简写方式,都是页面载入

4.9 jQuery动画效果

前端全套视频HTML+CSS+JS+jQuery笔记(十)_第42张图片
toogle(毫秒)与当前状态相反;hide-show
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第43张图片
加全局标记判断
菜单下拉与回收
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第44张图片

第二种写法:不在lable上加onclick事件,而是通过页面载入,添加click事件
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第45张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第46张图片
mouseover方式
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第47张图片
前端全套视频HTML+CSS+JS+jQuery笔记(十)_第48张图片
先隐藏

你可能感兴趣的:(前端)