jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

jq选择器（jq 与 js 互相转换）

// 获取所有的页面元素jq对象
    $('css3选择器语法');
    var $box = $(".box:nth-child(1)");  获取的是jq对象数组

// 拿到指定的页面元素jq对象
    $('css3选择器语法').eq(index);
    var $box = $(".box").eq(1);      获取的是jq对象数组

// jq 转 js  （ jq对像就是由数组包裹的js对象 ）
    box1 = $box[0] 从数组里取出来
    box1 = $box.get(0) 从数组里取出来

// js 转 jq
    $box1 = $(box1);

 

jq操作css样式 / 文本内容

$(".box").eq(1).text("100")   // jq获取标签内容,修改标签内容
$(".box").eq(1).text("100").html("<b>xxx</b>")      // jq支持链式操作

$(".box").eq(1).css("color","red")     // 修改css样式操作
$(".box").eq(1).css("font-size","30px") 

$(".box").eq(1).css({    // 已字典的形式添加css样式
    color:"red",
    "font-size":"30px",
})

$(".box").eq(1).css("border-radius")   // jq能获取计算后样式

 

jq操作类名

addClass  |  removeClass

$(".box").eq(1).addClass("red")    // 添加类名
$(".box").eq(1).removeClass("red")    // 删除类名  jq链式操作

$(".box").eq(1).addClass("red").removeClass("red")   // jq链式操作

 

jq操作全局属性

$("img").attr("src","/img/1.js")；  // 设置属性

$("img").attr("src")；   // 查看全局属性
$("img").removeAttr("src")；   // 删除全局属性

jq获取盒子信息

$(".box").width();
$(".box").height();  宽高
$(".box").innerWidth();  内边距 + 宽高
$(".box").outerWidth();  边框 + 内边距 + 宽高
$(".box").outerWidth(true);  外边距 + 边框 + 内边距 + 宽高

 

位置信息 offset | 

// 相对窗口偏移: 算margin产生的距离
console.log($('.box').offset().top, $('.box').offset().left);

// 绝对定位偏移(top,left): 不算margin产生的距离
console.log($('.box').position().top, $('.box').position().left);