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. gcc 将两个文件合成一个文件（c）

    一个文件是: 一个文件是: 两个文件的作用是输出一段文字,其中一个文件调用了另一个文件 gcc 命令为: -c 生成了object 文件,-o 生成了可执行文件,并且合成.

  2. cobaltstrike使用笔记2

    0x01 cs服务端绕过流量检测 定义C2的通信格式,修改CS默认的流量特征 编写Profiles: 开源Profiles:https://github.com/rsmudge/Malleable-C ...

  3. python——面向对象，继承

    """继承:子类继承父类1.单继承,多继承2. 子类调用或重用父类的同名属性和方法3. 多层4.私有属性和私有方法class 类名(object<父类>)&q ...

  4. mysql升级到5.7

    最近遇到一个问题,执行下列语句会报错: CREATE TABLE `t_user` ( `USER_ID` bigint() NOT NULL AUTO_INCREMENT COMMENT '用户ID ...

  5. Docker Compose搭建ELK

    Elasticsearch默认使用mmapfs目录来存储索引.操作系统默认的mmap计数太低可能导致内存不足,我们可以使用下面这条命令来增加内存: sysctl -w vm.max_map_count ...

  6. PTA 学生成绩链表处理（C语言）

    本题要求实现两个函数,一个将输入的学生成绩组织成单向链表:另一个将成绩低于某分数线的学生结点从链表中删除. 函数接口定义: struct stud_node *createlist(); struct ...

  7. CF #619 div.2

    序 希望,不要还有一天像今天一样糟糕. T1 three strings 笔记本的google 炸了,读题可难受了 多组测试数据 我们的想法是,用string存字符串,若 对于任意的i,a[i],b[ ...

  8. flutter常用插件(持续更新)

    flutter插件官网地址:https://pub.dartlang.org/packages/ 1. image_picker 一个可以从图库选择图片,并可以用相机拍摄新照片的flutter插件 2 ...

  9. Linux 下安装 java

    yum 安装java 配置环境 /etc/profile export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.242.b08-0.el7_7. ...

  10. 关于新版vue-cli安装json-server在build文件里没生成出dev-server文件

    今天在安装json-server时遇到一个问题,build文件里并没有生成dev-server.js文件, 开始是怀疑配置有问题,或者安装不正确,然后重新安装了两三次,还是这样,郁闷.. 通过查询资料 ...