JavaScript的jQuery

不通过JavaScript的原生代码，如document.getElementById("")

而是通过jQuery的$符号选择器。

jQuery库，里面存在大量JavaScript的函数。

推荐网站：http://jquery.cuishifeng.cn/

1. 下载jQuery库

2. 建一个文件夹，导入下载的包

  

3. 初识jQuery的语法

公式：$(selector).action()

注意，在<head>和</head>中要导入包<script src="lib/jquery-3.4.1.js"></script>。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript学习</title>
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>

<a href="" id="test_jquery">点我</a>

<script>

//选择器就是css的选择器
$('#test_jquery').click(function () {
alert("Hello,World!");
})

</script>
</body>
</html>

效果为：点完点我，跳出Hello,World!

   

4. jQuery的选择器

在jQuery中，css中的选择器全能用。

文档工具站：http://jquery.cuishifeng.cn/

举三个例子：

1、标签选择器

2、id选择器

3、class选择器

$("p").click();       //标签选择器
$("#d1").click();     //id选择器
$(".class1").click(); //class选择器

5. jQuery的事件

分为：鼠标事件、键盘事件

举个例子：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript学习</title>
<script src="lib/jquery-3.4.1.js"></script>
<style>
#divMove {
width: 500px;
height: 500px;
border: 1px solid #ff0e11;
}
</style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
<script>
//当网页元素加载完毕后，响应事件
$(function () {
$("#divMove").mousemove(function (e) {
$("#mouseMove").text("x:" + e.pageX + "y:" + e.pageY);
})
})

</script>
</div>

</body>
</html>

6. jQuery操作DOM元素

1、更改列表元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
​
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>
​
<script>
    $('#test-ul li[name=python]').text();   //当test()括号中没参数，就是获取值；当有参数，就是改变值，这是个重载
    $('#test-ul').html();//当html()括号中没参数，就是获取值；当有参数，就是改变值，这是个重载
</script>
​
​
</body>
</html>

当test()括号中有参数，就是改变值

当html()括号中有参数，就是改变值

JavaScript的jQuery的更多相关文章

  1. jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  2. Error: Bootstrap's JavaScript requires jQuery错误

    引入bootstrap时会出现的问题:boostrap下拉菜单无效,浏览器报Uncaught Error: Bootstrap's JavaScript requires jQuery错误, 解决办法 ...

  3. 【JavaScript与JQuery获取H2的内容】

    撰写日期:2016-7-13 11:05:07 JavaScript与JQuery获取DOM内容是有区别的,接下来看一例子 栗子: Jquery-获取H3中的内容然后Dom转换为Jquery < ...

  4. Jquery 复习练习（02）Javascript 与jquery 互转 onclick 与click区别

    Javascript 与jquery 互转 jquery 为<script src="jquery-1.8.3.js"></script> 以checkbo ...

  5. 最流行的JavaScript库jQuery不再支持旧版IE

    直到JQuery2.0的发布,流行的jQuery JavaScript库到了一个重要里程碑.2.0版本比前任版本在大小上缩减了12%,但是更大的新闻是,jQuery 2.0不在对IE6,7,8三个版本 ...

  6. 原生javascript和jquery实现简单的ajax例子

    后台C#代码 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/p ...

  7. 在C#后端处理一些结果然传给前端Javascript或是jQuery

    在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...

  8. Javascript配合jQuery实现流畅的前端验证

    做前端时一般都习惯用JavaScript进行表单的简单验证比如非空验证和正则表达式验证,这样过滤后的数据提交到服务端再由专门的控制器做数据处理,这样能减轻服务器的负担,下面看一下前端验证的简单步骤: ...

  9. JavaScript、Jquery选择题

    尚学堂Java EE软件工程师认证考试 试题库-选择题     一.    选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是(   )(选择一项) A. numb_1 ...

  10. javascript和jquery中获取列表的索引

    网页中的图片预览一般都需要获取图片列表的索引,或则图片对应的标签的索引,以此达到点击相应的标签获取索引,显示相应的图片 列表有很多种表达的方式,一种是 <ul> <li>苹果& ...

随机推荐

  1. 牛客练习赛56 E 小雀和他的王国

    题目链接:https://ac.nowcoder.com/acm/contest/3566/E 思路:tarjan缩点,桥重建图,dfs跑树的直径. #include <iostream> ...

  2. git commond 详解

    Git commit git commit 主要是将暂存区里的改动给提交到本地的版本库.每次使用git commit 命令我们都会在本地版本库生成一个40位的哈希值,这个哈希值也叫commit-id, ...

  3. 通过sd文件发布的FeatureAccess服务不能查看到图层

    发布服务有两种方法, 1. 用ArcMap --Share As - service --publish a service 此方法可以直接将地图数据发布到ArcGIS  Server 的地图服务中, ...

  4. PHP 计算当前时间是这一年的第几周

    $week = intval(date('W',time()));

  5. Byte 一个字节的数据大小范围为什么是-128~127

    一个字节是8位,最高位是符号位,最高位为0则是正数.最高位为1则是负数 如果一个数是正数,最大数则为:01111111,转为十进制为127, 如果一个数是负数,按照一般人都会觉得是11111111,转 ...

  6. vue自学入门-6（vue jsx）

    目录: vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5( ...

  7. 【Debian学徒记事】记一次解决Debian开机1min30s

    记一次解决Debian开机1min30s 打开我亲爱的Debian 欸,好像有点慢 [* * * * ] A start job is running for....(*/1min30s) [TIME ...

  8. Eigen库学习---Map类

    Eigen中定义了一系列的vector和matrix,相比copy数据,更一般的方式是复用数据的内存,将它们转变为Eigen类型.Map类很好地实现了这个功能. Map定义 Map(PointerAr ...

  9. 启动zabbix-server/agent报错：cannot open "/etc/zabbix/logs/zabbix_server.log": [13] Permission denied

    注:该报错解决方式同样适用于zabbix-agent 启动zabbix-server报错信息如下: 2月 27 16:52:44 localhost.localdomain zabbix_server ...

  10. 使用ssh localhost命令，发生异常ssh: connect to host localhost port 22: Connection refused

    使用"ssh localhost"命令,失败: 问题分析如下: 出现这个问题是因为Ubuntu默认没有安装openssh-server.检查是否安装了openssh-server, ...