jQuery框架使用，jq选择器，jq操作页面内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息，js/jq页面加载完毕事件，jq事件

Posted 2021-02-05 路漫漫其修远兮，吾将上下而求索……

jq选择器

// 获取所有的页面元素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操作元素对象

jq操作页面内容

$(".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);

 

js/jq页面加载完毕事件

jq页面加载完毕事件
    $(document).ready(function () {
        console.log(‘xxx‘)
    })

    一般写成：
    $(function(){
        console.log(‘xxx‘)
    }) 简写,可以保证页面加载完毕,还能保证jq局部变量


js页面加载完毕事件
    window.onload = function () {}

 

jq事件

// 方法一（推荐）
$(‘.box‘).on( "click",function() {} )
$(‘.box‘).on( "click",function(ev) {
    ev.data.aaa   // 跟js事件对象一样
})

// 方法二
$(".box".click( function() {}) )


// 右键事件，取消系统默认事件
$(‘.sup‘).on(‘contextmenu‘ , function(ev) {
    ev.preventDefault();   //取消事件
    或者 return false;  // 取消事件
})


// 事件冒泡：子父级拥有同样事件，子响应事件会传播到父级
// 子集点击事件：

$(‘.sup‘).on(‘contextmenu‘ , function(ev) {
    ev.stopPropagation();  // 阻止子集事件冒泡
})