什么是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() ★★★★★ 等到内容
例子:选择颜色填充方块
选择颜色填充方块
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
无标题文档
- 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实现拖拽
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)