JQuery课程

2025-06-25 06:48:28 by admin u19世界杯

什么是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

h1

h2

h3

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

例子：节点的上移下移

删除元素

JQ中的索引

index() ★★★★★

• 第一种用法，兄弟中的排行

• 第二种用法，筛选后的排行

• 善于利用索引做实际开发

• 例子：选项卡

兄弟中的排行

删除元素

div

注意事项

索引

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

• 评分效果

无标题文档

元素的尺寸

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

本课练习

• 登录弹窗效果

无标题文档

$.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() ★★★