Jquery基本操作、jQuery事件、jQuery动画

最新推荐文章于 2022-10-15 16:12:27 发布

CYSDLN

最新推荐文章于 2022-10-15 16:12:27 发布

阅读量159

点赞数 2

分类专栏：学习笔记文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/CYSNLD/article/details/126756014

版权

学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

替换节点

replaceWitch()

给某个元素替换掉

$("ul li").eq(1).replaceWith("<li><a href='#'>替换</a></li>")

replaceAll()

$("<li><a href='#'>替换</a></li>").replaceAll("ul li").eq(1)

复制元素

clone()

复制之后可在进行下一步操作

$("ul li:eq(2)").clone();
$("ul li:eq(2)").clone().replaceAll("ul li:eq(1)")

jQuery事件

鼠标事件

方法	语法	如何触发
click()	$(selector).click(function(){代码块})	鼠标单击触发
dblclick()	$(selector).dblclick(function(){代码块})	鼠标双击触发
mouseover()	$(selector).mouseover(function(){代码块})	鼠标滑过触发
mouseout()	$(selector).mouseout(function(){代码块})	鼠标离开触发
hover()	$(selector).hover(function(){鼠标划过时},function(){鼠标离开后})	鼠标悬浮触

事件绑定

第一种绑定方法 bind() 一次只能绑定一个事件

//语法
$("div").bind(事件类型,事件处理函数)
//使用
$("div").bind("click",function(){
    //代码块
})

第二种绑定方法 on() 一次可以绑定多个事件

//语法
$("div").on(事件类型,事件处理函数)
//单个绑定事件
$("div").on("click",function(){
    //代码块
})
//绑定多个事件
$("div").on({
    "click":function(){
        //单机执行代码块
    },
    "mouseover":function(){
        //鼠标划过代码块
    },
    "mouseout":function(){
        //鼠标离开代码块
    }
})

第三种绑定方式 on() 绑定事件时进行动态绑定事件委托绑定给父级

$("body").on("click","div",function(){
    //代码块
})

另一种动态绑定

delegate(标签,事件类型,函数)

$("body").delegate("div","click",function(){
    //代码块
})

按键事件

    //文档                         事件对象
$(document).on("keydown".function(event){
    console.log(event.keyCode); //键码
})

字母和数字键的键码值(keyCode)

按键	keyCode	按键	keyCode	按键	keyCode	按键	keyCode
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

数字键盘上的键的键码值(keyCode)

按键	keyCode	按键	keyCode
0	96	8	104
1	97	9	105
2	98	*	106
3	99	+	107
4	100	Enter	108
5	101	-	109
6	102	.	110
7	103	/	111

功能键键码值(keyCode)

按键	keyCode	按键	keyCode
F1	112	F7	118
F2	113	F8	119
F3	114	F9	120
F4	115	F10	121
F5	116	F11	122
F6	117	F12	123

控制键键码值(keyCode)

按键	keyCode	按键	keyCode	按键	keyCode	按键	keyCode
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	\|	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222

多媒体键码值(keyCode)

按键	keyCode
音量加	175
音量减	174
停止	179
静音	173
浏览器	172
邮件	180
搜索	170
收藏	171

jQuery动画

slow慢速 fast快速 normal中间速度

显示和隐藏

从左上角直接放大显示或缩小隐藏

show() 显示选中元素

hide() 隐藏选中元素

toggle() 切换显示和隐藏 hade和show的交替

淡入和淡出

慢慢变淡显示或慢慢变深显示出来

fadein() 淡入显示

fadeout() 淡出显示

fadeToggle() 切换淡入淡出 fadein 和 fadeout 交替

下滑和上滑

slideDown() 下划显示;

slideUp() 上划显示;

slideToggle 上滑下滑切换显示

代码块
 
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            display: none;
        }
    </style>
    <script src="./js/jquery-3.6.js"></script>
</head>

<body>
    <input type="button" value="显示">
    <input type="button" value="隐藏">
    <input type="button" value="切换显示和隐藏">
    <input type="button" value="淡入">
    <input type="button" value="淡出">
    <input type="button" value="切换淡入淡出">
    <input type="button" value="下滑">
    <input type="button" value="上滑">
    <input type="button" value="切换上滑和下滑">
    <div></div>
</body>
<script>
    $(function () {
        $("input[type='button']").eq(0).click(function () {
            $("div").show(500)
        })
        $("input[type='button']").eq(1).click(function () {
            $("div").hide(500)
        })
        $("input[type='button']").eq(2).click(function () {
            $("div").toggle(500)
        })
        $("input[type='button']").eq(3).click(function () {
            $("div").fadeIn(500)
        })
        $("input[type='button']").eq(4).click(function () {
            $("div").fadeOut(500)
        })
        $("input[type='button']").eq(5).click(function () {
            $("div").fadeToggle(500)
        })
        $("input[type='button']").eq(6).click(function () {
            $("div").slideDown(500)
        })
        $("input[type='button']").eq(7).click(function () {
            $("div").slideUp(500)
        })
        $("input[type='button']").eq(8).click(function () {
            $("div").slideToggle(500)
        })
    })
</script>

animate自定义动画

//格式
$(selector).animate({params},speed,callback)
//多个步骤
$("div").animate({
    "left":"300px"
}, 1000).animate({
    "top":"200px"
}, 1000).animate({
    "left":"0"
}, 1000).animate({
    "top": "50px"
}, 1000)

params: css样式

speed： slow慢速 fast快速也可自定义时间单位毫秒

停止动画

stop() 停止动画当某个动画多次点击时会触发多次，停止点击后还会一直处于触发状态，使用stop()可以让动画触发时将上一个动画停止

form表单提交

method="提交方式"

get:

信息会暴露到地址栏上提交速度快地址栏长度大小受限

用来向服务器上获取数据

提交方式获取数据后刷新页面不会有影响

post:

信息不会暴露到地址栏上提交速度慢

用来向服务器上传递修改数据

提交刷新页面重复提交可能会产生不良后果

action="提交地址"

当提交到本页是留空即可，提交到别的页面直接写页面地址

input单选或多选必须写value值以便获取选中项的值 name设置的属性值为该value的属性名

提交不刷新只针对表单元素只需要函数体内 return false

submit()事件

reset()事件

$("form").submit(function(){
    return false
})

序列化获取提交信息

$("form").submit(function(){
    //序列化
    $(this).serialize()
    //解码
    decodeURIComponent($(this).serialize())
    
    //将提交的转换为数组-对象的形式
    $(this).serializaArray()
    return false
})