jQuery简介

最新推荐文章于 2024-10-04 13:52:58 发布

Acndy233

最新推荐文章于 2024-10-04 13:52:58 发布

阅读量56

点赞数

分类专栏： HTML+CSS+JSP 文章标签： jquery js css javascript html

本文链接：https://blog.csdn.net/zhangsann_6/article/details/119874363

版权

HTML+CSS+JSP 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JavaScript-jQuery

1、jQuery

1.1 jQuery下载和引入

jQuery里面存在着大量的JavaScript函数

下载jQuery https://jquery.com/ 下载完引入我们的项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/jquery-3.6.0.min.js"></script>
</head>
<body>

1.2 jQuery简单例子

jQuery公式：

$(selector).action()

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/jquery-3.6.0.min.js"></script>
</head>
<body>

<a href="" id="test-jquery">点一点</a>

<script>
    $('#test-jquery').click(function () {
        alert('hello jquery');
    })
</script>

</body>
</html>

2、选择器

JavaScript中原生js语句

elementById2 = document.getElementById("div1");						//id选择器
elementsByClassName = document.getElementsByClassName('ppp');		//类名选择器
elementsByTagName = document.getElementsByTagName('p');				//标签名选择器

jQuery中选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/jquery-3.6.0.min.js"></script>
</head>
<body>

<a href="" id="test-jquery" class="a_class">点一点</a>

<script>
    
    let elementById2 = document.getElementById("div1");
        elementsByClassName = document.getElementsByClassName('ppp');
        elementsByTagName = document.getElementsByTagName('p');

    $('a').click();                     //标签选择器
    $('#test-jquery').click();          //id选择器
    $('.a_class').click();              //类选择器
    
</script>

</body>
</html>

文档工具站：

jQuery工具站

3、事件

举两个操作事件的例子

3.1 移动鼠标

实现了实时监测鼠标的坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
  <script src="lib/jquery-3.6.0.min.js"></script>
  <style>
    #divMove{
      width: 500px;
      height: 500px;
      border: 1px solid red;
    }
  </style>
</head>
<body>

mouse: <span id="mouseMove"></span>
<div id="divMove">
  在这里移动鼠标试试
</div>

<script>
  //当前网页元素加载完毕之后，响应事件
  $(function (){
    $('#divMove').mousemove(function (e) {
      $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
    })
  });
</script>

</body>
</html>

3.2 操作DOM

通过jQuery操作DOM改变标签颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="lib/jquery-3.6.0.min.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]').css({"color":"red","background":"blue"});
  $('#test-ul li[class = js]').css("color","red");
</script>
</body>
</html>

以上是jQuery基本内容，包括介绍，选择器和两个简单的事件，蟹蟹支持~~~

推荐该博主，部分内容摘自这里狂神说java