第四章 前端开发基础jQuery

第四章 事件与动画

1. 事件处理

// 绑定点击事件
$("#btn").click(function() {
    alert("按钮被点击了！");
});
 
// 触发自定义事件
$("#myDiv").trigger("myCustomEvent");
 
// 绑定多个事件
$("#myDiv").on({
    mouseenter: function() {
        $(this).css("background-color", "yellow");
    },
    mouseleave: function() {
        $(this).css("background-color", "");
    },
    click: function() {
        $(this).css("background-color", "green");
    }
});

2. 动画

// 淡入淡出效果
$("#myDiv").fadeIn();
$("#myDiv").fadeOut();
$("#myDiv").fadeToggle();
 
// 滑入滑出效果
$("#myDiv").slideDown();
$("#myDiv").slideUp();
$("#myDiv").slideToggle();
 
// 自定义动画
$("#myDiv").animate({
    width: "200px",
    height: "100px",
    opacity: 0.5
}, 1000);
 
// 停止动画
$("#myDiv").stop();

3. 链式调用

// 链式调用
$("#myDiv")
    .slideDown()
    .fadeIn()
    .animate({ width: "200px" })
    .fadeOut();

4. 事件委托

// 事件委托
$("#myTable").on("click", ".clickableRow", function() {
    $(this).toggleClass("selected");
});

第五章 AJAX和JSON

1. AJAX请求

// 使用$.ajax发送GET请求
$.ajax({
    url: "get-data.php",
    type: "GET",
    data: { id: 1 },
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});
 
// 使用$.ajax发送POST请求
$.ajax({
    url: "post-data.php",
    type: "POST",
    data: { name: "John", age: 30 },
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});

2. 使用JSONP处理跨域请求

// 使用JSONP获取远程数据
$.ajax({
    url: "http://example.com/api/data?callback=?",
    dataType: "jsonp",
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});

3. 使用JSON

// 解析JSON字符串
var jsonData = '{"name":"John", "age":30}';
var obj = JSON.parse(jsonData);
console.log(obj.name);
 
// 序列化JavaScript对象为JSON字符串
var jsObj = { name: "Jane", age: 25 };
var jsonString = JSON.stringify(jsObj);
console.log(jsonString);

第六章 jQuery插件开发

1. 创建简单的jQuery插件