以下是关于“JQuery学习总结【二】”的完整攻略：
JQuery学习总结【二】：JQuery常用方法
概述
在本篇博客中，我们将学习 Jquery 中一些常用的方法，并且通过代码示例进行讲解。以下是本篇博客的主要内容：
1.选择器
2.事件委派
3.样式操作
4.属性操作
5.动画效果
6.Ajax请求
现在我们来逐一讲解这些内容。
选择器
选择器是 JQuery 中非常基础的一个功能。它允许您通过标签名称、类、id、属性或甚至可以自定义函数等方式来选择文档中的元素。例如，您可以使用 "$('p')" 来选择所有的段落元素，使用 "$('.classname')" 来选择所有 class 为 classname 的元素。
接下来，我们将通过一段代码来展示选择器的常规使用方式以及基本语法：
<!DOCTYPE html>
<html>
<head>
<title>JQuery选择器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div{
background-color: #eee;
margin:10px;
padding:10px;
}
.test{
color:red;
}
</style>
</head>
<body>
<h1>选择器</h1>
<p></p>
<div class="box">元素</div>
<div class="box">元素</div>
<div class="box">元素</div>
<div class="box">元素</div>
<div id="box">元素</div>
<div class="test">元素</div>
<div class="test">元素</div>
<script>
$('div').css('border','2px solid red');
$('div.box').css('background-color','blue');
$('div#box').css('background-color','red');
$('div.test').each(function(){
console.log($(this).text());
});
</script>
</body>
</html>
这段代码的主要功能是选择页面中的元素，例如选择所有的 div 标签并添加一个红色的边框，选择 class 为 box 的 div 标签并为背景色添加蓝色，选择 id 为 box 的 div 标签并为背景色添加红色，依次输出 class 为 test 的 div 标签的内容。可以看到，选择器非常的灵活，可以通过相关的CSS选择器非常方便快捷地实现元素的选取。
事件委派
事件委派又称事件代理，是 JQuery 中事件处理的一种重要方式。首先，我们可以考虑一个简单的例子，在下面的代码中，我们在包含三个按钮的 div 容器上绑定了一个点击事件，并且在每个按钮上也绑定了一个点击事件。
<!DOCTYPE html>
<html>
<head>
<title>JQuery事件委派</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div{
margin:10px;
padding:10px;
}
button{
display:block;
margin-top:10px;
}
</style>
</head>
<body>
<h1>事件委派</h1>
<div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</div>
<script>
$('button').click(function(){
console.log($(this).text());
});
$('div').click(function(event){
console.log(event.target);
if($(event.target).is('button')){
console.log($(event.target).text());
}
});
</script>
</body>
</html>
在这里，我们通过在 div 容器上绑定一个 click 事件，当事件触发时，会首先输出它所触发的对象（即整个 div），接下来会判断当前点击的是否为 button 标签，如果是，就会输出该按钮的文本内容。可以看到，这样的代码实现是比较繁琐的。而事实上，我们可以通过委派事件的形式来优化它。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>JQuery事件委派</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div{
margin:10px;
padding:10px;
}
button{
display:block;
margin-top:10px;
}
</style>
</head>
<body>
<h1>事件委派</h1>
<div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</div>
<script>
$('div').delegate('button','click',function(){
console.log($(this).text());
});
</script>
</body>
</html>
在这段代码中，我们并没有给按钮标签绑定事件，而是将事件绑定到了 div 标签上，并通过 delegate 方法来委托给按钮标签。这样我们就可以省略掉判断点击标签的过程，使代码更加简洁。需要注意的是，delegate 方法在最新的 JQuery 版本中已经被废弃，可以使用 on 代替。
样式操作
在 JQuery 中，对于元素的样式操作非常的方便，通过链式调用和 CSS() 方法，可以轻松地对元素的样式进行修改。例如：
<!DOCTYPE html>
<html>
<head>
<title>JQuery样式操作</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div{
margin:10px;
padding:10px;
background-color: #eee;
color: #333;
text-align: center;
}
</style>
</head>
<body>
<h1>样式操作</h1>
<div>测试样式操作</div>
<script>
$('div').css('background-color','red').css('color','#fff');
</script>
</body>
</html>
这段代码中，我们通过链式调用的方式，首先修改了 div 标签的背景色为红色，接着修改文本颜色为白色。需要注意的是，链式调用的方式要求每个方法都要返回一个 jQuery 对象，否则就会报错。
属性操作
属性操作是 JQuery 中非常常见的一种操作。它可以让我们方便地操作元素的 HTML 属性和 DOM 属性。例如，可以通过 attr() 方法来获取或设置元素的原生 HTML 属性，也可以通过 prop() 方法来获取或设置元素的 DOM 属性。
以下是一个关于属性操作的例子：
<!DOCTYPE html>
<html>
<head>
<title>JQuery属性操作</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>属性操作</h1>
<button data-test="123">按钮1</button>
<script>
$('button').click(function(){
console.log($(this).attr('data-test'));
console.log($(this).prop('disabled'));
$(this).prop('disabled',true);
console.log($(this).prop('disabled'));
});
</script>
</body>
</html>
在这个例子中，我们使用了 attr() 方法来获取按钮标签的 data-test 属性，并通过 prop() 方法来获取和设置按钮的 disabled 属性。在点击按钮之后，按钮会被禁用并输出它的 disabled 状态。
动画效果
JQuery 中内置了一些常见的动画效果，它们可以帮助我们实现一些复杂的动态交互效果。由于动画效果本质上是 CSS 过渡效果的封装，因此 Jquery 动画效果的写法和 CSS 过渡效果的写法非常相似，只需要调用相应的方法并设置相应的参数即可。
以下是一个关于动画效果的例子，使用 animate() 方法来实现滑动效果：
<!DOCTYPE html>
<html>
<head>
<title>JQuery动画效果</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.box{
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
}
.move{
width: 100px;
height: 100px;
position:absolute;
background-color: #f00;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
display: none;
}
</style>
</head>
<body>
<h1>动画效果</h1>
<div class="box">
<div class="move"></div>
</div>
<button>滑出</button>
<script>
var moveStatus = false; // false表示隐藏，true表示显示
function move(){
var left = moveStatus ? '-=100px' : '+=100px'; // 判断方向
$('.move').stop().animate({
left: left
},500);
moveStatus = !moveStatus;
$('button').text(moveStatus ? '滑回' : '滑出');
}
$('button').click(move);
</script>
</body>
</html>
在这段代码中，我们使用了 animate() 方法来实现了一个简单的滑动效果。首先，我们定义了一个 box 容器和一个 move 方块，通过 position 和 overflow 设置容器的隐藏及定位。在点击按钮后，move 方块会以 500ms 的速度从左侧或右侧滑动进或出 box 容器。需要注意的是，在 jQuery 中动画效果一般需要通过 stop() 方法来停止当前正在执行的动画。
Ajax请求
Ajax 是 JQuery 的一个内置功能，它可以通过异步方式向服务器发送请求并获取数据。使用 Ajax，我们可以以异步的方式从服务器加载数据，并在不刷新整个页面的情况下更新页面内容。一下是一个关于 Ajax 请求的例子，通过 $.get() 方法向百度搜索页面发送请求并打印响应内容：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Ajax请求</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>Ajax请求</h1>
<script>
$.get('https://www.baidu.com/',function(data){
console.log(data);
});
</script>
</body>
</html>
这是一个非常简单的例子，我们只是通过 $.get() 方法向百度搜索页面发送请求，并在成功后通过回调函数输出响应的内容。需要注意的是，由于浏览器的同源策略，我们只能通过 Ajax 请求与同一服务器发送请求。如果需要向其他服务器发送请求，就需要使用 JSONP 或跨域请求等技术进行处理。
到此为止，本篇博客就结束了，希望大家有所收获。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery学习总结【二】 - Python技术站
微信扫一扫 
支付宝扫一扫 