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]& ...
随机推荐
- 609E- Minimum spanning tree for each edge
Connected undirected weighted graph without self-loops and multiple edges is given. Graph contains n ...
- day63
一.环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\nodejs) 可以通过node提 ...
- tomcat-在eclipse中配置tomcat容器的内存
eclipse下的tomcat内存设置大小 在eclipse中设置: 设置步骤如下: 1.点击eclipse上的debug图标旁边的下拉箭头 2.然后选择Run Configurations, 3.系 ...
- 虚拟机上不能使用CUDA
虚拟机的显卡是虚拟的,不能使用CUDA(至少很难),搞了一天才晃过神来: lspci 查找目前主机的硬件配备 用 grep -i 进行大小写无关的搜索
- Tomcat 动态数据库连接池
package com.boguan.bte.util; import java.sql.Connection;import java.sql.SQLException;import java.uti ...
- [2016北京集训测试赛15]statement-[线段树+拆环]
Description Solution 由于题目要求,将a[i]->b[i](边权为i)后所得的图应该是由森林和环套树组合而成. 假如是树形结构,所有的t[i]就直接在线段树t[i]点的dfs ...
- C语言学习之枚举类型
前言 枚举(enum)类型是计算机编程语言中的一种数据类型.枚举类型:在实际问题中,有些变量的取值被限定在一个有限的范围内.例如,一个星期内只有七天,一年只有十二个月,一个班每周有六门课程等等.如果把 ...
- Java虚拟机笔记(五):JVM中对象的分代
为什么要分代 为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代完全可以,分代的唯一理由就是优化GC性能.你先想想,如果没有分代,那我们所有的对象都在一块,GC的时候我们要找到哪些对象没用, ...
- pycharm最常用的快捷键总结
工欲善其事必先利其器,Python开发利器Pycharm常用快捷键以及配置如下,相信有了这些快捷键,你的开发会事半功倍 一 常用快捷键 编辑类: Ctrl + D 复制选定的区 ...
- Join 和 Apply 用法全解
在关系型数据库系统中,为了满足第三范式(3NF),需要将满足“传递依赖”的表分离成单独的表,通过Join 子句将相关表进行连接,Join子句共有三种类型:外连接,内连接,交叉连接:外连接分为:left ...