jQuery笔记(二)
$()下的常用方法
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);
})
jQuery笔记(二)的更多相关文章
- jQuery总结或者锋利的jQuery笔记二
第三章 jQuery 中 DOM 操作 , 进入这一章,你必须先要有 选择器的基础, 最好是基本选择器 (id,class,*,div,p 组合等) , 层次选择器(div ul),(div> ...
- jQuery笔记二——基础/动画
1. jQuery的基础语法: $(selector).action() 2. 很多jQuery的语句放在ready里面 $(document).ready(function(){ // jQuery ...
- JQuery笔记(二)jq常用方法animate()
在jq中,比较方便的是相对于js,jq封装了很多方法,很方便使用,下面我举几个常用的方法 animate()方法 <!DOCTYPE html> <html lang="e ...
- jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}
笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...
- 前端:jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...
- amazeui学习笔记二(进阶开发4)--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
- 转)delphi chrome cef3 控件学习笔记 (二)
(转)delphi chrome cef3 控件学习笔记 (二) https://blog.csdn.net/risesoft2012/article/details/51260832 原创 2016 ...
- 《CMake实践》笔记二:INSTALL/CMAKE_INSTALL_PREFIX
<CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
随机推荐
- ORB SLAM2在Ubuntu 16.04上的运行配置
http://www.mamicode.com/info-detail-1773781.html 安装依赖 安装OpenGL 1. 安装opengl Library$sudo apt-get inst ...
- WebAPI项目中使用SwaggerUI
1.创建webapi项目解决方案 2.引入Swagger组件 在项目引用中可以看到swagger的引用 3.webapi 项目右键属性->生成-> 勾选XML文档文件,然后将XML文件保存 ...
- [转]OPENCV3.3+CUDA9.0 环境搭建若干错误总结
编译OpenCV设计启用OpenGL三维可视化支持和启用GPU CUDA并行加速处理的基本知识: 1.从2.4.2版本开始,OpenCV在可视化窗口中支持OpenGL,这就意味着在OpenCV中可以轻 ...
- js阻止事件冒泡的两种方法
1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...
- 使用Android绘图技术绘制一个椭圆形,然后通过触摸事件让该椭圆形跟着手指移动
引言:在图形绘制中,控制一个图形(圆形,椭圆形,矩形,三角形)移动时,其实计算的都是该图形的中心点移动.在绘制过程中,首先计算出中心点,然后根据中心点的位置计算重图形的上下左右位置.我们假设图形左边为 ...
- Oracle substr() instr() 用法
转载:oracle中substr() instr() 用法 substr(字符串,截取开始位置,截取长度) = 返回截取的字符串instr(源字符串,目标字符串,起始字符串,匹配字符串) = 返回要截 ...
- nodejs开发调试时,使用supervisor
如果你有 PHP 开发经验,会习惯在修改 PHP 脚本后直接刷新浏览器以观察结果,而你在开发 Node.js 实现的 HTTP 应用时会发现,无论你修改了代码的哪一部份,都必须终止Node.js 再重 ...
- lucas定理的证明
http://baike.baidu.com/link?url=jJgkOWPSRMobN7Zk4kIrQAri8m0APxcxP9d-C6qSkIuembQekeRwUoEoBd6bwdidmoCR ...
- [Baltic 2011]Lamp BZOJ2346
分析: 建图最短路,比较裸. 我们可以考虑,如果是‘\’那么,左上连右下边权为0,左下连右上边权为1,反之亦然. 卡裸spfa,加点优化能过,我就直接改成的堆优化Dijkstra 附上代码: #inc ...
- mvn dependency:tree
jar依赖冲突解决实践 前言 随着功能的增多,各种中间件的引入.应用以来的各种jar的规模极具膨胀,出现jar冲突和Class冲突的问题层出不穷,让人不胜其扰.本文针对冲突,提供一个排查和定位问题的最 ...