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;
           /*

最低0.47元/天解锁文章

biggirler

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发----jQuery

文章目录Web前端开发----jQuery一、jQuery介绍1、简介2、jQuery加载Web前端开发----jQuery一、jQuery介绍1、简介jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。在上一篇中写到的很多案例代码，他们的js代码和HTML是写...
复制链接

扫一扫