复制节点:clone();默认不会复制绑定事件,如果传入参数true会复制;
替换节点:

  • replaceWith()              //原节点放在前,新节点放在在后;
  • replaceAll()                 //反之;

原本绑定的事件和附加的数据也会消失;
包裹节点:

  • wrap(),wrapAll();       //如果被包裹的节点间还有其他元素,其他元素会被放到包裹元素之后;

包括选中节点的子孙节点:

  • wrapInner();            //原节点放在前,新节点放在在后;

样式操作:

  • 直接使用属性操作;
  • 使用addClass,removeClass//参数中多个class用空格分开;
  • 切换样式:toggleClass() //设置其他操作来引发;
  • 判断样式:hasClass('another')等价于is('.another') //必须要有参数否则返回false;

获取/设置一些值

  • html(); //相当于innerHTML
  • text(); //获取的话是包括子孙节点在内的所有文本节点;设置的话会覆盖掉设置元素节点的所有子孙节点
  • val(); 获取/设置value属性值

CSS-DOM操作

  • css('')     //获取; css('','')   //单个设置;css({'':'','':''})   //多个设置
  • height()/width();  //获取; height(100)/width(100)  //设置,默认单位为px;

元素定位:

  • offset();                              //获取当前视窗的相对偏移,其中返回的对象包含两个属性:left,top;
  • position();                           //获取相对偏移,其中返回的对象包含两个属性:left,top;
  • scrollTop(),scrollLeft();          //获取/设置元素滚动条距离顶端/左侧的距离;

执行时机:如图片操作

  • window.onlod方法需要等到所有图片都加载完毕之后;
  • $(document).ready()只要DOM就绪就可以操作;

当$()不带参数的时候,默认参数就是document;
事件绑定:bind();

  • 第一参数为事件类型blur,focus,load,unload,ckick,dbclick,mousedowm,mouseup,mouseover,mouseout,keydown,keypress,

submit,change,error,sekect等;

  • 第二参数可选,作为event.data属性值传递给事件对象的额外数据对象;
  • 第三参数为绑定的处理函数;

合成事件:

  • hover(enter,leave):模拟光标悬停事件;           //先执行mouseover,再执行mouseout;
  • toggle(fn1,fn2....):模拟鼠标连续点击事件;    //jquery1.9.0以后已经删除
  • toggle();                                                 //自动改变show()或hide();
  • toggleClass();                                         //自动增删当前class中的某个值;

事件

  • 停止事件冒泡: event.stopPropagation()        /return false;            //在当前执行函数执行之后事件就停止传递上去。
  • 阻止默认行为:event.preventDefault()          /return false;

JQ事件对象

  • 属性:type:事件类型;target:触发事件的元素;pageX/pageY:光标相对页面位置;
  • 方法:stopPropagation(),preventDefault();

unbind()//解除绑定事件,第一参数可选为事件类型,第二参数可选为执行函数;
one(type,function) //结构与bind()相同,绑定的事件执行函数只执行依次;
模拟操作:

  • 简化写法:如直接使用click(),focus();
  • 使用trigger();

允许参数:trigger(type,[data]) //第一个参数可以是自定义的事件类型;第二个参数将数据传入执行函数,注意执行函数第一个参数是event;
执行事件函数但阻止默认事件:triggerHandler();
bind的高级操作:

  • 一次性绑定多个事件类型,如配合toggleClass 。 bind('mouseover mouseout',function(){});
  • 添加事件命名空间,便于管理。bind('click.plugin',function(){});unbind('.plugin');

动画效果

  • 当给shoe(),hide()添加参数的时候,就有了渐变的动画效果;包括内容的高度,宽度,透明度的变化

参数:200 === 'fase'; 400 === 'normal'; 600 === 'slow';其他数字(毫秒);

  • 可以用toggle()简化show()和hide()方法;
  • 如果只想有改变透明度的效果,使用fadeIn,fadeOut,参数同上;
  • 可以用fadeToggle()简化fafrIn和fadeOut方法,参数同上;
  • 如果只想有改变高度的效果,使用slideUp,slideDown,参数同上;
  • 可以用slideToggle()简化slideUp和slideDowm,参数同上;

jquery概要--基础02的更多相关文章

  1. jquery概要--基础01

    jquery对象,DOM对象 var $cr = $('#cr');          var cr = $cr[0]; /var cr = $cr.get(0); var cr = document ...

  2. [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用

    [DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用   jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...

  3. javascript基础02

    javascript基础02 1.数据类型 数据类型的描述在上篇的扩展中有写到链接 由于ECMAScript数据类型具有动态性,因此的确没有再定义其他数据类型的必要.这句话很重要. 如果以后再数据类型 ...

  4. javaSE基础02

    javaSE基础02 一.javac命令和java命令做什么事情? javac:负责编译,当执行javac时,会启动java的编译程序,对指定扩展名的.java文件进行编译,生成了jvm可以识别的字节 ...

  5. jQuery 插件基础

    jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...

  6. java基础学习05(面向对象基础02)

    面向对象基础02 实现的目标 1.String类的使用2.掌握this关键字的使用3.掌握static关键字的使用4.了解内部类 String类 实例化String对象一个字符串就是一个String类 ...

  7. jquery插件开发基础入门

    jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...

  8. jQuery官方基础教程笔记(转载)

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

  9. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

随机推荐

  1. Linux/Ubuntu tree 命令以树形结构显示文件夹目录结构

    1.安装命令工具 sudo apt-get -y install tree 2.可以查看关于tree命令的帮助信息 $ tree --help usage: tree [-adfghilnpqrstu ...

  2. HDU 4857 逃生 (优先队列+反向拓扑)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4857 解题报告:有n个点,有m个条件限制,限制是像这样的,输入a  b,表示a必须排在b的前面,如果不 ...

  3. 安装 openSUSE Leap 42.1 之后要做的 8 件事

    导读 openSUSE Leap 确实是个巨大的飞跃,它允许用户运行一个和 SUSE Linux 企业版拥有同样基因的发行版.和其它系统一样,为了实现最佳的使用效果,在使用它之前需要做些优化设置. 下 ...

  4. [COJ0988]WZJ的数据结构(负十二)

    [COJ0988]WZJ的数据结构(负十二) 试题描述 输入 见题目,注意本题不能用文件输入输出 输出 见题目,注意本题不能用文件输入输出 输入示例 输出示例 数据规模及约定 1≤N≤1500,M≤N ...

  5. WPF 动画(形状、画刷)

    一:形状 在WPF用户界面中,可以通过形状(Shape)来绘制直线.椭圆.矩形及一些多边形的类.通过这些基本的图像,组合成为复杂的图形. Shape类中,主要的形状有Rectangle(),Ellip ...

  6. HLG2040二叉树遍历已知前中,求后

    二叉树的遍历 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 60(34 users) Total Accepted: 34(30 us ...

  7. failed to load session "ubuntu"

    https://answers.launchpad.net/ubuntu/+source/gnome-desktop/+question/211792

  8. The Perfect Stall (incomplete)

    恩,一看就知道是一道二分图最大匹配的题. 感动得发现自己不会做..果然我是太弱了.学校里真是麻烦死,根本没有时间好吗. (NOIP)会不会感动地滚粗啊? 然后稍微看看,恩,匈牙利算法. 真是感动得落泪 ...

  9. Resumable uploads over HTTP. Protocol specification

    Valery Kholodkov <valery@grid.net.ru>, 2010 1. Introduction This document describes applicatio ...

  10. 【Hibernate】Hibernate系列3之配置文件详解

    配置文件详解 3.1.配置文件 连接池性能优化:http://www.cnblogs.com/xdp-gacl/p/4002804.html