jQuery 是現代化的JavaScript 庫，它使得 JavaScript 編程更加高效和簡單，并且還能夠以更有準確度的方式來操作 HTML 文檔。本文將介紹使用 jQuery 鼠標選中區域內的方法。

$(document).ready(function(){
var isDragging = false;   // 判斷是否拖拽中
var startX, startY, endX, endY;   //記錄初始點和結束點
var $selectionBox = $('
').addClass('selection-box'); //創建選中框
$('body').append($selectionBox); //將選中框添加到 body 中
//鼠標按下事件，記錄起始點
$(document).on('mousedown', function(e) {
startX = e.pageX;
startY = e.pageY;
$selectionBox.css('left', startX + 'px').css('top', startY + 'px').show();
isDragging = true;
});
//鼠標移動事件，改變選中框的大小
$(document).on('mousemove', function(e) {
if (!isDragging) return;
endX = e.pageX;
endY = e.pageY;
var left = Math.min(endX, startX);
var top = Math.min(endY, startY);
var width = Math.abs(endX - startX);
var height = Math.abs(endY - startY);
$selectionBox.css('left', left + 'px').css('top', top + 'px')
.css('width', width + 'px').css('height', height + 'px');
});
//鼠標松開事件，隱藏選中框并獲取選中區域的內容
$(document).on('mouseup', function(e) {
isDragging = false;
$selectionBox.hide();
var $selected = getSelectedElements(startX, startY, endX, endY);
console.log($selected.text());
});
//獲取選中區域的內容
function getSelectedElements(x1, y1, x2, y2) {
var elements = [];
var $texts = $('p');
$texts.each(function(i, elem) { 
var $elem = $(elem);
var offset = $elem.offset();
var x = offset.left;
var y = offset.top;
var w = $elem.width();
var h = $elem.height();
if (x + w< x1 || x >x2 || y + h< y1 || y >y2) {
return; //剪枝優化
}
elements.push($elem);
});
return elements;
}
});

以上就是使用 jQuery 鼠標選中區域內的實現方法。通過創建選中框并實現鼠標按下、移動和松開事件，我們可以獲取選中區域的內容并操作。這是一種非常實用的功能，可以用于網頁抓取、文字高亮、復制粘貼等等場景，有助于提升用戶體驗和網站的交互效果。