jQuery笔记（二）
2024-10-20 08:55:43
$()下的常用方法
addClass()：添加样式
removeClass()：删除样式
$('div').addClass('box2 box4');
$('div').removeClass('box2 box4');
width():获取元素的宽
与css('width')的区别：width()获取时没有带单位。
alert($('div').width());
alert($('div').css('width'));
innerWidth()、outWidth()
alert($('div').innerWidth());//width+padding
alert($('div').outWidth());//width+padding+border
alert($('div').outWidth(true));//width+padding+border+margin
jQuery方法之DOM操作
$(function(){
$('span').insertBefore($('div'));//找到span，剪切放到div前面
$('div').insertAfter($('span'));//找到div，剪切放到span后面
$('div').appendTo($('span'));//appendTo=appendChlid,把div放在span里面的最后一个位置
$('div').prependTo($('span'));//把div放在span里面的第一个位置，把一个节点添加到指定节点的最开始位置
})
$(function(){
$('div').before($('span'));//span前面必须是div
$('div').after($('span'));//span后面必须是div
$('div').appendTo($('span'));//appendTo=appendChlid,把div放在span里面的最后一个位置
$('div').prependTo($('span'));//把div放在span里面的第一个位置，把一个节点添加到指定节点的最开始位置
})
before与insertBefore的区别：后续操作变了
$('div').before($('span')).css('background','red');//变红的是div
$('span').insertBefore($('div')).css('background','red');//变红的是span
$('div').remove();//删除div
事件的写法
$(function(){
$('div').click(function(){
alert(123);
});
})
或
$(function(){
$('div').on('click mouseover',function(){
alert(123);//可用于自定义事件,还可以同时写多个事件
})
})
鼠标点击弹123，鼠标移入弹456,Json写法:
$(function(){
$('div').on({
'click':function()
{
alert(123);
}
},{
'mouseover':function(){
alert(456);
}
})
})
取消事件，还可以针对不同的取消事件：
$(function(){
$('div').on('click mouseover',function(){
alert(123);
$('div').off('mouseover');//取消鼠标移入事件
})
})
$(function(){
$('div').on('click mouseover',function(){
alert(123);
$('div').off();//取消所有事件
})
})
获取滚动距离
$(function(){
$(document).click(function(){
alert($(window).scrollTop());
})
})
创建一个div
$(function(){
document.createElement('div');//原生的写法
var oDiv=$('<div>div</div>');
$('body').append(oDiv);
})
最新文章
- 居然是Firefox没有抛弃我们
- 提升mysql性能的建议
- GNU C 内联汇编介绍
- Windows Server 2003从入门到精通之Windows Media Server流媒体服务器架建[转]
- 获取网络状态ios（2G、3G、4G、Wifi）
- document.getElementById和document.querySelector的区别
- Redis3.0 Install
- epub3 in action: epub3文件格式简介
- OpenLayers 项目完整分析——（二）源代码总体结构分析
- spring security 3 自定义认证，授权示例
- jQuary学习の二の语法
- 【C++】GSL(GNU Scientific Library) 的安装及在 Visual Studio 2017 中的使用
- EF中打印出执行sql语句
- ORA-12154: TNS: 无法解析指定的连接标识符 问题
- [No0000115]打开Excel2016提示内存或磁盘空间不足的解决方法
- python模块（4）
- OHEM
- 使用DbUtils对JDBC封装实现面向实体查询
- FZU 2082（过路费）
- Python:笔记(7)——yield关键字