$()下的常用方法

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笔记(二)的更多相关文章

  1. jQuery总结或者锋利的jQuery笔记二

    第三章  jQuery 中 DOM 操作 , 进入这一章,你必须先要有 选择器的基础, 最好是基本选择器 (id,class,*,div,p 组合等) ,  层次选择器(div ul),(div> ...

  2. jQuery笔记二——基础/动画

    1. jQuery的基础语法: $(selector).action() 2. 很多jQuery的语句放在ready里面 $(document).ready(function(){ // jQuery ...

  3. JQuery笔记(二)jq常用方法animate()

    在jq中,比较方便的是相对于js,jq封装了很多方法,很方便使用,下面我举几个常用的方法 animate()方法 <!DOCTYPE html> <html lang="e ...

  4. jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  5. 前端:jQuery笔记

    前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...

  6. Python全栈之jQuery笔记

    jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...

  7. amazeui学习笔记二(进阶开发4)--JavaScript规范Rules

    amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...

  8. 转)delphi chrome cef3 控件学习笔记 (二)

    (转)delphi chrome cef3 控件学习笔记 (二) https://blog.csdn.net/risesoft2012/article/details/51260832 原创 2016 ...

  9. 《CMake实践》笔记二:INSTALL/CMAKE_INSTALL_PREFIX

    <CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...

  10. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

随机推荐

  1. ORB SLAM2在Ubuntu 16.04上的运行配置

    http://www.mamicode.com/info-detail-1773781.html 安装依赖 安装OpenGL 1. 安装opengl Library$sudo apt-get inst ...

  2. WebAPI项目中使用SwaggerUI

    1.创建webapi项目解决方案 2.引入Swagger组件 在项目引用中可以看到swagger的引用 3.webapi 项目右键属性->生成-> 勾选XML文档文件,然后将XML文件保存 ...

  3. [转]OPENCV3.3+CUDA9.0 环境搭建若干错误总结

    编译OpenCV设计启用OpenGL三维可视化支持和启用GPU CUDA并行加速处理的基本知识: 1.从2.4.2版本开始,OpenCV在可视化窗口中支持OpenGL,这就意味着在OpenCV中可以轻 ...

  4. js阻止事件冒泡的两种方法

    1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

  5. 使用Android绘图技术绘制一个椭圆形,然后通过触摸事件让该椭圆形跟着手指移动

    引言:在图形绘制中,控制一个图形(圆形,椭圆形,矩形,三角形)移动时,其实计算的都是该图形的中心点移动.在绘制过程中,首先计算出中心点,然后根据中心点的位置计算重图形的上下左右位置.我们假设图形左边为 ...

  6. Oracle substr() instr() 用法

    转载:oracle中substr() instr() 用法 substr(字符串,截取开始位置,截取长度) = 返回截取的字符串instr(源字符串,目标字符串,起始字符串,匹配字符串) = 返回要截 ...

  7. nodejs开发调试时,使用supervisor

    如果你有 PHP 开发经验,会习惯在修改 PHP 脚本后直接刷新浏览器以观察结果,而你在开发 Node.js 实现的 HTTP 应用时会发现,无论你修改了代码的哪一部份,都必须终止Node.js 再重 ...

  8. lucas定理的证明

    http://baike.baidu.com/link?url=jJgkOWPSRMobN7Zk4kIrQAri8m0APxcxP9d-C6qSkIuembQekeRwUoEoBd6bwdidmoCR ...

  9. [Baltic 2011]Lamp BZOJ2346

    分析: 建图最短路,比较裸. 我们可以考虑,如果是‘\’那么,左上连右下边权为0,左下连右上边权为1,反之亦然. 卡裸spfa,加点优化能过,我就直接改成的堆优化Dijkstra 附上代码: #inc ...

  10. mvn dependency:tree

    jar依赖冲突解决实践 前言 随着功能的增多,各种中间件的引入.应用以来的各种jar的规模极具膨胀,出现jar冲突和Class冲突的问题层出不穷,让人不胜其扰.本文针对冲突,提供一个排查和定位问题的最 ...