JS学习笔记-JQuery

最新推荐文章于 2023-01-21 15:30:52 发布

原创最新推荐文章于 2023-01-21 15:30:52 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #js

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍JQuery库的基础使用方法，包括如何通过CDN引入JQuery、使用选择器选取DOM元素、响应各种事件以及操作DOM元素等。同时提供了一些示例代码帮助理解。

JS学习笔记-JQuery

JQuery库，里面存在着大量的JavaScript函数

获取JQuery

<!--cdn引入-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>

公式

$(selector).action()
//选择器就是CSS的选择器

<a href="" id="cli">点击此处</a>
<script>
	$("#cli").click(function(){
       alert('hello'); 
    });
</script>

选择器

//原生js选择器少，麻烦
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();

//JQuery  CSS中的选择器它全部能用
$("p").click();		//标签选择器
$("#id1").click();	//id选择器
$(".class1").click();	//类选择器
//......

文档工具站：http://jquery.cuishifeng.cn/

事件

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.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>
    // 当前网页元素加载完毕之后响应事件
    $(document).ready(function () {
        $("#divMove").mousemove(function (e) {
            $("#mouseMove").text('x:' + e.pageX + 'y:' + e.pageY);
        })
    })
</script>
</body>

操作DOM元素

节点文本操作

<ul id="test_ul">
    <li class="js">JavaScript</li>
    <li name="python">python</li>
</ul>
<script>
    $("#test_ul li[name=python]").text();	// 获得值
    $("#test_ul li[name=python]").text('xxxx');		// 设置值
    $("#test_ul").html();	// 获得值
    $("#test_ul").html('<strong>hi</strong>');	// 设置值
</script>

CSS操作

$("#test_ul li[name=python]").css("color","red");	//单个
$("#test_ul li[name=python]").css({"color","red","font-size","14px"});	//多个

元素的显示和隐藏：本质 display: none

$("#test_ul li[name=python]").show();	//显示
$("#test_ul li[name=python]").hide();	//隐藏