jQuery的基本使用和事件方法

jQuery的目的是简化HTML文档遍历、操作DOM、处理事件、执行动画和开发Ajax等JavaScript操作。

1、jQuery的引用网址：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

2、选择元素

使用$()函数选择HTML元素，例如：

var idDiv = $('#bt_button');  // 选择id为bt_button的元素  
var classDiv = $('.myDiv');  // 选择class为myDiv的元素
var div = $('div');  // 选择所有的div元素
var firstDiv = $('div:first');  // 选择第一个div元素  
var lastDiv = $('div:last');  // 选择最后一个div元素  

3、操作元素

$('div').css('color', 'red');              // 添加样式  
$('div').append('<p>Hello World!</p>');    // 添加内容  
$('div').remove();                         // 删除元素  
$("#info").text("isbn已存在");             //给id为info的标签添加内容

4、ajax请求

$.ajax({  
    url: '/bookstore/user/query',       //请求路径 
    type: 'POST',                       //请求方式
    data: data,                        //发送的数据
    success: function(res) {            //res，请求成功时返回的数据
        console.log('Response:', res);  
    },  
    error: function(xhr, status, error) {  
        console.log('Error:', error);  
    }  
});

5、事件处理

绑定一个点击事件

//第一种写法
$('#bt_button').on('click', function() {  
    alert('这是一个点击事件!');  
});
//第二种写法
$("#bt_test2").click(function () {
    alert("这是一个点击事件");
});

其他常用的事件

//.click(): 用于处理点击事件，当用户点击元素时触发事件处理程序。
$("#myButton").click(function() {  
  // 处理点击事件  
});

//.focus(): 用于处理元素获取焦点事件，当元素获得焦点时触发事件处理程序。
$("#myInput").focus(function() {  
  // 处理元素获取焦点事件  
});
//.blur():当元素失去焦点时触发事件。
//.dblclick(): 用于处理双击事件，当用户双击元素时触发事件处理程序。
//.hover(): 用于处理鼠标悬停事件，当用户将鼠标指针悬停在元素上时触发事件处理程序。
//.keypress(): 用于处理键盘按键事件，当用户在元素上按下键盘时触发事件处理程序。