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. mybatis 配置--->确认jar包是否正确

    mybatis 配置之前,首先要确保服务器jar包是否成功 配置jar包如下添加mybaties-3.5.2. jar, maven 的 pom.xml 配置如下,查看配置是否成功见 如上分类 Mav ...

  2. 重启防火墙（iptables)命令#service iptable restart失效

    Redirecting to /bin/systemctl restart iptables.ser linux下执行防火墙相关指令报错: Redirecting to /bin/systemctl ...

  3. 8maven配置多个项目之间的依赖

    首先创建两个项目进行测试依赖 创建一个HelloWorld2项目,一个HelloWorld类里面有一个sayHello的方法 然后再创建一个HelloWorldTime项目,一个SayHelloWor ...

  4. Angular修改Port文件一览

    \protractor.conf.js\README.md\node_modules\angular-cli\README.md\node_modules\angular-cli\blueprints ...

  5. MySQL第六课

    SELECT [DISTINCT]     * /{字段名1,字段名2,字段名3,.........} FROM 表名 [WHERE 条件表达式1] [GROUP BY 字段名[HAVING 条件表达 ...

  6. cat - EOF标志的使用

    前提 cat命令是用于连接文件并输出到标准输出设备或指定文件中. EOF为标志,可以替换为其他字符串 代码块 ``` 将文件内容作为标准输出也就是将文件内容输出到屏幕中,也可写作 cat filena ...

  7. #AcWing系列课程Level-2笔记——4. 浮点数二分算法

    浮点数二分算法 编写浮点数二分,记住下面的思路,代码也就游刃有余了! 1.首先找到数组的中间值,mid=(left+right)>>1,区间[left, right]被划分成[left, ...

  8. HTML5视频（自定义视频播放器源码）

    video对象 兼容情况: safari浏览器不支持webm格式 Chrome浏览器支持webm格式 ie8以及以下不支持video标签 , ie9支持video标签 ,但是支持mp4格式的 Fire ...

  9. jQuery笔记（二）jQuery中DOM操作

    前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...

  10. CF776D The Door Problem [2sat]

    考虑 \(\texttt{2-SAT}\) 首先每个门 \(i\) 都有一个初始状态 \(a_i\) 题目条件每个门只被两个开关控制,那么很显然的 \(\texttt{2-SAT}\) 用 \(b_{ ...