首页 前端知识 HTML中的jquery

HTML中的jquery

2024-03-15 10:03:48 前端知识 前端哥 917 53 我要收藏

JQuery:

jquer:是 js 框架,它封装了 js 的操作,可以更加简单操作DOM ,事件,css,ajax交互

JQuery的使用:

JQuery是第三方框架,使用时引入到当前项目。

1.首先将JQuery.js复制粘贴到项目的 js 文件夹下

2.在需要使用 JQuery 的页面中引用 JQuery.js

语法格式:

选择器语法格式:

$("选择器").事件函数
//选择器:标签名,#id,.class

常见 事件:

clickkeypresssubmitload
鼠标事件键盘事件表单事件文档/窗口事件
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload

事件的方法语法:

$("选择器").事件(响应函数(){
    //事件触发后执行的代码
})

页面加载事件:

用ready()函数。

$(document).ready(function(){
    $("#id").click(function(){
        console.log("事件的反应")
    })
})
//简写
$(function(){
     $("#id").click(function(){
        console.log("事件的反应")
    })
})

JQuery的效果:

hide():隐藏

show():显示

fadeIn(速度,回调函数):淡入

fadeOut(速度,回调函数):淡出

fadeToggle():切换

slideDown():向下滑入

slideUp():向上滑出

slideToggle():切换

速度:指的是多长时间完成这个动作单位是毫秒

回调函数:指的是动作完成后触发的函数

动画语法格式:

对象.animate(参数1,参数2,参数3)
/*参数1,是指定css属性,用{}
参数2,是多长时间完成效果
参数3,是回调函数,  */

注意:有些css属性,例如margin-left,需要写成marginLeft

jQuery特点

  • 具有独特的链式语法。

  • 支持高效灵活的CSS选择器。 div.style.color =

  • 拥有丰富的插件。

  • 兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3855.html
标签
评论
发布的文章

jQuery之class类操作

2024-04-12 20:04:54

jQuery 菜鸟教程学习

2024-04-12 20:04:22

jQuery

2024-01-31 12:01:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!