jQuery知识重构
jQuery知识重构
目录:
一、入口函数
1 $(document).ready(function(){});
2 $(function(){});
jQuery入口函数与js入口函数的区别:
jQuery的入口函数是在 html所有标签都加载之后,就会去执行。
Js的window.onload事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行
二、jQuery选择器
1.基本选择器
2.层级选择器
3.过滤选择器
4.属性选择器
5.筛选选择器
三、jQuery动画
显示/隐藏
1 $(selector).show(speed,callback);
2 $(selector).hide(speed,callback);
3 $(selector).toggle(speed,callback);
speed:隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒
callback:隐藏或显示完成后所执行的函数
滑动
1 $(selector).slideDown(speed,callback);
2 $(selector).slideUp(speed,callback);
3 $(selector).slideToggle(speed,callback);
淡入淡出
1 $(selector).fadeIn(speed,callback);
2 $(selector).fadeOut(speed,callback);
3 $(selector).fadeToggle(speed,callback);
4 $(selector).fadeTo(speed,opacity,callback);
opacity:必选参数,将淡入淡出效果设置为给定的不透明度
自定义动画
1 $(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
操作多个属性
停止动画
1 $(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
stop(true) 所有动画不执行
stop(false,true) 动画立即执行完毕,这种用法使用较多
四、jQuery html
操作dom
text() - 设置或获取所选元素的文本内容
html() - 设置或获取所选元素的内容(包括 HTML 标记)
val() - 设置或获取表单字段的值
attr()- 设置或获取属性的值
有一个参数就是设置,没有参数就是获取!
removeAttr ()- 移除属性
操作样式
addClass() 给指定的元素添加样式类名
removeClass() 给指定的元素移除样式类名
toggleClass () 给指定的元素切换样式类名
hasClass () 判断是否有样式类名
操作元素
1.在内部添加
$(“div”).append(node) // 在div内部元素的结尾追加元素node
node.appendTo(“div”) // 把node追加到div内部元素的结尾
$(“div”).prepend(node) // 在div内部元素的开头追加元素node
node.prependTo(“div”) // 把node追加到div内部元素的开头
2.在外部添加
$(“div”).before(node) // 在div后面添加兄弟节点node
$(“div”).after(node) // 在div前面添加兄弟节点node
3.删除
remove() - 删除被选元素及其子元素(自杀)
empty() - 删除被选元素的子元素,不包括被选元素!
删除被选元素的子元素用html(“”)更加高效!
4.复制
clone()- 如果加参数true就是深层复制,会把之前绑定的事件也给复制
replaceWith()-替换节点
五、jQuery 尺寸
1.宽度和高度
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
.height()方法和.css(“height”)的区别:
返回值不同:.height()方法返回的是数字类型(20); .css(“height”)返回的是字符串类型(20px)
2.坐标值
offset() //获取和设置元素在当前窗口的相对偏移,返回的是一个对象,设置值后自动变成相对定位 Object {top: 50, left:8}
position() //只能获取元素相对于父亲的偏移,返回的是一个对象,不能设置值
获取值:offset().left offset().top position() .left position() .top
设置值:$("p").offset({left:txtLeft,top:txtTop});
区别:
使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移。
使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移。
3.滚动条
scrollTop() //获取或者设置垂直方向上到页面顶端的距离
scrollLeft() // 获取或者设置水平方向上到页面左端的距离
scroll() // 触发滚动事件:$(selector).scroll(function(){…});
六、jQuery 事件绑定机制
bind方式
语法格式:.bind( eventType, [ eventData ], handler )
参数说明
第一个参数:事件类型
第二个参数:传递给事件响应方法的数据对象,可以省略。
事件响应方法中获取数据方式:e.data
第三个参数:事件响应方法
1 $("p").bind("click",function(e){
2 //事件响应方法
3 });
one方式
语法格式:one( events [, data ], handler )
只绑定一次事件
delegate方式
语法格式:$(selector).delegate( selector, eventType, handler )
语法说明:
第一个参数:selector, 子选择器
第二个参数:事件类型
第三个参数:事件响应方法
1 $(".parentBox").delegate("p","click", function(){
2 //为 .parentBox下面的所有的p标签绑定事件
3 });
on方式
jQuery1.7版本后,jQuery用on统一了所有的事件处理的方法
语法格式:$(selector).on( events, [ selector ],[ data ], handler )
参数介绍:
第一个参数:events,事件名
第二个参数:selector,类似delegate
第三个参数: 传递给事件响应方法的参数
第四个参数:handler,事件处理方法
1 //绑定一个方法
2 $( "#dataTable tbodytr" ).on( "click", function() {
3 console.log( $( this ).text() );
4 });
5
6 //给子元素绑定事件
7 $( "#dataTable tbody").on( "click", "tr", function() {
8 console.log( $( this ).text() );
9 });
10
11 //绑定多个事件的方式
12 $( "div.test" ).on({
13 click: function() {
14 $( this ).toggleClass( "active");
15 },
16 mouseenter: function() {
17 $( this ).addClass( "inside" );
18 },
19 mouseleave: function() {
20 $( this ).removeClass( "inside");
21 }
22 });
解绑事件
- unbind解绑 bind方式绑定的事件( 在jQuery1.7以上被 on和off代替)
- $(selector).unbind(); //解绑所有的事件
- $(selector).unbind("click"); //解绑指定的事件
- undelegate解绑delegate事件
- $( "p" ).undelegate(); //解绑所有的delegate事件
- $( "p" ).undelegate( "click" ); //解绑所有的click事件
- off解绑on方式绑定的事件
- $( "p" ).off();
- $( "p" ).off( "click", "**" ); // 解绑所有的click事件,两个*表示所有
- $( "body" ).off( "click", "p", foo );
1 案例1:
2 var foo = function() {
3 // Code to handle some kind of event
4 };
5
6 // ... Now foo will be called whenparagraphs are clicked ...
7 $( "body" ).on("click", "p", foo );
8
9 // ... Foo will no longer be called.
10 $( "body" ).off("click", "p", foo );
11
12 案例2:(了解)解绑命名空间的方式:
13 var validate = function() {
14 // Code to validate form entries
15 };
16
17 // Delegate events under the".validator" namespace
18 $( "form" ).on("click.validator", "button", validate );
19
20 $( "form" ).on("keypress.validator", "input[type='text']", validate );
21
22 // Remove event handlers in the".validator" namespace
23 $( "form" ).off( ".validator");
触发事件
简单事件触发:$(selector).click();//触发 click事件
trigger方法触发事件:$( "#foo" ).trigger( "click" );
triggerHandler触发事件响应方法,不触发浏览器行为:$("input" ).triggerHandler( "focus" );
event对象的简介
event.data //传递的额外事件响应方法的额外参数
event.currentTarget //在事件响应方法中等同于this,当前Dom对象
event.target //事件触发源,不一定===this
event.pageX
event.pageY
event.stopPropagation() //阻止事件冒泡
e.preventDefault(); //阻止默认行为
event.type //事件类型:click,dbclick...
event.which //鼠标的按键类型:左1 中2 右3
七、数据缓存:data()
获取值:$(“div”).data(“index”);
设置值:$(“div”).data(“index”,3);
& .data()跟.attr() 方法的区别:
1. 获取数据的时候,attr方法需要传入参数,data方法可以不传入参数,这时候获取到的是一个js对象,即使没有任何data属性。
2. 获取到的数据类型不同,attr方法获取到的数据类型是字符串(String),data方法获取到的是相应的类型。
3. data方法获取到数据之后,我们使用一个对象来接收它,那么就可以直接操作(设置值或获取值)这个对象,而attr方法不可以。并且通过这种方式,要比.data(key,value)的方式更高效!
4. data-attribute属性会在页面初始化的时候放到jQuery对象,被缓存起来,而attr方法不会。
jQuery知识重构相关推荐
- [jQuery知识]jQuery之知识十一-Ajax初级
前言 1.Ajax 概述 2.load()方法 3..get()和.get()和.post() Ajax 全称为:"Asynchronous JavaScript and XML" ...
- MVC应用程序的jQuery代码重构
先看看这篇<在jQuery定义自己函数>http://www.cnblogs.com/insus/p/3415444.html 程序越看越是有重构的地方. 先看1部分,由于在#16代码有宣 ...
- JQUERY知识总结
1, 让页面上某一个已存在的SELECT被选中的JQuery写法 $("#test").find("option[value='3']").prop(&quo ...
- Jquery知识小点备注
jQuery siblings() 方法返回被选元素的所有同胞元素,并且可以使用可选参数来过滤对同胞元素的搜索. 实例演示:点击某个li标签后将其设置为红色,而其所有同胞元素去除红色样式 创建Html ...
- jQuery知识汇总
jQuery 选择器 选择器 实例 选取 * $ ...
- jQuery知识简介
1.jQuery简介 ①.jQuery是一个兼容多浏览器的.轻量级的JavaScript库 ②.jQuery是继prototype之后又一个优秀的JavaScript库,如今,jQuery已经成为最流 ...
- android radiobutton_时隔一年,用新知识重构一个Android控件老库
一年前,用 Java 写了一个高可扩展选择按钮库.单个控件实现单选.多选.菜单选,且选择模式可动态扩展. 一年后,一个新的需求要用到这个库,项目代码已经全 Kotlin 化,强硬地插入一些 Java ...
- jquery知识巩固
1.jquery中的index方法和eq方法 index()方法:index()获取的索引值是相对同兄弟元素,即同一个父元素,,所以首先要确认一下这个元素的兄弟是谁,例如: 当遇到以上的情况很容易就觉 ...
- jQuery知识(转)
jQuery输入格式控制插件Masked Input Plugin linzheng 2010-11-25 22:58 阅读:239 评论:0 jQuery表单插件ingrid.js linzheng ...
最新文章
- 如何构建可解释的推荐系统?| 深度
- java中四种引用类型(对象的强、软、弱和虚引用)
- 【Python】PAT-1044 火星数字
- 动态创建 Web 服务器控件模板
- 天涯煮酒又发现一篇好文,王阳明传,序就很漂亮,转一下
- 消费金融资金断流,银行抽贷、通道暂停,P2P离场
- linux 7 改网卡名称,CentOS7修改网卡名称
- 图解 Java 中的数据结构及原理,傻瓜也能看懂!
- 【转】初试JNI Java与C/C++交互
- 搭建jitsi的prosody出现的问题
- 【附源码】国内首届Discord场景创意编程开源项目
- 利用微信API将你的微信变为聊天机器人
- 什么是护网(HVV)?需要什么技能?
- Go语言自学系列 | golang标准库os模块 - File文件读操作
- arm编程语言基础c,ARM基础:ARM 伪指令详解
- CodeForces 13A - Numbers
- 访问我在BLOGBUS的博客吧
- Fluent Python读书笔记(二)
- 2018全国数学建模总结
- [转]人不成熟的六大特征
热门文章
- cocos creator入门教程(六)—— cc.Action使用
- 数据库之互联网常用分库分表方案
- [Debug] printf undefined reference to `putchar‘
- SEED-XDS560v2 驱动
- 服务器e7系列cpu,Intel Xeon E7 v4正式发布:首个24核心
- 技术的使用是好是坏,取决于我们如何负责任地设计和部署它们
- VS2013新建Win32项目改配置x64位 图文详解
- Android studio 设置自动换行
- 北京苹果店正门logo熄灯悼念 果粉献花纪哀思
- 深度揭秘:抖音短视频一天涨粉一万怎么做:国仁楠哥