带你入门jquery
发布日期:2022-02-23 07:42:42 浏览次数:10 分类:技术文章

本文共 1987 字,大约阅读时间需要 6 分钟。

jquery 是一个高效、精简并且功能丰富的js工具库,就像python的包和模块,提倡精简代码功能强大,所以可以看出底层封装的高。

jquery特点:

1、易于使用API接口(支持链式调用)

2、能够兼容众多浏览器

3、使用非常广泛

这里学习jquery主要是做

1、查询/操作DOM

2、处理js事件

3、实现动画效果

4、封装/使用jquery插件(jquery库很强大,扩展性也很强)

5、使用ajax发送异步请求

源码版本(用于开发环境)

jquery.js

压缩版本(用于生产环境)

jquery.min.js

用户视角:对于小白的我没有安装也不清楚他讲的版本到底有啥用。

jquery操作DOM:

从图中能很清晰的看出JQ跟原生的JS相比更能提高开发的效率。比如原生的js。如果查找多个标签的id需要写多条语句多次调用getElementByID函数。而用JQ只需要封装一个函数即用即调用就可以

jquery操作选择器:

$符号是JQ提供的一个函数。它可以代替JQuery

#id选择器

element选择器(元素选择器)

.class类选择器

在浏览器中访问地址的时候,浏览器要把html下载下来,如果html里面引用了js,解析html的时候就会把js下载下来。在下载js的过程中可能会出现没有解析完的情况就会出现查不到内容的情况。

针对这种情况jq给提供了一个解决方法

执行这行代码就代表解析已经完成,一切准备就绪,也可以写成$(funncion(){})

 

层级选择器:

$("parent>child") parent元素中的制定的child直接子元素

$("parent child")所有后代元素(后代关系)

$("prev+next")紧贴prev之后的元素 (兄弟关系)

伪类选择器:

:first/:last   第一个/最后一个匹配元素

:eq(n)      匹配的索引为n的元素

:evev/:odd     奇数/偶数个元素

:checked      表单中所有勾选的元素

:disbled        被禁用的元素

属性选择器

$('input[name="password"]') 【意思:选择所有input标签name属性是password】

$('input[name]')  【意思:选择input标签只要有name属性都要查出来】

jquery属性值的获取

查询DOM信息

访问html属性(id,class,style,自定义属性)

.attr("class")用.attr来查询class的属性

如图:

查看html/文本信息

.html()/text()  【html会把里面的标签给打印出来,text只打印出文字描述】

如图:

查看表单信息

.val()

如图:

jq对象与DOM对象进行转换:

jq对象通过.get()转换为DOM对象

如图:

如果是.get()获取整个dom对象,如果是.get()[0].value是代表获取dom对象第一个元素的value

如果得到元素过多需要遍历循环处理,遍历dom对象会有

length---对象得长度,相当于python得len

用法如图:

for 循环

jquery提供得.each方法遍历

如图:

 

其中 index是plist得下标, 传进value就可以得到plist得坐标对应得值

第二种方式

第二种方式可以把plist换成数组,这样相比第二种方式运用会更广泛一些

修改DOM信息

使用jquery构建dom

通过这种方式构建了一个p标签得到dom对象再封装jq的对象。

可以用apprnd/appendTO添加到dom中(apprnd需要先找到这个元素把它加进去/apprndto不需要先找构建完成直接添加。)

具体用法如图:

jqury事件

jq常用事件:

1、文档加载(dom准备就绪)

当dom准备就绪的时候,需要指定一个函数来执行

2、鼠标事件(点击滑动)

点击事件分为(单击,双击,按下,抬起,移动事件)

如图

添加click单击事件,

添加双击事件

 

添加鼠标移动事件,鼠标进入mouseenter事件加入红色的背景,离开的时候moseleave事件加入白色背景

也可以把mouseenter/moseleave改写成如图:

3、键盘事件 

.keydown()    按下

.keyup()     抬起

4、表单事件

获得焦点

.focus() 获得焦点就是 比如说当你在输入框输入东西的时候,你的输入框会变颜色就叫获得焦点

失去焦点

.blur()  当你点击其他的地方 你的输入框的颜色消失,从获的焦点到失去焦点。

值发生变化

.change()比如 当值发生变化的时候会出发这个事件 用法如下

表单的提交事件

.submit() 提交事件

在提交表单中需要进行一些输入校验是否正确,只有正确才能进行提交

转载地址:https://blog.csdn.net/weixin_42781544/article/details/107383096 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:python 排序 冒泡排序
下一篇:【Python、Django】模糊查询

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年03月22日 06时41分45秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

攻防世界 适合做桌面_世界杯大冷门,双方实力悬殊,德国队为何输给了韩国队... 2019-04-21
可涂抹什么让指纹加深_手机镀膜是什么?液体玻璃手机镀膜和膜结手机纳米防护的区别... 2019-04-21
node静态服务器优缺点_Node —— BFF 2019-04-21
新风系统风速推荐表_PE管还是PVC管?现场评测新风系统两种管道对比 2019-04-21
华为社招嵌入式软件面试_嵌入式软件面试那点事 2019-04-21
心电图多少为正常范围_一个人的正常尿酸是多少,不管体重多少,不超过这个范围都算正常... 2019-04-21
两个集合相等的例题_人教A版高中数学必修一1.1.集合间的基本关系优质课公开课课件、教案... 2019-04-21
文件 写回硬盘_小猿圈python学习-用Python操作文件 2019-04-21
转图片_PDF转图片怎么转?这个PDF转换器很不错! 2019-04-21
杭州电子科技大学历年真题_2021年杭州电子科技大学851数据结构考研复习资料... 2019-04-21
使用sklearn预测走势_使用python+sklearn实现高斯过程分类(GPC)的概率预测 2019-04-21
impdp 不兼容_oracle expdp exp高低版本间导入导出 2019-04-21
楞严咒全文翻译_楞严咒解释 2019-04-21
分层结构的生活例子_分层作业设计案例 2019-04-21
k8s selector_Kubernetes Labels 和 Selectors 2019-04-21
苹果退款_苹果退款都有哪些方法? 2019-04-21
hb100 微波雷达arduino_HB100微波雷达模块无线X波段雷达探测器探头传感器模块10.525GHz... 2019-04-21
处理什么填空词语_高考完形填空八大技巧 #梁师亦友聊英语#第368期 2019-04-21
css 盒子有内容 盒子往下掉_css盒子模型深入了解 2019-04-21
mysql select 补空行_【原创】Mysql中select的正确姿势 2019-04-21