【JQuery】基础从零入门操作,简单详细

【JQuery】基础从零入门操作,简单详细

一:JQuery介绍 W3C 标准给我们提供了⼀系列的函数, 让我们可以操作:

⽹⻚内容

⽹⻚结构

⽹⻚样式

但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们学习使⽤JQuery来操作⻚⾯对象

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 它封装JavaScript常⽤的功能代码,

提供了简洁⽽强⼤的选择器和DOM操作⽅法. 使⽤JQuery可以轻松地选择和操作HTML元素

从 ⽽减少了开发⼈员编写的代码量,提⾼了开发效率,它提供的 API 易于使⽤且兼容众多浏览器,

JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的API来绑定、触发和处理事件,使开发⼈员能够更⽅便地处理各种交互⾏为.

1:引入依赖 使⽤JQuery需要先引⼊对应的库

在使⽤jQuery CDN时,只需要在HTML⽂档中加⼊如下代码

2:src属性指明了JQuery库所在的URL. 这个URL是CDN(内容分发⽹络)服务提供商为jQuery库

提供的⼀个统⼀资源定位符

3:下载说明以下链接是jQuery的官网,根据版本需要进行下载

jQuery CDN

下载注意事项:复制下载链接,另存为,保存放在自己的项目中,使用外网的JQuery响应会比较慢,网络传输影响较大

4:版本说明 Jquery官⽅共提供了4种类型的JQuery库

uncompressed : ⾮压缩版本 (易读, 但是⽂件较⼤, 传输速度慢)

minified: 压缩版 (不易读, ⽂件⼩, 性能⾼, 开发中推荐)

slim: 精简瘦⾝版, 没有Ajax和⼀些特效

slim minified : slim 的压缩版

二:JQuery使用三:JQuery语法 JQuery 的代码通常都写在 document ready 函数中

这是为了防⽌⽂档在完全加载(就绪)之前运⾏ jQuery 代码,即在 ⽂档加载完成后才可以对 ⻚⾯进 ⾏操作。

如果在⽂档没有完全加载之前就运⾏函数,操作可能失败

1:起手式先粘贴JQuery

$可以理解成选择,ready加载整个文档,执行function方法

表示整个页面加载完之后执行的代码

2:选中元素这里用的是ID选择器,也可以用标签选择器

①解释:点击button后就隐藏

②代码简写

③再简写(但是不规范)

四:JQuery选择器 JQuery选择器 基于已经存在的CSS选择器, 除此之外, 还有⼀些⾃定义的选择器

JQuery中所有选择器都以开头:()

五:JQuery事件1:事件的组成事件由三部分组成:

① 事件源: 哪个元素触发的

② 事件类型: 是点击, 选中, 还是修改?

③ 事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数

JS 要构建动态⻚⾯, 就需要感知到⽤⼾的⾏为.

⽤⼾对于⻚⾯的⼀些操作(点击, 选择, 修改等) 操作都会在浏览器中产⽣⼀个个事件, 被 JS 获取到, 从⽽

进⾏更复杂的交互操作

常见的事件

六:获取、设置元素内容三个简单获取元素内容的JQuery方法

1:获取元素内容举例①

举例②input表单的取值是val

此处是用的自定义选择器

2:text和html赋值比较text和html

①text

结果

②html

结果

总结

3:input赋值七:获取、设置元素属性 JQuery attr() ⽅法⽤于获取属性值

如果attr中只有key就是取值;有key,有value就是赋值

注:attr(attribute)

1:取值2:赋值 举例①更改链接

举例②更改图片尺寸

举例③点击 按钮尺寸变大

六:获取返回CSS值/属性 css() ⽅法设置或返回被选元素的⼀个或多个样式属性

1:返回属性(1)返回字体大小 (2)如果不引入JQuery就会报错

2:修改属性 给两个参数就可以修改属性

(1)修改字体大小(2)修改字体颜色3:添加元素(1)append和prepend注:都是放到了

    标签内部进行追加

    (2)after和before注:都是放到了

      标签外部进行追加

      4:删除元素(1)remove(2)empty()①问题引入

      ②区分按钮——引入id

      七:应用1:猜数字游戏代码语言:javascript复制

      Document


      请输入要猜的数字:


      已经猜的次数:

      结果:

      2:表白墙代码语言:javascript复制

      留言板

      留言板

      输入后点击提交, 会将信息显示下方空白处

      谁:

      对谁:

      说什么:

      八:serialize方法jQuery 的 serialize() 方法用于将表单元素的值序列化为一个 URL 编码的字符串。

      1:假设有一个简单的表单

      代码语言:javascript复制

      2. 在 ajax 请求中使用 serialize():可以在 ajax 请求中直接使用 serialize() 来自动处理表单数据,例如:

      代码语言:javascript复制$.ajax({

      url: 'submit.php',

      type: 'POST',

      data: $('#myForm').serialize(), // 自动序列化表单数据

      success: function(response) {

      console.log('Form submitted successfully!', response);

      }

      });上面的表单序列化后,serialize() 方法会返回一个 URL 编码的字符串:

      代码语言:javascript复制name=John&subscribe=newsletter&gender=male

相关推荐

索尼KD-55X8500C评测导购
best365官网登录入口

索尼KD-55X8500C评测导购

📅 10-25 👀 4521
收集钻石的游戏叫什么 2025好玩的有钻石的游戏排行榜
csgo里的igl是什么意思
beat365官方网站

csgo里的igl是什么意思

📅 07-24 👀 5952
2014巴西世界杯十佳比赛
天天365彩票软件官方下载3D

2014巴西世界杯十佳比赛

📅 10-25 👀 7429
不可思议迷宫游戏有哪些好玩 十大经典不可思议迷宫游戏排行
天天365彩票软件官方下载3D

不可思议迷宫游戏有哪些好玩 十大经典不可思议迷宫游戏排行

📅 11-07 👀 2418
2025热门的青蛙游戏有哪些 好玩的青蛙游戏汇总
best365官网登录入口

2025热门的青蛙游戏有哪些 好玩的青蛙游戏汇总

📅 08-19 👀 5892
客厅灯怎么安装?这几步教你搞定,别错过
天天365彩票软件官方下载3D

客厅灯怎么安装?这几步教你搞定,别错过

📅 01-02 👀 1839
奎字的五笔怎么打
天天365彩票软件官方下载3D

奎字的五笔怎么打

📅 07-02 👀 3246
封发是什么意思
天天365彩票软件官方下载3D

封发是什么意思

📅 09-30 👀 1984