文章目录
Web前端开发----jQuery
一、jQuery介绍
关于前端的学习,可以通过菜鸟教程和W3C网站
学习
一些前端页面设计的模板,可以参考懒人之家
:https://www.lanrenzhijia.com/
1、简介
jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
在上一篇中写到的很多案例代码,他们的js代码和HTML是写在一起的,其实我们可以把js代码独立出来:创建一个js目录,里面用来放单独的js代码,然后在HTML的head里加入<script type="text/javascript" src="目录名/文件名.js"></script>
jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。
下载地址:
jQuery官方网站: http://jquery.com/
我们不需要看源代码,可以下载压缩版的:
打开是这样一个文件,将该文件的内容复制,粘贴到一个.js文件中即可,文件名称就为 jquery-3.4.1.min
我这里是点击直接下载到js目录中
2、jQuery加载
将获取元素的语句写到页面头部head,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。
也可以简写:
二、jQuery选择器
选择某个网页元素,然后对它进行某种操作,jquery选择器可以快速地选择元素,
选择规则和css样式相同,使用length
属性判断是否选择成功。
1、jquery用法思想一
*选择某个网页元素,然后对它进行某种操作
基本选择器
选择器修饰过滤
选择器函数过滤
选择器转移
2、jquery用法思想二
同一个函数完成取值和赋值
操作行间样式
操作样式类名
三、jQuery属性操作
1、设置html内容
设置html内容
2、设置属性值
绑定click事件
jQuary特效效果
四、jQuary事件
五、应用案例
1、基于jqurey实现电影排行榜:
默认只显示电影名称列表,当鼠标经过电影名称时,显示电影的详细内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 450px;
border: 1px solid gray;
margin: 0 auto;
margin-top: 50px;
}
.box h1{
font-size: 25px;
line-height: 35px;
color: green;
padding-left: 10px;
border: 1px dashed gray;
}
.box li{
list-style: none;
padding: 10px 10px;
border: 1px dashed gray;
}
.box li span{
background-color: gray;
/*设置行内元素,才能改变宽高*/
display: inline-block;
width: 15px;
height: 15px;
color: white;
text-align: center;
margin-right: 8px;
}
/*修改前三个标签背景颜色*/
.box li:nth-child(-n+3) span{
background-color: green;
}
.content img{
width: 80px;
height: 120px;
float: left;
}
.content p{
width: 180px;
height: 120px;
float: right;
font-size: 12px;
}
.content{
margin-top: 5px;
/**/
overflow: hidden;
/*