css jquery
CSS 与 jQuery 的基础用法
CSS（层叠样式表）用于控制网页的样式和布局，而 jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。
CSS 基础语法
CSS 规则由选择器和声明块组成：
selector {
property: value;
}例如：
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
}jQuery 基础语法
jQuery 通常以 $ 符号开头，基本语法为：
$(selector).action();例如：
$("button").click(function() {
$("p").hide();
});使用 jQuery 操作 CSS
jQuery 可以动态修改元素的 CSS 属性：
// 修改单个 CSS 属性
$("#element").css("color", "red");
// 修改多个 CSS 属性
$("#element").css({
"color": "red",
"font-size": "20px",
"background-color": "#eee"
});添加和移除 CSS 类
通过 jQuery 可以方便地添加或移除 CSS 类：
// 添加类
$("#element").addClass("highlight");
// 移除类
$("#element").removeClass("highlight");
// 切换类
$("#element").toggleClass("highlight");动画效果
jQuery 提供了简单的动画方法：
// 隐藏元素
$("#element").hide();
// 显示元素
$("#element").show();
// 淡入淡出
$("#element").fadeIn();
$("#element").fadeOut();
// 滑动效果
$("#element").slideUp();
$("#element").slideDown();事件处理
jQuery 简化了事件处理：
// 点击事件
$("#button").click(function() {
alert("Button clicked!");
});
// 鼠标悬停
$("#element").hover(
function() {
$(this).css("background-color", "yellow");
},
function() {
$(this).css("background-color", "white");
}
);Ajax 请求
jQuery 提供了简洁的 Ajax 方法：
$.ajax({
url: "example.php",
type: "GET",
data: {name: "John", age: 30},
success: function(response) {
$("#result").html(response);
},
error: function(xhr, status, error) {
console.error(error);
}
});响应式设计
结合 CSS 媒体查询和 jQuery 可以创建响应式设计：
@media (max-width: 768px) {
.menu {
display: none;
}
}$(window).resize(function() {
if ($(window).width() < 768) {
$(".menu").hide();
} else {
$(".menu").show();
}
});性能优化建议
避免频繁操作 DOM，缓存 jQuery 选择器：
// 不好的做法
for (var i = 0; i < 100; i++) {
$(".item").css("color", "red");
}
// 好的做法
var $items = $(".item");
for (var i = 0; i < 100; i++) {
$items.css("color", "red");
}使用事件委托提高性能：
// 不好的做法
$("li").click(function() {
// 处理点击
});
// 好的做法
$("ul").on("click", "li", function() {
// 处理点击
});
