前端开发框架篇(1)——JQuery的初步使用

网友投稿 512 2022-05-29

在前端开发中使用框架,不止极大的减少代码量,而且将带来意外的惊喜。

这篇文章介绍的框架是JQuery,最值得说的是目前jQuery兼容于所有的主流浏览器, 包括Internet Explorer 6哦!!!

一、安装JQuery

方式1;从官网下载,附下载地址:JQuery下载,下载后,用标签引用

方式2:在网页中直接引用,这里借用百度的CDN地址

二、基础语法

采用$(selector).action()的方式选取 HTML 元素,并对选取的元素执行某些操作。

这里的$就等于jQuery

console.log($===jQuery)//true 说明:这里是引入了jQuery了的

输出结果:

一般情况,为了防止网页在完全加载(就绪)之前运行 jQuery 代码,往往会采用以下方式:

$(function(){      // 从这里开始写 jQuery 代码...  });

三、jQuery 选择器/$(selector)

常见的有以下几中使用:

1、元素选择器

效果如下:

点击按钮之前:

点击按钮之后:背景色发生改变。

2、#id选择器

将上面代码改成#id选择器,如下:

前端开发之框架篇(1)——JQuery的初步使用

代码生成结果如第一种情况一样,说明修改成功。

3、.class选择器

将上面代码改成.class选择器,如下:

点我

代码生成结果如第一种情况一样,说明修改成功。

四、事件处理/.action()

事件处理程序指的是当网页中发生某些事件时所调用的方法,如点击按钮时要触发的调用方法可以用click。

常见的事件如下:

鼠标事件:click、dblclick、mouseenter、mouseleave、hover

键盘事件:keypress、keydown、keyup

表单事件:submit、change、focus、blur

文档/窗口事件:load、resize、scroll

好了,JQuery的简单介绍就到这里,喜欢的点个赞呗!

扫码,加微信,谢谢支持!

软件开发 jQuery

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:MongoDB数据库运维工具的使用
下一篇:谈谈自己的学习之路之----大数据
相关文章