
本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关于作者
