JQuery1-基本语法

image-20200802220446929

一、

image-20200802220533041

1.1

image-20200802220614912

1.2

image-20200802222715161

1.3

不能在导入这里写代码

image-20200802225118372

1.3.1

判断是否加载成功

image-20200802225511529

二、选择器

但是两者获取的类型不同,属性和方法就不同,不能混着用

通过id获取

image-20200806000439713

通过class获取

image-20200806000614867

看同一个标签下有几个元素

image-20200806000721989

这种用的比较多,标签.class名

image-20200806001224653

属性选择器

image-20200806001420463

加条件

image-20200806001508909 image-20200806001519544

p标签里有个a标签

image-20200806001704550

id和class用的最多

三、事件绑定(非常重要,使用的是现代事件绑定方式)

3.1 绑定一个事件

绑定一个事件,从上到下执行

image-20200806002857849

这种方法三个参数.bind(type,date,fn),一般不传参数,从fn函数内获取

image-20200806003201960

3.2 事件解除绑定

一个标签绑定了很多事件,所以要解除绑定

只解除一个参数,click全部解除

image-20200806003621939

有很多function的时候,识别不出来,要给function取名

image-20200806003834534

注意test不要加(),代表这个函数,加了(),会直接把这个函数执行结果放进去

image-20200806003847356

image-20200806004057543

image-20200806010141546

3.3 绑定多个事件

对所有的p标签都进行绑定

image-20200806005348900

能切换焦点的元素具有focus属性

change指的是value的改变

image-20200806005634402

image-20200806010047843

四、熟练使用

4.1 特效和动画

hide():括号里可以加fast,slow,具体时间(毫秒)

image-20200806195211187

hide后面接函数会直接执行,这样就需要回调函数(是重点,尤其是在AJax中)

回调函数:在某个动作执行完才执行的函数

image-20200806210920084

淡出,淡入和切换

image-20200806215121164

向上滑动(收起);向下滑动(展开);切换

image-20200806215349586

动画:唯一不能改的就是颜色

image-20200806223134501

image-20200806225015013

练习:fixed针对当前窗口,没有滚动条;absolute针对网页body,有滚动条

4.2 DOM中的操作(内容,属性,CSS)

1.获取内容

无参数代表获取,有参数代表修改

image-20200807210631759

同上

image-20200807215658593

2.属性

image-20200808202717859

3.内容(value)

1) 获取值

失去焦点,获取元素内容

image-20200808202901720

2) 设置值

image-20200808204615137

4.修改CSS

修改一个属性的样式

image-20200808210145264

用{}同样的效果

image-20200808210433314

不加双引号要用驼峰命名法

image-20200808210513581

可以选择多个

image-20200808210636017

添加样式

image-20200808213713075

代码中添加了这个样式

image-20200808213903109

删除样式

image-20200808214032524

用CSS修改法相当于修改样式改法,优先级比class要高

4.3 遍历文档结构

4.3.1

新创建一个元素对象

image-20200808222414950

添加到body子元素最后面

image-20200808222733208

前面

image-20200808222848137

在选取元素前面和后面添加:before和after

image-20200808223047551

4.3.2删除元素

完全移除

image-20200808223320444

清空

image-20200808223428354

4.3.3层级关系

子元素,后代元素,同级相邻元素,父级元素

1.获取子元素:

获取第一层级的所有子元素,不包括后代元素

image-20200808224559852

对子元素进行过滤

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFwrcAGg-1597225467265)(C:/Users/CEO/AppData/Roaming/Typora/typora-user-images/image-20200808224743552.png)]

image-20200808224811295

2.获取后代元素(第二层级)

获取所有子元素下的a标签

image-20200808225035694

3.同级相邻元素

结果为一个

image-20200808225415016

image-20200808225448377

更多方法

image-20200809154315526 image-20200808230201828

移除兄弟元素的上一个

image-20200808230402618

移除上面的所有

image-20200808231234748

移除(某一个)标签前所有元素

image-20200809161837104

前面查找直到找到第一个p标签,把它移除

image-20200809162324946

4.父级元素

div有body和html两个父级,用parents,结果为2

直接用parent就是找到第一个父级元素

image-20200808225621569

最常用parent和parents,里面选中想指定的父级元素,因为可能有像div一样的很多个父级

image-20200808225833090

5.过滤

操作这个

image-20200809162534842

一组li标签的第一个

image-20200809162749977

移除最后一个

image-20200809162840519

移除下标为1的元素(排第二位)

image-20200809162935571

移除一堆元素中不等于谁的剩余所有元素

image-20200809163054117

点击绑定遍历获取所有的元素i,有4个就是0123

image-20200809163608127

类似于写了一个循环

image-20200809163727684

  • 二阶段评奖:
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值