jQuery是一个非常流行的JavaScript库,旨在简化HTML文档的操作、事件处理、动画效果和Ajax交互。以下是jQuery课程的总结和重要代码:
一、总结
1. jQuery选择器:用于选择DOM元素,可以通过ID、类、标签名等多种方式选取。
2. jQuery事件处理:可以在选定的DOM元素上添加事件监听器,如点击事件、鼠标滚动事件、键盘事件等。
3. jQuery操作DOM:可以通过jQuery改变DOM元素的内容、属性、样式等。
4. jQuery效果:可以为DOM元素添加动画效果,如淡入淡出、滑动、放缩等。
5. jQuery Ajax:可以使用jQuery发送Ajax请求,获取服务器数据并将其显示在页面上。
6. jQuery Json:是一种常见的数据格式,它表示对象和数组的结构,可以很容易地与其他编程语言交换数据。
7.jQuery可以轻松地扩展和定制。
二、重要代码
1. 选择器:
//通过ID选择元素
$("#myId")
//通过类选择元素
$(".myClass")
//通过标签名选择元素
$("div")
//组合多种选择器
$("div.myClass")
2. 事件处理:
//添加点击事件
$("#myButton").click(function(){
console.log("Button clicked!");
});
//添加鼠标移入事件
$("#myDiv").mouseover(function(){
console.log("Mouse over myDiv!");
});
//添加键盘事件
$(document).keypress(function(event){
console.log("Key pressed: " + event.which);
});
3. 操作DOM:
//设置文本内容
$("#myDiv").text("new text");
//设置HTML内容
$("#myDiv").html("<p>new paragraph</p>");
//设置样式
$("#myDiv").css("color", "red");
//添加类
$("#myDiv").addClass("myClass");
//移除类
$("#myDiv").removeClass("myClass");
4. 效果:
//淡入
$("#myDiv").fadeIn();
//淡出
$("#myDiv").fadeOut();
//滑动
$("#myDiv").slideDown();
//放缩
$("#myDiv").animate({width:"500px", height:"500px"});
5. Ajax:
//发送GET请求获取JSON数据
$.get("myData.json", function(data){
console.log(data);
});
//发送POST请求提交表单数据
$.post("myForm.php", $("#myForm").serialize(), function(data){
console.log(data);
});
6.Json:
// 创建一个 JSON 对象
var obj = { name: "John", age: 30, city: "New York" };
// 将 JSON 对象转换成字符串
var jsonString = JSON.stringify(obj);
// 将字符串转换成 JSON 对象
var jsonObject = JSON.parse(jsonString);
// 发送一个包含 JSON 数据的 POST 请求
$.ajax({
url: "/api/users",
type: "POST",
data: JSON.stringify(obj),
contentType: "application/json",
success: function(result) {
console.log(result);
},
error: function(xhr, status, error) {
console.error(error);
}
});
// 从服务器获取 JSON 数据并在页面上显示
$.getJSON("/api/users", function(data) {
var html = "";
$.each(data, function(index, user) {
html += "<div>" + user.name + " (" + user.age + ")</div>";
});
$("#userList").html(html);
});