jquery页面
jQuery 页面操作指南
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 在页面中的常见用法。
引入 jQuery 库
在 HTML 文件中通过 <script> 标签引入 jQuery 库。可以从 CDN 加载或下载本地文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>选择元素
使用 jQuery 选择器获取 DOM 元素，语法与 CSS 选择器类似。
$('p') // 选择所有段落
$('#myId') // 选择 ID 为 myId 的元素
$('.myClass') // 选择类名为 myClass 的元素修改内容
通过 text() 或 html() 方法修改元素内容。
$('#myId').text('新文本内容') // 修改文本
$('#myId').html('<strong>加粗文本</strong>') // 修改 HTML事件处理
使用 on() 或简写方法（如 click()）绑定事件。
$('#myButton').click(function() {
alert('按钮被点击')
})样式操作
通过 css() 方法直接修改元素样式。
$('#myId').css('color', 'red') // 修改文字颜色
$('#myId').css({
'color': 'red',
'font-size': '20px'
}) // 批量修改样式动画效果
使用内置动画方法实现简单效果。
$('#myId').fadeOut() // 淡出
$('#myId').slideUp() // 向上滑动隐藏
$('#myId').animate({
opacity: 0.5,
left: '+=50'
}, 500) // 自定义动画Ajax 请求
通过 $.ajax() 或简写方法（如 $.get()）发送异步请求。
$.get('https://api.example.com/data', function(response) {
console.log(response)
})链式调用
jQuery 支持链式调用，多个操作可以连续执行。
$('#myId').css('color', 'red').slideUp().slideDown()注意事项
- 确保 DOM 加载完成后再执行 jQuery 代码，可以将代码放在
$(document).ready()中。 - 避免过度使用 jQuery，现代浏览器原生 API 已能实现许多功能。
- 注意选择器性能，过于复杂的选择器可能影响页面性能。
