jQuery基础知识小结
什么是jQuery
jQuery是一个Javascript库，它使HTML文档遍历、操作、事件处理和动画效果变得更加简单和方便。它具有跨平台兼容性，提供了丰富的API、易于使用的语法和强大的AJAX支持，是开发Web应用程序的重要工具之一。
引入jQuery
在使用jQuery之前，需要先引入jQuery库文件。可以在网页的头部添加下列代码：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
这是一个CDN地址，可以自行替换成其他CDN或者自己服务器上的路径。
jQuery基础语法
使用jQuery时，需要用到$()函数来选择需要操作的元素。$()函数接收一个选择器参数，它采用CSS选择器的语法，可以选择文档中的任何元素。
选择器
jQuery的选择器和CSS的选择器非常类似。例如，通过选择器来选中网页中的所有段落：
$(“p”)
选择器可以根据标签名、类名、ID等元素属性进行选择。比如通过类名选择：
$(“.class”)
通过ID选择：
$(“#id”)
还可以通过属性选择器来选择元素：
$("[name='name']")
操作元素
选中元素之后，可以进行多种操作。常用的有修改元素的样式、属性和内容。
样式操作
$(“p”).css(“color”,”red”);
这样就会把选择的所有段落的字体颜色变为红色。
属性操作
获取属性：
$(“a”).attr(“href”);
设置属性：
$(“a”).attr(“href”,”http://www.google.com”);
内容操作
获取元素内容：
$(“p”).text();
设置元素内容：
$(“#title”).text(“新标题”);
事件处理
使用jQuery可以很方便地处理事件，常用的事件有click、mouseover、mouseleave、keydown等。
$(“p”).click(function(){
alert(“点击了段落”);
});
当用户点击网页中的段落时，就会弹出一个对话框。
链式操作
在jQuery中，我们可以把多个操作合并为一个命令，从而实现连缀操作。比如：
$(“p”).css(“color”,”red”).attr(“title”,”段落标题”);
这样就能把所有段落的字体颜色设置为红色，同时给它们添加一个标题。
示例说明
示例1：动态修改网页上的内容和样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例1</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1 id="title">这是一个标题</h1>
<p class="p1">这是第一段</p>
<p class="p2">这是第二段</p>
<p class="p3">这是第三段</p>
<button>点击修改</button>
<script>
$("button").click(function(){
$("#title").text("新的标题");
$("p.p1").css("color","red");
$("p.p2").css("background-color","yellow");
$("p.p3").css({"color":"green","font-size":"24px"});
});
</script>
</body>
</html>
该示例中，我们选择了标题和三个段落，并使用了text()函数和css()函数修改了它们的内容和样式。当用户点击“点击修改“按钮时，网页上的内容和样式就会发生变化。
示例2：动态加载JSON数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例2</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="button" onclick="loadData()" value="加载数据">
<ul id="list"></ul>
<script>
function loadData(){
$.getJSON("data.json",function(data){
$.each(data,function(i,item){
var li =$('<li>').html(item.name+"："+item.age);
$('#list').append(li);
});
});
}
</script>
</body>
</html>
该示例中，我们使用了$getJSON()函数加载了一个JSON文件。当用户点击“加载数据”按钮时，它就会把文件中的数据动态加载到网页中。用到了each()函数遍历JSON数据，并创建HTML元素来显示数据。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery基础知识小结 - Python技术站
微信扫一扫 
支付宝扫一扫 