第三章 jQuery2

第三章 jQuery

  • 14.元素的筛选
    • eq()
    • first()
    • Last()
    • filter(exp)
    • is(exp)
    • has(exp)
    • not(exp)
    • children(exp)
    • find(exp)
    • next(exp)
    • nextAll()
    • nextUntil()
    • parent()
    • prev(exp)
    • prevAll(exp)
    • prevUntil(exp)
    • siblings(exp)
    • add()
  • 15.html(),text(),val()方法
  • 16.attr()和prop()方法
  • 17.练习:全选,全不选,反选
  • 18.dom的增,删,改
    • appendTo()
    • prependTo()
    • insertAfter()
    • insertBefore()
    • replaceWith()
    • replaceAll()
    • remove()
    • empty()
  • 19.练习:从左到右,从右到左
  • 20.练习:动态添加和删除行记录
  • 21.CSS样式操作
    • addclass()
    • removeclass()
    • toggleclass()
    • offset()
  • 22.动画操作
    • show() / hide()
    • toggle()
    • fadeIn() / fadeOut()
    • fadeToggle()
    • fadeTo()
  • 23.练习:品牌展示
  • 24.原生js和jQuery页面加载完成之后的区别
  • 25.jQuery中常用的事件处理方法
    • click()
    • moveover() / moveout()
    • bind()
    • one()
    • unbind()
    • live()
  • 26.事件的冒泡
  • 27.事件对象
  • 28.练习:图片跟随

14.元素的筛选

第三章 jQuery2_第1张图片
第三章 jQuery2_第2张图片
第三章 jQuery2_第3张图片

eq()

第三章 jQuery2_第4张图片
第三章 jQuery2_第5张图片

first()

第三章 jQuery2_第6张图片

Last()

第三章 jQuery2_第7张图片

filter(exp)

第三章 jQuery2_第8张图片
第三章 jQuery2_第9张图片

is(exp)

第三章 jQuery2_第10张图片
第三章 jQuery2_第11张图片

has(exp)

第三章 jQuery2_第12张图片
第三章 jQuery2_第13张图片
第三章 jQuery2_第14张图片

not(exp)

第三章 jQuery2_第15张图片

children(exp)

第三章 jQuery2_第16张图片

find(exp)

第三章 jQuery2_第17张图片

next(exp)

第三章 jQuery2_第18张图片

nextAll()

第三章 jQuery2_第19张图片

nextUntil()

第三章 jQuery2_第20张图片

第三章 jQuery2_第21张图片
第三章 jQuery2_第22张图片
第三章 jQuery2_第23张图片

parent()

第三章 jQuery2_第24张图片

prev(exp)

第三章 jQuery2_第25张图片

prevAll(exp)

第三章 jQuery2_第26张图片

prevUntil(exp)

第三章 jQuery2_第27张图片
第三章 jQuery2_第28张图片
第三章 jQuery2_第29张图片

siblings(exp)

返回所有的兄弟元素
第三章 jQuery2_第30张图片
第三章 jQuery2_第31张图片

add()

第三章 jQuery2_第32张图片
第三章 jQuery2_第33张图片
第三章 jQuery2_第34张图片
第三章 jQuery2_第35张图片
第三章 jQuery2_第36张图片
第三章 jQuery2_第37张图片
第三章 jQuery2_第38张图片
第三章 jQuery2_第39张图片
第三章 jQuery2_第40张图片
第三章 jQuery2_第41张图片
第三章 jQuery2_第42张图片
第三章 jQuery2_第43张图片
第三章 jQuery2_第44张图片
第三章 jQuery2_第45张图片
第三章 jQuery2_第46张图片
第三章 jQuery2_第47张图片
第三章 jQuery2_第48张图片
第三章 jQuery2_第49张图片
第三章 jQuery2_第50张图片
第三章 jQuery2_第51张图片
第三章 jQuery2_第52张图片
第三章 jQuery2_第53张图片
第三章 jQuery2_第54张图片
第三章 jQuery2_第55张图片
第三章 jQuery2_第56张图片
第三章 jQuery2_第57张图片
第三章 jQuery2_第58张图片
第三章 jQuery2_第59张图片
第三章 jQuery2_第60张图片
第三章 jQuery2_第61张图片
第三章 jQuery2_第62张图片
第三章 jQuery2_第63张图片
第三章 jQuery2_第64张图片
第三章 jQuery2_第65张图片
在这里插入图片描述
第三章 jQuery2_第66张图片
第三章 jQuery2_第67张图片
第三章 jQuery2_第68张图片
第三章 jQuery2_第69张图片
这里也可以过滤,比如只要span
第三章 jQuery2_第70张图片
第三章 jQuery2_第71张图片
第三章 jQuery2_第72张图片
第三章 jQuery2_第73张图片

15.html(),text(),val()方法

第三章 jQuery2_第74张图片
第三章 jQuery2_第75张图片
第三章 jQuery2_第76张图片
第三章 jQuery2_第77张图片
第三章 jQuery2_第78张图片
第三章 jQuery2_第79张图片
第三章 jQuery2_第80张图片
第三章 jQuery2_第81张图片
第三章 jQuery2_第82张图片
在这里插入图片描述
第三章 jQuery2_第83张图片
第三章 jQuery2_第84张图片
第三章 jQuery2_第85张图片
第三章 jQuery2_第86张图片
在这里插入图片描述
在这里插入图片描述
第三章 jQuery2_第87张图片
第三章 jQuery2_第88张图片

如果我想要radio1被选中
第三章 jQuery2_第89张图片
第三章 jQuery2_第90张图片
如果想要多个被选中
第三章 jQuery2_第91张图片
第三章 jQuery2_第92张图片
第三章 jQuery2_第93张图片
第三章 jQuery2_第94张图片
第三章 jQuery2_第95张图片
第三章 jQuery2_第96张图片

也可以一次性操作多个
第三章 jQuery2_第97张图片
第三章 jQuery2_第98张图片

顺序全是乱的也没有关系
第三章 jQuery2_第99张图片

16.attr()和prop()方法

第三章 jQuery2_第100张图片
第三章 jQuery2_第101张图片
第三章 jQuery2_第102张图片
第三章 jQuery2_第103张图片
第三章 jQuery2_第104张图片

下面这里返回是undefined,但本质其实应该返回错误
第三章 jQuery2_第105张图片
第三章 jQuery2_第106张图片
第三章 jQuery2_第107张图片
第三章 jQuery2_第108张图片
第三章 jQuery2_第109张图片
第三章 jQuery2_第110张图片
第三章 jQuery2_第111张图片
第三章 jQuery2_第112张图片
也可以通过prop()来设置选中状态
第三章 jQuery2_第113张图片
第三章 jQuery2_第114张图片
第三章 jQuery2_第115张图片
第三章 jQuery2_第116张图片
第三章 jQuery2_第117张图片
设置自定义属性
第三章 jQuery2_第118张图片
第三章 jQuery2_第119张图片
获取自定义属性
第三章 jQuery2_第120张图片
第三章 jQuery2_第121张图片

17.练习:全选,全不选,反选

第三章 jQuery2_第122张图片

全选
第三章 jQuery2_第123张图片

全不选
第三章 jQuery2_第124张图片

反选
第三章 jQuery2_第125张图片

当反选是选中全部之后,最上面的也要打钩
第三章 jQuery2_第126张图片
上面的代码我们可以给他优化一下
第三章 jQuery2_第127张图片

提交
第三章 jQuery2_第128张图片

第三章 jQuery2_第129张图片
第三章 jQuery2_第130张图片

18.dom的增,删,改

第三章 jQuery2_第131张图片
在这里插入图片描述
第三章 jQuery2_第132张图片

appendTo()

第三章 jQuery2_第133张图片
第三章 jQuery2_第134张图片

prependTo()

第三章 jQuery2_第135张图片
第三章 jQuery2_第136张图片
第三章 jQuery2_第137张图片
第三章 jQuery2_第138张图片

insertAfter()

第三章 jQuery2_第139张图片
第三章 jQuery2_第140张图片

insertBefore()

第三章 jQuery2_第141张图片
第三章 jQuery2_第142张图片

replaceWith()

第三章 jQuery2_第143张图片
第三章 jQuery2_第144张图片

replaceAll()

第三章 jQuery2_第145张图片
第三章 jQuery2_第146张图片

remove()

第三章 jQuery2_第147张图片
第三章 jQuery2_第148张图片

empty()

第三章 jQuery2_第149张图片
第三章 jQuery2_第150张图片

19.练习:从左到右,从右到左

第三章 jQuery2_第151张图片
第三章 jQuery2_第152张图片
第三章 jQuery2_第153张图片
第三章 jQuery2_第154张图片
第三章 jQuery2_第155张图片

20.练习:动态添加和删除行记录

第三章 jQuery2_第156张图片
第三章 jQuery2_第157张图片
第三章 jQuery2_第158张图片
第三章 jQuery2_第159张图片
第三章 jQuery2_第160张图片
第三章 jQuery2_第161张图片
第三章 jQuery2_第162张图片
第三章 jQuery2_第163张图片

a标签的默认行为是点击跳转
return false是阻止跳转

此外我们发现新添加的行点击delete的时候是出错的,下面在window.onload中添加以下内容
第三章 jQuery2_第164张图片
下面优化一下代码,做一个函数的复用

第三章 jQuery2_第165张图片
第三章 jQuery2_第166张图片
最后传进去的必须是function函数。
而不能是function(),function()传的是一个函数返回值

21.CSS样式操作

第三章 jQuery2_第167张图片
下面的div是限定这个样式只能给div使用,给其他的使用没有效果
第三章 jQuery2_第168张图片
第三章 jQuery2_第169张图片
在这里插入图片描述
第三章 jQuery2_第170张图片

addclass()

第三章 jQuery2_第171张图片
第三章 jQuery2_第172张图片

removeclass()

第三章 jQuery2_第173张图片
第三章 jQuery2_第174张图片
第三章 jQuery2_第175张图片

toggleclass()

第三章 jQuery2_第176张图片
点一下就会有
第三章 jQuery2_第177张图片
再点一下就会删除
第三章 jQuery2_第178张图片

offset()

第三章 jQuery2_第179张图片
上面是获取坐标
第三章 jQuery2_第180张图片
我们也可以设置坐标(是按照当前屏幕大小设置的值)
第三章 jQuery2_第181张图片
第三章 jQuery2_第182张图片

22.动画操作

第三章 jQuery2_第183张图片
第三章 jQuery2_第184张图片
第三章 jQuery2_第185张图片
第三章 jQuery2_第186张图片
第三章 jQuery2_第187张图片

show() / hide()

第三章 jQuery2_第188张图片
点击show
第三章 jQuery2_第189张图片
点击hide
第三章 jQuery2_第190张图片

toggle()

点一下消失
第三章 jQuery2_第191张图片
再点一下,显示出来
第三章 jQuery2_第192张图片
设置时间
第三章 jQuery2_第193张图片
添加回调函数

第三章 jQuery2_第194张图片
第三章 jQuery2_第195张图片
循环执行动画,在回调函数中输入自己
第三章 jQuery2_第196张图片

fadeIn() / fadeOut()

第三章 jQuery2_第197张图片
设置时间
第三章 jQuery2_第198张图片
设置回调函数
第三章 jQuery2_第199张图片

fadeToggle()

第三章 jQuery2_第200张图片
第三章 jQuery2_第201张图片

fadeTo()

第三章 jQuery2_第202张图片

23.练习:品牌展示

第三章 jQuery2_第203张图片
第三章 jQuery2_第204张图片
第三章 jQuery2_第205张图片
第三章 jQuery2_第206张图片
.showmore a span表示用这个样式的人是不仅是.showmore 里面还要有a 和 span
第三章 jQuery2_第207张图片
第三章 jQuery2_第208张图片
第三章 jQuery2_第209张图片
第三章 jQuery2_第210张图片
第三章 jQuery2_第211张图片
第三章 jQuery2_第212张图片
第三章 jQuery2_第213张图片
第三章 jQuery2_第214张图片
第三章 jQuery2_第215张图片
在这里插入图片描述

24.原生js和jQuery页面加载完成之后的区别

第三章 jQuery2_第216张图片
第三章 jQuery2_第217张图片
第三章 jQuery2_第218张图片

25.jQuery中常用的事件处理方法

第三章 jQuery2_第219张图片

click()

第三章 jQuery2_第220张图片
上面是单击事件,下面演示触发事件。(点击其他按钮时触发h5的单击事件)
第三章 jQuery2_第221张图片
第三章 jQuery2_第222张图片

moveover() / moveout()

第三章 jQuery2_第223张图片
第三章 jQuery2_第224张图片

bind()

第三章 jQuery2_第225张图片
第三章 jQuery2_第226张图片
下面是绑定多个事件,中间用空格隔开
第三章 jQuery2_第227张图片

one()

第三章 jQuery2_第228张图片
第三章 jQuery2_第229张图片

unbind()

此时点击就无效,移入移出还可以
第三章 jQuery2_第230张图片
有多个就用空格隔开
第三章 jQuery2_第231张图片

live()

第三章 jQuery2_第232张图片
现在就有两个,上面那个单击有效,下面这个单击无效
因为我们只给上面的绑定了单机事件
在这里插入图片描述
第三章 jQuery2_第233张图片
现在上下两个都有效

26.事件的冒泡

第三章 jQuery2_第234张图片
第三章 jQuery2_第235张图片
第三章 jQuery2_第236张图片
第三章 jQuery2_第237张图片
第三章 jQuery2_第238张图片
第三章 jQuery2_第239张图片
当我点击子元素span的时候,父元素同样会显示出来
第三章 jQuery2_第240张图片
第三章 jQuery2_第241张图片
下面这样就可以阻止父元素的调用
第三章 jQuery2_第242张图片

27.事件对象

在这里插入图片描述
在这里插入图片描述
第三章 jQuery2_第243张图片
第三章 jQuery2_第244张图片
第三章 jQuery2_第245张图片
第三章 jQuery2_第246张图片
第三章 jQuery2_第247张图片

通过事件我们可以完成不同的工作
event中有type可以用来记录操作类型
第三章 jQuery2_第248张图片

第三章 jQuery2_第249张图片

28.练习:图片跟随

在这里插入图片描述
鼠标进图片就跟随移动
第三章 jQuery2_第250张图片
第三章 jQuery2_第251张图片
第三章 jQuery2_第252张图片
第三章 jQuery2_第253张图片
第三章 jQuery2_第254张图片

你可能感兴趣的:(JavaWeb,jquery,前端,javascript)