Java教程

JavaScript（五）jQuery（获取、选择器）

本文主要是介绍JavaScript（五）jQuery（获取、选择器），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaScript（五）jQuery（获取、选择器）

目录
  • JavaScript（五）jQuery（获取、选择器）
    • js和jQuery
    • 获取jQuery
    • 选择器
    • 事件
      • 鼠标事件
      • 鼠标实例
    • 操作DOM元素

js和jQuery

  • jQuery是一个库，里面存在大量的js函数

获取jQuery

  • 下载网址：Download jQuery | jQuery

  • 有编译好的（上面）和未编译版（下面），下载，用下面的就行

  • 点进去如果是一堆符号而不是下载的话没事，直接点击ctrl+s就可以了

  • 引入，直接复制粘贴过去

  • 使用jQuery

    公式：$(selector).action()

    • selector选择器(就是css选择器)，选择标签

      选择器就是css选择器（id是#，class是.）

    • action():事件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入jQuery-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="#" id="a1">点我</a>
<script>
    //document.getElementById("id");
    //使用a标签的click事件
    //选择器就是css选择器（id是#，class是.）
    $(a1).click(function () {
        alert("hello,jQuery");
    });
</script>
</body>
</html>

选择器

文档工具站：jQuery API 中文文档 

<script>
    //举例
    $("p").click();//标签选择器
    $("#a1").click();//id选择器
    $(".a2").click();//class类选择器
</script>

事件

  • 鼠标事件、键盘事件、其他事件
  • 鼠标事件

鼠标事件

<script>
    //鼠标事件
    $(".a1").mousedown();//鼠标按下
    $(".a1").mouseenter();//
    $(".a1").mouseleave();//鼠标离开
    $(".a1").mousemove();//鼠标移动
    $(".a1").mouseout();//
    $(".a1").mouseover();//点击结束
    $(".a1").mouseup();//
</script>

鼠标实例

  • 显示鼠标移动的位置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divMoves{
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMoves">
在这里移动鼠标试试
</div>
<script>
    //当网页元素加载完毕之后,响应事件
    $(document).ready(function () {
        $("#divMoves").mousemove(function (e) {
            $("#mouseMove").text("x:"+e.pageX+"y:"+e.pageY);//pageX为横坐标，pageY为纵坐标
        })
    });//$(document).ready(function (){})等同于$(function (){})
</script>
</body>
</html>

操作DOM元素

  • 节点文本操作
$("#ul1 li[name=py]").text("123");//重新设置值
$("#ul1 li[name=py]").text();//获得文本值
$("#ul1").html();//获得html值
$("#ul1").html("<strong>123</strong>");//设置值
  • css操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
    </style>
</head>
<body>
<ul id="ul1">
    <li class="js">JavaScript</li>
    <li name="py">Python</li>
</ul>
<script>
    $("#ul1 li[name=py]").css("color","red");//方式一
    $("#ul1 li[class=js]").css({"color":"blue"})//方式二
</script>
</body>
</html>
  • 元素的显示和隐藏
  $("#ul1 li[name=py]").show();//显示
  $("#ul1 li[class=js]").hide()//隐藏,相当于display=none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
    </style>
</head>
<body>
<ul id="ul1">
    <li class="js">JavaScript</li>
    <li name="py">Python</li>
</ul>
<script>
    $("#ul1 li[name=py]").show();//显示
    $("#ul1 li[class=js]").hide()//隐藏,相当于display=none
</script>
</body>
</html>
这篇关于JavaScript（五）jQuery（获取、选择器）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航