jquery概要--基础02
复制节点: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的更多相关文章
- jquery概要--基础01
jquery对象,DOM对象 var $cr = $('#cr'); var cr = $cr[0]; /var cr = $cr.get(0); var cr = document ...
- [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用
[DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用 jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...
- javascript基础02
javascript基础02 1.数据类型 数据类型的描述在上篇的扩展中有写到链接 由于ECMAScript数据类型具有动态性,因此的确没有再定义其他数据类型的必要.这句话很重要. 如果以后再数据类型 ...
- javaSE基础02
javaSE基础02 一.javac命令和java命令做什么事情? javac:负责编译,当执行javac时,会启动java的编译程序,对指定扩展名的.java文件进行编译,生成了jvm可以识别的字节 ...
- jQuery 插件基础
jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...
- java基础学习05(面向对象基础02)
面向对象基础02 实现的目标 1.String类的使用2.掌握this关键字的使用3.掌握static关键字的使用4.了解内部类 String类 实例化String对象一个字符串就是一个String类 ...
- jquery插件开发基础入门
jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...
- jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
- jQuery DOM基础
jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html() html(value)设置和获取html内容,有html标签会自动 ...
随机推荐
- [转] Android开发者必备的42个链接
下面收集了42个帮助大家学习Android的内容链接,部分内容是面向初学者的,帮助大家从头开始学习Android开发,其他则面向较高级的开发者.希望推荐的这些内容对你有帮助. 官方网站 1.谷歌And ...
- 基于Redis的短链接设计思路
[Markdown阅读][1] 今天上班的时候收到一个需要短链接的需求,之前的做法都是使用了新浪的短链接API(https://api.weibo.com/2/short_url/shorten.js ...
- cocos进阶教程(2)多分辨率支持策略和原理
cocos2d-x3.0API常用接口 Director::getInstance()->getOpenGLView()->setDesignResolutionSize() //设计分辨 ...
- basic use of sidekiq
参考页面 https://github.com/mperham/sidekiq https://github.com/mperham/sidekiq/wiki/Getting-Started 强烈推荐 ...
- k-means
参考:http://www.cnblogs.com/jerrylead/archive/2011/04/06/2006910.html k-means是无监督的聚类算法,比较简单,但包含的思想不简单, ...
- MySQL建立索引的注意事项
对于大数据量的表格,尤其是百万行以上的数据表,一定要对其建立索引,否则查询速度极慢.(参考后面的测试结果)建立索引时需注意: MySQL的索引有两种:单列索引(即在某一列上建索引).多列组合索引(即在 ...
- Trailing Zeros
Write an algorithm which computes the number of trailing zeros in n factorial. Have you met this que ...
- iOS 中的第三方库管理工具
xcode没有android studio中的gradle进行第三方库管理,但是有第三方的库管理工具CocoaPods,https://github.com/CocoaPods/CocoaPods/w ...
- ip数据结构
本文摘自 linux kernel ip.h,感谢开源的GNU struct ip { #if __BYTE_ORDER == __LITTLE_ENDIAN unsigned int ip_hl:4 ...
- Android之jni深入
小技巧:自动生成 java本地方法对应的c代码的方法名 javah 指令 +全类名 java1.6版本 class C:\workspace\HelloWorldFromC2\bin\classes ...