首页 > 编程语言> > JavaScript（五）jQuery（获取、选择器）

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

2022-02-27 10:01:55 作者：互联网

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

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

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>

标签：jQuery,JavaScript,鼠标,ul1,li,a1,选择器
来源： https://www.cnblogs.com/sxw0514/p/15941530.html