正文

第十九篇jquery初步学习

幸享龙枫  幸享龙枫  2022-09-20  306

关键词：

jQuery 初步学习

jQuery可以理解为是一种脚本，需要到网上下载，它是一个文件，后缀当然是js的文件，它里面封装了很多函数方法，我们直接调用即可，就比方说，我们用JS，写一个显示与隐藏，通常是：div.style.display="none/block"这一类，即为显示或者隐藏，而jQuery，它里面做了处理，我们直接这样：$("div").hide() 隐藏，$("div").show() 显示，它在js里就处理了hide和show两个函数，我们调用即可直接实现JS的功能。

同学们要注意，jQuery，第二个Q才是大写，其他都是小写，别认错，读错咯！

这里要说一下，初学的同学，会觉得jQuery很打脑壳，但是用着用着，你会发现，jQuery比JS好用太多了，压根不想再用JS，因为jQuery出现的本身，就是提高我们的代码效率，方便使用，方便学习。

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

以上是引用w3c教程的介绍。

那么同学们光看文字介绍，简介是不懂，我们来看代码，用jQuery实现一下小功能：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery 初步学习</title>
    <!--引用jQuery脚本，否则无法使用jQuery编程-->
    <script src="../js/jquery-1.12.2.min.js"></script>
</head>
<body>
<div>我是第一个div，单击我，我就隐藏</div>
<div>我是第2个div，单击我，我就隐藏</div>
<div>我是第三个div，单击我，我就隐藏</div>

<p>我是p标签，单击我，显示所有div</p>

<h3 id="myp">点击我，弹出一个介绍框</h3>
<script>
    //jQuery的事件，都不需要on开头了，就是说原本JS实现onclick，这里的jQuery不需要on，有on就是错误的
    //jQuery的关键，用$符号开头，然后找到对应的元素，ID，class，来进行操作，这里我们找的是元素
    $("div").click(function (){
        $(this).hide();
        //this是本身的意思，就是说，
        //这里三个div，当我鼠标指向一个div的时候，我只会操作这个div
        //而不会影响到其他的div元素，this可以很方便的控制多个元素和class，ID就不需要了，因为它是唯一的
    });
    //这里的意思是，我点击p元素，则显示所有的div元素
    $("p").click(function(){
       $("div").show();
        //show()函数，即为显示，hide()函数，则是隐藏。
    });
    //指向ID，则需要在前面加一个# ，指向class前面加一个 . 就跟css是一样的
    $("#myp").click(function(){
        alert(‘嗨，同学们好，我是jQuery‘);
    });
</script>
</body>
</html>

没有jQuery脚本的同学，去网上下载哦。

以上难点，在于jQuery的点击事件 click，首先它处理了on开头，其次，有一个关键的地方，老师不知道如何解释，就用自己的话，比较抽象的告诉大家：click后面还跟了一个括号，括号里跟的是function关键字，随后再是一个括号加一个花括号，$("#myp").click(function () {执行代码操作....})

因为click只是一个点击事件，它不是函数，所以jQuery处理了，在它的后面加一个括号，再其里面加一个function关键字，大家都知道function关键是定义一个函数的，一个函数的组成是function关键字加一个函数名再加一个括号和花括号组成，即为：function a(){执行代码操作} ，但是这里jQuery的事件操作，是不需要函数名的，所以就成了上面的。

很多同学看着迷糊，老师在这里就再单独的写一次，jQuery的事件并运行函数：$("div").click(function (){执行代码})

注意里面的括号，click后面一个括号，function后面一个括号，再一个花括号，结束！

开始写游戏---第十九篇

开始写游戏---第十九篇　　今天干了这些事情：　　　　1、新增菜单类->动态获取高度的功能　　　　2、新增战斗场景->角色攻击动画的功能　　　　3、封装FGUI的播放动画函数，便于后期使用　　上图：　　　　1、新增菜... 查看详情

django第十九篇js实现的ajax同源策略和前端jsonp解决跨域问题

一、回顾jQuery实现的ajax首先说一下ajax的优缺点优点：AJAX使用Javascript技术向服务器发送异步请求；AJAX无须刷新整个页面；因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；jquery实现的ajaxindex.html<!DOCTY... 查看详情

python开发第十九篇：python操作mysql(代码片段)

Python开发【第十九篇】：Python操作MySQL 本篇对于Python操作MySQL主要使用两种方式：原生模块pymsqlORM框架SQLAchemypymsqlpymsql是Python中操作MySQL的模块，其使用方法和MySQLdb几乎相同。下载安装?1pip3installpymysql使用操作1、执行SQL+ViewCod... 查看详情

flask第十九篇——模板(代码片段)

请关注微信公众号：自动化测试实战今天我们继续模板的知识，现在我们增加字典的复杂度，这个时候在render_template第二个参数可以传**title，以后我们会用**context代替原来的title=title。#coding:utf-8fromflaskimportFlask,render_templateapp=Flas... 查看详情

我的第十九篇博客---javascript基本操作

通过条件来控制程序的走向，就需要用到条件语句条件运算符：==,===,>,>=,<,<=,!=,&&(而且),||(或者),!(否)ifelsevariNum01=3;variNum02=5;varsTr;if(iNum01>iNum02) sTr=‘大于‘;else sTr=‘小于‘;alert(sTr);多重ifelse语句variNow= 查看详情

小刘同学的第十九篇博文

今天主要是数据库，然后哎，白天做了一件蠢事，惹得一个小姐姐心情不好。。。今天把模拟题做完了，老师自己都说出的有问题。。。。但是现在自己很多语法也记不住，特别是存储过程和触发器、视图，这些重点考察的语法... 查看详情

第十九篇：复制控制(下)---自定义析构函数

前言经过前两篇随笔( 上中 )的分析我们已经解决了具有指针成员的同类对象“干涉”问题。可惜，前面给出的解决方案代码还是不完整。还有什么问题呢？观察发现，构造函数里面有new... 查看详情

第十九篇：处理僵尸进程的两种经典方法

前言如果父进程没有结束，而子进程终止了。那么在父进程调用wait函数回收这个子进程或者父进程终止以前，这个子进程将一直是僵尸进程。本文将提供两种方法处理这个问题。方法一：父... 查看详情

第十九篇flowable中的动态表单(代码片段)

Flowable动态表单 Flowable提供了一种简便灵活的方式，用来为业务流程中的人工步骤添加表单。有两种使用表单的方法：使用（由表单设计器创建的）表单定义的内置表单渲染，以及外部表单渲染。使用外部... 查看详情

第十九篇laydate设置起始时间，laydate设置开始时间和结束时间(代码片段)

laydate设置开始时间后，结束时间不可小于已选择的开始时间laydate设置结束时间后，开始时间不可小于已选择的结束时间 1//设置开始时间2varstartDate=laydate.render(3elem:‘#StartDate‘,4done:function(value,date)5if(value!==‘‘)6endDate.config.mi... 查看详情

第十九篇：主题建模topicmodelling

目录理解文本问题救援主题模型主题是什么样的？主题模型的应用？大纲主题模型简史问题概率LSA(LatentSemanticAnalysis)潜在语义分析问题LatentDirichletAllocation潜在狄利克雷分配潜在狄利克雷分配输入输出学习采样方法（... 查看详情

c++从入门到入土第十九篇：二叉搜索树(代码片段)

二叉搜索树文章目录二叉搜索树二叉搜索树概念原理性质复杂度二叉搜索树操作1.结构2.查找3.插入4.中序遍历5.拷贝6.销毁7.删除二叉搜索树概念二叉查找树（BinarySearchTree），（又：二叉搜索树，二叉排序树... 查看详情

c++从青铜到王者第十九篇:c++二叉树进化之二叉搜索树(代码片段)

系列文章目录文章目录系列文章目录前言一、内容安排说明二、二叉搜索树1.二叉搜索树概念2.二叉搜索树操作1.二叉搜索树的查找2.二叉搜索树的插入3.二叉搜索树的删除4.二叉搜索树的修改3.二叉搜索树实现4.二叉搜索树应用5.二... 查看详情

软工项目组第十九次会议（初步完成并修复一些小bug）

第十九次会议时间：2018-1-23,24地点：网上讨论，对最终版本进行修改。对以下一些方面进行了调整：BUG的修复：1、修改了IE浏览器中按钮自动换行，以及button按钮和inputbutton按钮在IE浏览器中大小不同的问题。（将按钮的display属... 查看详情

linux从青铜到王者第十九篇:linux网络基础第二篇之滑动窗口流量控制拥塞控制延迟应答捎带应答

系列文章目录文章目录系列文章目录前言👮一、滑动窗口💰一、滑动窗口的由来💰二、滑动窗口存在的问题💷1.滑动窗口的大小💷2.数据包已经传输给对方，但是对方返回的ACK数据包丢失💷3.传输的... 查看详情

linux篇第十九篇——网络套接字编程（tcp套接字的编写+多进程版本+多线程版本+线程池版本）(代码片段)

⭐️本篇博客开始给大家介绍网络编程中的套接字编程——基于UDP协议的套接字和基于TCP的套接字，这篇博客主要介绍基于UDP协议套接字，下一篇介绍基于TCP协议的套接字。在介绍套接字编程之前，我会先给大家介绍... 查看详情

rhel7学习第十九课

使用MariaDB数据库管理系统使用PXE+Kickstart无人值守安装服务无人值守安装真的很神奇，非常有意思好期待自己感觉搭建一个无人值守的安装服务，以后在安装系统就不用费劲了。需要使用PXE+TFTP+FTP+DHCP+Kickstart服... 查看详情

“全栈2019”java多线程第十九章：死锁详解

...境JDKv11IntelliJIDEAv2018.3文章原文链接“全栈2019”Java多线程第十九章：死锁详解下一章“全栈2019”Java多线程第二十章：同步方法产生死锁的例子学习小组加入同步学习小组，共同交流与进步。方式一：关注头条号Gorhaf，私信“Java... 查看详情