趣闻网站如何做,黑龙江省特种证查询,linux主机上传网站,信誉好的品牌网站建设零.前言
在学习JQuery前#xff0c;您需要具备以下知识#xff1a;
HTML相关知识(DOM)CSS相关知识JavaScript相关知识
一.JQuery
1.1JQuery简介
JQuery是一个JavaScript的“函数库”#xff0c;不是JavaScript的一个框架#xff0c;与“VUE、REACT”有本质区别#x…零.前言
在学习JQuery前您需要具备以下知识
HTML相关知识(DOM)CSS相关知识JavaScript相关知识
一.JQuery
1.1JQuery简介
JQuery是一个JavaScript的“函数库”不是JavaScript的一个框架与“VUE、REACT”有本质区别
(为方便起见后续的JQ全部代指JQuery)
JQuery设计的初衷是“方便对DOM对象的操作以及对DOM对象进行更精细的操作”
在“VUE、REACT”等框架出现之前JQ曾经统治过一整个时代即使现在JQ相对落后但学习JQ仍然是有必要的学习JQ后可以帮我们精简代码(偷偷懒)
JQuery具有以下功能
HTML元素选取HTML元素操作CSS操作HTML事件函数设计、绑定JavaScript特效和动画HTML DOM的遍历和修改AJAX
1.2JQuery的安装
JQ作为JS的一个“函数库”并不集成于JS中而是作为一个外部库需要我们自行安装使用。
安装方式有两种“本地安装”、“网络安装”
“本地安装”的优点是用户启动快将JQ库集成在项目中。缺点是可能占点小空间(也可以忽略不计)
使用方法
在head标签中使用script的“src”属性导入本地JQ文件的路径
script src本地JQ.js文件的路径/script
“网络安装”的优点是用户启动可能较慢因为需要用户先到“网络共享器”中下载JS库再启动项目不过当今的主流浏览器都内置了JQ文件可以忽略不计。
使用方法
在head标签中使用script的“src”属性写入“网络JS共享器的URL”
对于“URL”有很多可以使用国内的“抖音”、“阿里”的URL也可以使用官方的URL。
官网地址
jQuery CDN
在这里我们可以选择需要的JQ地址其中有四个版本“uncompressed”、“minified”、“slim”、“slim minified”四个版本。
四个版本的功能性依次下降所占体积依次下降。 点击需要的版本可以弹出URL 二.JQuery语法
2.1JQ语法介绍
JQ语法相对简单有JS基础的可以立刻上手
“$(selector).action()”
其中
“selector”是“选择器”用来表示选取的是哪一个(种)元素“action()”是“操作”用来表示对选取的元素进行何种操作“$”是“定义JQ”用来定义JQ语句
2.2JQ选择器
JQ语法中的“选择器”与JS基本相同下面来学习“元素选择器”共四种
“this选择器”、“标签选择器”、“类选择器”、“id选择器”
$(this).hide() 隐藏当前元素(this指针代指当前元素)$(p).hide()隐藏p元素$(.test).hide()隐藏类名为“test”的所有元素$(#test).hide()隐藏id为“test”的元素
可以看到四个选择器的使用方式与JS一模一样
2.3文件就绪函数【重要】
在实际应用中你会发现很多JQ语句都被包含在了一个“$(document).ready()”函数中
$(document).ready(function(){//JQ操作
})
这个函数叫作“文件就绪函数”作用是“防止文档在完全加载(就绪)之前就运行JQuery代码从而出错”
下面是两个失败的例子
试图隐藏一个不存在的元素获得未完全加载的图像的大小
下面再给出一个“点击按钮后p段落消失的例子”里面用到了“文件就绪函数”可以好好体会一下
bodyp idsample我在按钮被点击后会消失/pbutton onclickclick点击我/buttonscript$(document).ready(function(){$(button).click(function(){$(#sample).hide()})})/script
/body
2.4更多的JS选择器
除了上面所说的“元素选择器”以外在JQ中还有“属性选择器”、“CSS选择器”、“混合选择器”
“属性选择器”可以使用“XPath”表达式选择带有特定属性的元素
$([href])选取所有带有“href”属性的元素$([href#])选取所有带有“href”属性且属性值为“#”的元素$([href!#])选取所有带有“href”属性且属性值不为“#”的元素$([href$.jpg])选取所有href值以“.jpg”结尾的元素
“CSS选择器”可用于改变HTML元素的CSS属性
$(p).css(background-color,red)
上述例子用来改变p标签的背景颜色
“混合选择器”可将“id选择器”、“类选择器”、“标签选择器”等所有选择器混合一起使用
混合规则“从左到右依次翻译”
$(div#intro.head)idintro的div标签的所有classhead的元素
三.JQ事件
3.1JQ事件简介
JQ可以实现将某个元素与JQ(JS)事件函数绑定在一起从而实现复杂功能
常见的事件有“鼠标点击”、“鼠标移动”、“快捷键”等等
官方给出的内置事件函数基本可以供我们日常使用较复杂的功能且动手能力强的可以“自定义事件函数”
JQ事件处理跟JS使用DOM对象绑定事件函数几乎一样
3.2JQ事件使用
给出一个例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://code.jquery.com/jquery-3.7.1.min.js/script
/head
bodyp idsample我在按钮被点击后会消失/pbutton onclickclick点击我/buttonscript$(document).ready(function(){$(button).click(function(){$(#sample).hide()})})/script
/body
/html
这段代码将“click()事件函数绑定给了button标签
3.3常见的事件汇总
下面给出一些常见的事件汇总更完全的事件请参考“JQ文档”
jQuery 参考手册 - 事件 (w3school.com.cn)
事件函数效果$(document).ready(function)当文档就绪后$(selector).click(function)当被绑定元素被点击后$(selector).dbclick(function)当被绑定元素被双击后$(selector).focus(function)当被绑定元素获得焦点时$(selector).mouseover(function)当鼠标悬停在被绑定元素时
