$()下的常用方法

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. 609E- Minimum spanning tree for each edge

    Connected undirected weighted graph without self-loops and multiple edges is given. Graph contains n ...

  2. day63

    一.环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\nodejs) 可以通过node提 ...

  3. tomcat-在eclipse中配置tomcat容器的内存

    eclipse下的tomcat内存设置大小 在eclipse中设置: 设置步骤如下: 1.点击eclipse上的debug图标旁边的下拉箭头 2.然后选择Run Configurations, 3.系 ...

  4. 虚拟机上不能使用CUDA

    虚拟机的显卡是虚拟的,不能使用CUDA(至少很难),搞了一天才晃过神来: lspci 查找目前主机的硬件配备 用 grep -i 进行大小写无关的搜索

  5. Tomcat 动态数据库连接池

    package com.boguan.bte.util; import java.sql.Connection;import java.sql.SQLException;import java.uti ...

  6. [2016北京集训测试赛15]statement-[线段树+拆环]

    Description Solution 由于题目要求,将a[i]->b[i](边权为i)后所得的图应该是由森林和环套树组合而成. 假如是树形结构,所有的t[i]就直接在线段树t[i]点的dfs ...

  7. C语言学习之枚举类型

    前言 枚举(enum)类型是计算机编程语言中的一种数据类型.枚举类型:在实际问题中,有些变量的取值被限定在一个有限的范围内.例如,一个星期内只有七天,一年只有十二个月,一个班每周有六门课程等等.如果把 ...

  8. Java虚拟机笔记(五):JVM中对象的分代

    为什么要分代 为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代完全可以,分代的唯一理由就是优化GC性能.你先想想,如果没有分代,那我们所有的对象都在一块,GC的时候我们要找到哪些对象没用, ...

  9. pycharm最常用的快捷键总结

    工欲善其事必先利其器,Python开发利器Pycharm常用快捷键以及配置如下,相信有了这些快捷键,你的开发会事半功倍 一 常用快捷键 编辑类: Ctrl + D             复制选定的区 ...

  10. Join 和 Apply 用法全解

    在关系型数据库系统中,为了满足第三范式(3NF),需要将满足“传递依赖”的表分离成单独的表,通过Join 子句将相关表进行连接,Join子句共有三种类型:外连接,内连接,交叉连接:外连接分为:left ...