jquery基础用法

Posted 2020-11-15 jianxin1994

什么是jquery对象？

jquery对象是原生DOM对象的封装

jquery对象和原生DOM对象不同

jquery对象包含了很多方法，方便的操作DOM元素

就如js可以对DOM对象进行操作一样，jquery可以对jquery对象进行操作，如果我们要调用jquery的方法，那我们就要使用jquery对象来进行调用。

 // 获取幻灯片宽度与幻灯片右外边距
let itemWidth = $(".jx-slider-item")[0].offsetWidth;
 // 这里的坑：何时使用$()[0]?何时使用$()?
 // 需要对DOM进行操作时需要将jquery对象拆封为DOM对象，对JQuery对象可以直接操作时这不需拆封。
let itemMarginRight = parseInt($(".jx-slider-item").css("marginRight"));

获取jquery对象（将DOM封装为jquery对象）

$(domObject)

 jquery对象转DOM对象（将jquery对象拆封为DOM对象）

方式1：

$(domObject).get(0);

 方式2：

$(domObject)[0];

 链式语法

传统的使用方式每次调用时都要先进行查询，性能低。

$(‘#divTest‘).text(‘Hello,World‘);
$(‘#divTest‘).removeClass(‘blue‘);
$(‘#divTest‘).addClass(‘bold‘);
$(‘#divTest‘).css(‘color‘,‘red‘);

 使用链式语法后，只需查询一次，性能高

$(‘#divTest‘)
    .text(‘Hello,World‘)
    .removeClass(‘blue‘)
    .addClass(‘bold‘)
    .css(‘color‘,‘red‘)