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

本文共 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】模糊查询

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2023年05月23日 12时51分03秒

关于作者

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

最新文章

运算符 2019-09-17 10:17:19
标识符和关键字 2019-09-17 10:17:19
数据类型占位 2019-09-17 10:17:19
彩色图像-灰度图像-二值图像 2019-09-17 10:17:18
opencv之理解创建图片类型 及CV_8UC1,CV_8UC2等参数详解 2019-09-17 10:17:18
机械臂--相机标定 2019-09-17 10:17:17
机械臂项目之--TCP/IP协议 2019-09-17 10:17:17
switch-scanf-break-continue简单知识点 2019-09-17 10:17:16
结构体笔记 2019-09-17 10:17:16
指针笔记_4 2019-09-17 10:17:15
指针笔记_3 2019-09-17 10:17:15
指针笔记_2 2019-09-17 10:17:14
指针笔记_1 2019-09-17 10:17:14
C语言编程中遇到的问题 2019-09-17 10:17:13
Linux笔记整理 2019-09-17 10:17:13
Linux常见问题一 2019-09-17 10:17:12
STM32启动模式及程序下载原理总结 2019-09-17 10:17:11
STM32操控外设为什么要先使能时钟 2019-09-17 10:17:10
结构体作用(STM32) 2019-09-17 10:17:10
STM32的I/O口的8种工作模式 2019-09-17 10:17:09