码迷,mamicode.com
首页 > Web开发 > 详细

jquery基础用法

时间:2019-10-02 18:39:13      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:asc   幻灯片   setw   slide   rem   class   div   调用   parse   

什么是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‘)

 

jquery基础用法

标签:asc   幻灯片   setw   slide   rem   class   div   调用   parse   

原文地址:https://www.cnblogs.com/JianXin1994/p/11617809.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!