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);