Java教程

JavaScript课程——Day21(jQuery下class操作、css操作、元素宽高、元素的位置、滚动条、创建.添加.替换.删除.克隆节点、事件、滑上事件的区别)

本文主要是介绍JavaScript课程——Day21(jQuery下class操作、css操作、元素宽高、元素的位置、滚动条、创建.添加.替换.删除.克隆节点、事件、滑上事件的区别),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1、class操作

  • jQuery对象.addClass('class名');  添加,一次可以添加多个
  • jQuery对象.removeClass('class名');  删除,一次可以删除多个
  • jQuery对象.toggleClass('class名');  切换,如果有这个class名,则删除;没有则添加
  • jQuery对象.hasClass('class名');  查找,是否有这个class名,返回布尔值
$('#box').addClass('def aaa eee');
$('#box').removeClass('abc aaa eee');
$('#box').toggleClass('a123');

console.log($('#box').hasClass('a123'));

 

2、css操作

  • jQuery对象.css('样式属性', '值');  设置
  • jQuery对象.css('样式属性');  获取
  • jQuery对象.css({'样式属性1':'值1','样式属性2':'值2','样式属性2':'值2',.....});  参数为对象,可以一次设置多个

  注意:

  1、如果是数字,将会自动转化为像素值。

  2、在css方法中,如果属性中带有‘-’符号,例如font-size和background-color属性,如果在设置这些值时,不带引号,那么就要用驼峰式写法。如果带上引号,可以写成font-size也可以写成fontSize。加上引号是良好的习惯。

 

3、元素宽高

var box = $('#box');

// jquery比原生强大体现在还可以获取隐藏元素的宽高
// 返回值没有单位

// 获取
console.log(box.width()); // 100 width
console.log(box.innerWidth()); // 120 width+padding
console.log(box.outerWidth()); // 122 width+padding+border
console.log(box.outerWidth(true)); // 142 width+padding+border+margin

// 设置
box.width(200);
box.innerWidth(200);
box.outerWidth(200);
box.outerWidth(200, true);

// --------------------------------
// 可视区的宽高
alert($(window).width());
alert($(window).height());

// 文档的宽高
alert($(document).width());
alert($(document).height());

 

4、元素的位置

  • jQuery对象.offset();

  返回的是一个对象{left:xx, top:xx}

  返回元素到文档的距离,与原生封装的getPos等同

var o = $('.box3').offset();
console.log(o);
console.log(o.left);
console.log(o.top);

 

5、滚动条

  • 获取滚动条
    • jQuery对象.scrollTop();
    • jQuery对象.scrollLeft();
  • 设置滚动条
    • jQuery对象.scrollTop(值);
    • jQuery对象.scrollLeft(值);
// 滚动事件
$(window).scroll(function () {
    var top = $(window).scrollTop(); // 获取滚动条的高度
    console.log(top);
});

// 点击设置滚动条的位置
$(document).click(function () {
    $(window).scrollTop(500); // 设置高度
});

 

6、创建节点

  • $(html片段);
$('<p>').appendTo('body'); // 创建空的p标签
$('<p></p>').appendTo('body'); // 创建空的p标签
$('<p>hello</p>').appendTo('body'); // 创建有内容p标签
$('<p id="box" class="abc" title="小张吃不饱">hello</p>').appendTo('body'); // 创建有内容,有属性的p标签

 

7、添加节点

  7.1、将元素插入目标中,作为子元素,放在最后

  • 元素.appendTo(目标);
  • 目标.append(元素);

  7.2、将元素插入目标中,作为子元素,放在最前

  • 元素.prependTo(目标);
  • 目标.prepend(元素);

  7.3、将元素插入到目标元素的后面,作为兄弟元素

  • 元素.insertAfter(目标);
  • 目标.after(元素);

  7.4、将元素插入到元素目标的前面,作为兄弟元素

  • 元素.insertBefore(目标);
  • 目标.before(元素);

 

8、替换节点

  • 被替换的元素.replaceWith(新的替换的元素);
  • 新的替换的元素.replaceAll(被替换的元素);

 

9、删除节点

  • jQuery对象.remove();  返回被删除的元素的引用,不保留之前的事件
  • jQuery对象.detach();  返回被删除的元素的引用,保留之前的事件
  • jQuery对象.empty();  严格来讲它不是删除元素,而是清空元素
<button>remove</button>
<button>detach</button>
<button>empty</button>
<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>
var btn = $('button');
var ul = $('ul');

// 1、给ul绑定一个事件
ul.click(function () {
    console.log(123);
});

// remove
btn.eq(0).click(function () {
    var v = ul.remove();
    setTimeout(function () {
        v.appendTo('body');
    }, 3000);
});

// detach
btn.eq(1).click(function () {
    var v = ul.detach();
    setTimeout(function () {
        v.appendTo('body');
    }, 3000);
});

// empty
btn.eq(2).click(function () {
    ul.empty(); // 推荐使用
    // ul.html('');
});

 

10、克隆节点

  • jQuery对象.clone(true);  参数true可以克隆之前的事件
var btn = $('button');
var ul = $('ul');

ul.click(function () {
    console.log(123);
});

btn.click(function () {
    // ul.clone().appendTo('body');
    ul.clone(true).appendTo('body');
});

 

11、事件

  11.1、事件对象

$('#box').click(function (ev) {
    console.log(ev); // jQuery封装过以后的事件对象
    console.log(ev.originalEvent); // 返回原生的事件对象

    console.log(ev.clientX, ev.clientY); // 到可视区的距离
    console.log(ev.pageX, ev.pageY); // 到文档的距离

    console.log(ev.which); // 相当于 keyCode,但比 keyCode 强大,还可以记录鼠标的键值,返回 1\2\3 即左\中\右;
    console.log(ev.target); // 事件源
    console.log(ev.delegateTarget); // 事件绑定的对象
    console.log(ev.type); // 事件类型

    console.log(ev.altKey); // alt键是否按下
    console.log(ev.ctrlKey);
    console.log(ev.shiftKey);

    ev.preventDefault(); // 阻止默认事件
    ev.stopPropagation(); // 阻止冒泡的操作
    return false; // 阻止默认事件 + 阻止冒泡的操作
});

 

  11.2、事件的绑定

  • 格式:$(selector).on(event, callback);
// 基本效果
$('#box').on('click', function () {
    console.log(this);
    console.log('点击我了');
})

// 一次绑定多个事件
$('#box').on('mouseover mouseout click', function (ev) {
    console.log(ev.type);
})

// 写成对象的形式
$('#box').on({
    mouseover: function () {
        console.log('滑上了');
    },
    mouseout: function () {
        console.log('滑离了');
    },
    click: function () {
        console.log('点击了');
    }
})

// 绑定自定义事件,必须使用trigger调用
$('#box').on('abc', function () {
    console.log('abc执行了');
});
$('#box').trigger('abc');

 

  11.3、事件的取消

  • 格式:(selector).off(event);  没有参数,取消该元素上所绑定的全部事件
$('#box').on({
    mouseover: function () {
        console.log('滑上了');
    },
    mouseout: function () {
        console.log('滑离了');
    },
    click: function () {
        console.log('点击了');
    }
})

// $('#box').off(); // 取消所有的事件
// $('#box').off('click'); // 取消click事件
$('#box').off('click mouseover'); // 取消click和mouseover事件

 

  11.4、事件的命名空间

// 事件的命名空间
$('#box').on('click.a', function () {
    console.log('a');
})

$('#box').on('click.b', function () {
    console.log('b');
})

// 需求:取消打印a的事件绑定
$('#box').off('click.a');
// $('#box').off('.a');

 

  11.5、事件代理

  • jQuery对象.on('事件名', '子孙节点', 函数);
$('ul').on('click', 'li.abc', function (ev) {
    // console.log(this); // this是触发的子孙节点

    console.log(ev.target); // 事件源
    console.log(ev.delegateTarget); // 事件绑定的对象
    $(this).css('background', 'red');
})

 

  11.6、一次性事件

  • jQuery对象.one('事件名', 函数);
$('#box').one('click', function () {
    console.log('点我了');
})

 

  11.7、合成事件

  • jQuery对象.hover(滑上执行的函数, 滑离执行的函数);

  hover采用的是onmouseenter 和 onm ouseleave

$('#box').hover(function () {
    // 滑上执行
    $(this).css('background', 'green');
    $(this).html('滑上了');
}, function () {
    // 滑离执行
    $(this).css('background', 'red');
    $(this).html('');
});

 

12、滑上事件的区别

<div id="box">
    <span></span>
</div>
<script>
    var box = document.getElementById('box');
    var n = 0;

    // 会冒泡
    box.onmouseover = function () {
        n++;
        console.log(n);
    }

    // 不冒泡
    box.onmouseenter = function () {
        n++;
        console.log(n);
    }
</script>
这篇关于JavaScript课程——Day21(jQuery下class操作、css操作、元素宽高、元素的位置、滚动条、创建.添加.替换.删除.克隆节点、事件、滑上事件的区别)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!