WEB开发-带你JQuery入门学习

举报
zekelove 发表于 2021/07/24 17:45:51 2021/07/24
【摘要】 WEB开发-带你JQuery入门学习,jQuery 是一个轻量级的“写的少,做的多”的 JavaScript 函数库。

在学习了HTML,CSS,JavaScript后,为了让脚本开发更简单,更高效,接着就来学习一下JQuery库。jQuery 是一个轻量级的“写的少,做的多”的 JavaScript 函数库。它是目前最流行的 JS 代码库,而且提供了大量的扩展,并且兼容所有的主流浏览器。

JQuery 能做什么

1.HTML 元素选取和操作

2.HTML 事件函数

3.CSS 操作

4.JS 特效和动画

5.AJAX

6.扩展工具库等等

JQuery 使用

1.官网下载 JQuery.js,在网页中<script>标签引入JQuery;

2.从CDN中载入JQuery对应版本(BootCDN,JQuery)。

<!-- 本地引入 -->
<head>
<script src="jquery-2.2.4.js"></script>
</head>

JQuery语法

使用JQuery可以选取HTML元素,并对元素进行某些操作。

语法:$(selector).action()        $:定义的JQuery;selector:查找和查询HTML的元素;action:执行的操作。

文档就绪事件

主要指在DOM加载完成之后才能进行DOM操作。

// 第一种写法
$(document).ready(function(){
    // jQuery 代码块
});
// 第二种简写
$(function(){
    // jQuery 代码块
});

JQuery主要操作

1.选择器

选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。

如:元素($("p")), id名称($("#id")),类名称($(".class")),当前元素($(this))

2.事件

事件是指当 HTML 中发生某些事件时所调用的方法。

如:点击(click),提交(submit),获得焦点(focus),失去焦点(blur),改变事件(change),滚动(scroll),鼠标悬停(hover)

$("p").click(function(){
  // 点击操作
});
$("p").hover(
    function(){
        // 光标悬停操作
    },
    function(){
        // 光标离开操作
    }
);
$("dropdown").change(function(){
  // 下拉框内容改变操作
});

3.元素特效

显示(show()),隐藏(hide()),向下滑动(slideDown()),向上滑动(slideUp()),动画(animate()),停止(stop())

$("p").show();
$("p").toggle();
$("p").hide("slow",function(){
    // 隐藏后的操作
});

4.遍历

根据相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达所要找的元素为止。

祖先-向上遍历(parent(),parents(),parentsUntil())

后代-向下遍历(children(),find())

同胞-水平遍历(siblings(),next(),nextAll(),prev(),prevAll())

过滤-缩小检索范围(first(),last(),eq(),filter())

5.AJAX

AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。

load():从服务器加载数据,并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);
// URL:必需,参数规定您希望加载的 URL。
// data:可选,参数规定与请求一同发送的查询字符串键/值对集合。
// callback:可选,参数是 load() 方法完成后所执行的函数名称。

get():从指定的资源请求数据,可能返回缓存数据。

$.get(URL,callback);
// URL:必需,参数规定您希望请求的 URL。
// callback:可选,参数是请求成功后所执行的函数名。

post():向指定的资源提交要处理的数据,不会缓存数据。

$.post(URL,data,callback);
// URL:必需,参数规定您希望请求的 URL。
// data:可选,参数规定连同请求发送的数据。
// callback:可选,参数是请求成功后所执行的函数名。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。