JQuery是目前最流行的JavaScript库之一,它为开发者提供了许多便捷的API和函数,可以大幅度简化JavaScript代码的编写,提高开发效率。其中,JQuery核心函数是JQuery中最重要的函数之一,它通过一个统一的接口替代了JavaScript中复杂而且实现方式各不相同的DOM操作,使得开发者可以轻松地操控文档元素,并且减少了很多冗余代码。
JQuery核心函数
JQuery的核心函数是$()
,它的主要作用是把一个选择器字符串和上下文对象传入,然后返回一个JQuery对象。选择器可以是任何有效的CSS选择器,上下文对象则是一个DOM元素、一个表达式或者一个JQuery对象。下面我们来看一下一个例子:
// 找到ID为"myDiv"的元素
var myDiv = $("#myDiv");
这个例子中,我们把选择器字符串"#"和ID值传入JQuery函数,然后返回一个JQuery对象,该对象包含了我们想要操纵的DOM元素。我们可以通过该对象进行各种DOM操作,例如设置样式、添加事件监听、获取数据等等。
使用方法介绍
基本用法
基本用法就是根据选择器获取DOM元素,正如上面的例子一样。除了使用选择器以外,我们还可以传入DOM元素、文档对象、window对象或者表达式,来创建JQuery对象。例如:
// 获取html标签
var html = $("html");
// 获取当前页面中所有的<p>元素
var paragraphs = $("p");
// 获取id为"myDiv"的元素
var myDiv = document.getElementById("myDiv");
var myJQueryDiv = $(myDiv);
// 创建一个包含文档中所有<code>元素的JQuery对象
var codeElements = $('<code/>');
过滤器和链式调用
JQuery还提供了一些过滤器,我们可以用来过滤一组元素,例如":first"、":last"、":even"以及":odd"等。我们还可以使用链式调用的方式来操作JQuery对象,以减少代码的量。例如:
// 设置所有<h1>元素的字体大小为18px
$("h1").css("font-size", "18px");
// 选中第一个<p>元素,并设置其背景颜色为灰色
$("p:first").css("background-color", "gray");
// 找到所有类名为"box"的元素,并设置它们的前景色为白色
$(".box").css("color", "white");
示例1:通过JQuery选择器选中元素,修改样式
<html>
<head>
<!-- 引入JQuery库 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.selected {
background-color: yellow;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// 选中所有的<p>元素
$("p").click(function(){
$(this).addClass("selected");
});
});
</script>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
</body>
</html>
该示例通过JQuery选择器选中所有的<p>
元素,并且给它们添加了一个click事件,当单击某个<p>
元素时,就给它添加一个"selected"类名,从而改变它的背景颜色为黄色。
示例2:使用链式调用以及动画效果
<html>
<head>
<!-- 引入JQuery库 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
img {
position: absolute;
left: 0px;
top: 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// 将图片从左到右移动
$("img").css("opacity", 0.7).animate({left: '+=800px'}, 3000);
});
</script>
</head>
<body>
<img src="images/cat.jpg" width="200" height="200" alt="猫咪">
</body>
</html>
该示例中,我们通过链式调用的方式来设置了<img>
元素的透明度以及动画效果。在页面加载完成后,图片从左到右移动,移动的时间为3秒钟,完成后透明度变为0.7。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JQuery核心函数是什么及使用方法介绍 - Python技术站