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. yarn-site.xml 配置介绍

    yarn-site.xml 配置介绍 yarn.scheduler.minimum-allocation-mb yarn.scheduler.maximum-allocation-mb 说明:单个容器 ...

  2. [Python]爬取 游民星空网站 每周精选壁纸（1080高清壁纸） 网络爬虫

    一.检查 首先进入该网站的https://www.gamersky.com/robots.txt页面 给出提示: 弹出错误页面 注: 网络爬虫:自动或人工识别robots.txt,再进行内容爬取 约束 ...

  3. 通过vsphere给esxi添加本地硬盘

    公司ESXi服务器的硬盘空间不够使用,现在新加了一块硬盘在ESxi服务器上.在服务器上添加完硬盘后,在Vsphere上是看不到新加硬盘的. 下面我们来通过虚拟机模拟该情况,先添加一块硬盘.如下图: 在 ...

  4. 一个抓猫的游戏 消遣GAME 持续更新中！

    一个抓猫的游戏 版本 Catch_Cat_V0.30 https://files-cdn.cnblogs.com/files/send-off-a-friend/Catch_Cat_V0.3.rar ...

  5. 剑指offer-面试题32-之字形打印二叉树-二叉树栈

    /* 题目: 分行按层自上向下呈之字形打印二叉树.第一行从左到右,第二行从右到左,第三行从左到右... */ /* 思路: 使用两个栈stack1和stack2. stack1存储从左向右打印的节点, ...

  6. Chapter1 递归与递推

    Chapter 1 递归与递推 时间复杂度(转载自yxc大佬) 一般ACM或者笔试题的时间限制是1秒或2秒. 在这种情况下,C++代码中的操作次数控制在 107107 为最佳. 下面给出在不同数据范围 ...

  7. Local changes were not restore

    问题是这样的: 更新代码的时候出现这个弹框,不能更新最新代码 解决如下: 直接点击Clear [注意:这个操作是放弃本地所有的修改,如果要找回代码千万不要点击] 再点击Apply Stash  就可以 ...

  8. 分布式集群HA模式部署

    一:HDFS系统架构 (一)利用secondary node备份实现数据可靠性 (二)问题:NameNode的可用性不高,当NameNode节点宕机,则服务终止 二:HA架构---提高NameNode ...

  9. mysql 数据库中存在重复记录,删除保留其中一条

    DELETE FROM people WHERE peopleName IN ( SELECT peopleName FROM people GROUP BY peopleName HAVING ) ...

  10. AMC Problems and Solutions

    AMC Problems and Solutions:https://artofproblemsolving.com/wiki/index.php/AMC_Problems_and_Solutions ...