什么是JQ
• JS的升级版，写越少的代码，做越多的事情
• 学习JQ的基础
• HTML CSS Javascript 后台（了解）
• JQ官网
• http://jquery.com/
• 如何使用JQ
• 官网下载jquery.js文件
引入JQuery
选择元素
$() ★★★★★
css() ★★★★★
JQ的$()选择符和CSS()
//document.getElementById('div1').style.color= 'red';
//document.getElementsByTagName('div')[0].style. color = 'red';
//document.getElementsByClassName('box')[0].style. color = 'red';
//JQ选择元素的风格跟CSS风格特别类似
//$('#div1').css('color', 'red');
//$('div').css('color', 'red);
//$('.box').css('color', 'red);
省略原生的循环操作
JQ省略循环
- 1111
- 1111
- 1111
- 1111
var aLi = document.getElementsByTagName('li');
/*
for(){
aLi[i].style...
}
*/
//$('li').css('background', 'red'); //JQ省略原生当中的循环的操作
jQuery('li').css('background', 'red'); //$ == jQuery 一个大名一个小名
$ == jQuery
事件 click()
• click() ★★★★★
内容 html()
• html() ★★★★★
例子：选择颜色填充方块
选择颜色填充方块
red
yellow
green
blue
取值与赋值的关系
• 通过参数决定
取值与赋值的关系
取值与赋值的关系
aaaaa
属性 attr()
• attr() ★★★★★
值 val()
• val() ★★★
attr()和val()
取值与赋值的关系
aaaaa
强大的$()
加载
• $(function(){}); ★★★★★
属性选择
• [=] ★★★★★
• [^=] 以……起始 ★★★★★
• [$=] 以……结束 ★★★★★
• [*=] 包含……的 ★★★★★
• 引号的问题
加载和通配符选择
aaaaaa
用$(function(){});来加载
加载
...
JQ的链式操作
• $().css().html().click()
• 针对设置的时候
链式操作
aaaaaaa
集合的长度
length ★★★★★
• $()获取到的都是一个集合
集合的长度
aaaaaaa
JQ实战小技巧
• 利用length判断元素是否存在
• 例子：删除指定颜色的方块
通过length来纠错，发现页面中没有的元素
aaaaaaa
删除指定颜色方块的背景颜色
删除指定颜色的方块
red
yellow
green
blue
class的操作
addClass() ★★★
removeClass() ★★★
toggleClass() ★★★
class操作
class的操作
aaaaaa
显示隐藏
show() / hide() ★★★★★
• 与CSS()的区别
• 例子：点击弹出菜单（1）
show()、hide()方法
class的操作
div
点击弹出菜单
点击弹出菜单
- 1111
- 2222
- 3333
- 4444
节点的选择
prev() next() ★★★★★
prevAll() nextAll() ★★★
siblings() ★★★
• 参数的筛选功能
节点的选择
div
span
p
span
h1
h2
h2
h3
em
JQ实战小技巧
• 例子：点击弹出菜单（2）
点击弹出菜单（2）
点击弹出菜单
- 1111
- 2222
- 3333
- 4444
下标
eq() ★★★★★
eq()的操作
下标eq()的操作
- 1111
- 2222
- 3333
- 4444
• 本课练习
• 抽奖效果
无标题文档
- 1等奖
- 2等奖
- 3等奖
- 4等奖
- 5等奖
- 6等奖
- 7等奖
- 8等奖
- 9等奖
节点的选择
first() ★★★
last() ★★★
slice() ★
children() ★★★
find() ★★★★★
• children和find区别
节点的选择
节点的选择
-
1111
pppp
- 1111
- 1111
- 1111
div
JQ实战小技巧
• 避免复杂的选择器操作，而采用find操作
节点的选择
-
1111
pppp
- 1111
- 1111
- 1111
div
节点的选择
parent() ★★★
parents() ★
closest() ★★★★★
• 精准的查找能力，实战开发之王
• 找的是最近的唯一一个元素
• 例子：点击查找指定节点
parent()和parents()
节点的选择
aaa
bbb
closest()
节点的选择
aaa
bbb
点击查找指定节点
节点的选择
- aaa span
- aaa span
- aaa span
- aaa span
节点的操作
创建节点
• $(<>) ★★★★★
• 比原生JS更强大的创建方式
添加节点
• insertBefore() before() ★★★★★
• insertAfter() after() ★★★★★
• appendTo() append() ★★★★★
• prependTo() prepend() ★★★★★
• 两种写法的区别
创建节点
节点的操作
append()、prepend()、before()、after()
节点的操作
- aaa span
- aaa span
- aaa span
appendTo()、prependTo()、insertBefore()、insertAfter()
节点的操作
- aaa span
- aaa span
- aaa span
两种写法的区别，会影响到链式操作
节点的操作
- aaa span
- aaa span
- aaa span
• JQ实战小技巧
• 添加html形式的操作与元素形式的操作
节点的操作
remove() ★★★★★
remove()操作
删除元素
div
clone() ★★★
• 默认的剪切操作
• 如何克隆事件(clone函数添加参数true)
• 例子：节点上移下移
删除元素
div
span
例子：节点的上移下移
删除元素
- 1.
- 2.
- 3.
- 4.
- 5.
JQ中的索引
index() ★★★★★
• 第一种用法，兄弟中的排行
• 第二种用法，筛选后的排行
• 善于利用索引做实际开发
• 例子：选项卡
兄弟中的排行
删除元素
p
div
div
注意事项
索引
span
span
span
筛选后的排行
索引
span
span
span
span
选项卡
删除元素
111
222
333
JQ中的遍历
each() ★★★★★
• 回调函数的两个参数
• this指向
• 用return false跳出each()循环;
回调函数的两个参数
删除元素
each的回调函数中this的指向
删除元素
each()循环中用return false跳出循环
删除元素
本课练习
• 左右切换数据
无标题文档
- 1111
- 2222
- 3333
- 4444
- 5555
- aaaa
- bbbb
- cccc
- dddd
- eeee
• 评分效果
无标题文档
- 1
- 2
- 3
- 4
- 5
元素的尺寸
width() height() ★★★★★
innerWidth() innerHeight() ★★★★★
outerWidth() outerHeight() ★★★★★
• 参数的作用
• 与原生JS的区别
元素尺寸的获取
元素的尺寸的获取
div
元素尺寸的设置
元素的尺寸的设置
div
实战小技巧
可视区的尺寸
页面的尺寸
可视区的尺寸
div
滚动距离
scrollTop() ★★★★★
scrollLeft() ★
滚动距离
可视区的尺寸
div
元素距离
offset() ★★★★★
• left top
position() ★★★
• left top
• 不认margin值
offset()
到达页面的距离：offset()
position
到达页面的距离：offset()
到达定位祖先元素的距离position()
实战小技巧
• 利用计算原理，得到相应值
• offsetParent() ★
• 例子：懒加载页面中的图片
计算出到有定位的祖先节点的距离
懒加载图片
![]()
![]()
![]()
![]()
![]()
![]()
JQ的事件
on() ★★★★★
off() ★★★★★
• JQ中都是绑定的形式
• 支持多事件写法
• click()写法，也是采用off()取消
用on()的形式绑定事件
jQuery中的事件
aaaaaa
用off()取消事件
jQuery中的事件
aaaaaa
Event对象 ★★★★★
pageX, pageY
• 与cient的区别
which
target
stopPropagation()
preventDefault()
return false
pageX和pageY；clientX和clientY
jQuery中的event事件对象
aaaaaa
which键盘键值
jQuery中的event事件对象
aaaaaa
ev.target事件源
jQuery中的event事件对象
aaaaaa
ev.stopPropagation() 阻止冒泡
jQuery中的event事件对象
aaaaaa
ev.preventDefault() 阻止默认事件
jQuery中的event事件对象
aaaaaa
return false 既阻止默认事件又阻止冒泡
jQuery中的event事件对象
aaaaaa
JQ实战小技巧
• 例子：拖拽效果
用jQuery实现拖拽效果
用JQ实现拖拽
div
插花
flower
trigger() ★★★★★
• 比click()形式更强大
• 例子：主动触发的添加内容
事件的命名空间
- 11111
- 11111
- 11111
- 11111
- 11111
本课练习
• 登录弹窗效果
无标题文档
用户名:
密码:
X
$.ajax() ★★★★★
• 什么是ajax
• 提交数据、查询数据
• url
• success
• type
• data
• error
• dataType
• async
• 例子：ajax版本的选项卡
ajax
用ajax实现选项卡
无标题文档
正在加载...
正在加载...
正在加载...
$.get() ★★★★★
• 参数的作用
$.post() ★★★★★
• 参数的作用
//第一个参数url，第二个是data，第三个是回调函数，第四个函数是datatype。基本上$.post()也是这种写法。如果获取失败了，可以调用error()这个方法。
$.get('user3.do', {name: "hello"}, function(data){
console.log(data);
}, 'json').error(function(err){
console.log(err);
});
ajax扩展
辅助
serialize() ★★★
你可能感兴趣的:(JQuery课程)