jquery
1.认识jQuery
1.什么是jquery? jQuery其实就是一堆的js函数(js库),也是普通的js而已,不是全新的
2.为什么要用jquery ?
jQuery面向用户良好的设计使得在使用过程中彻底解放了你记忆原生操作DOM的接口,jQuery中包含多个可重用的函数,用来辅助我们简化javascript开发。 jQuery改变了数百万人编写JavaScript的方式,当然部分人已经觉得时过境迁,组件化,工程化,大行其道。
3.jquery使用精髓
选择元素,循环操作,链式调用封装选择元素,循环操作,链式调用。
2.选择器
1. 基本选择器
(1)#id #选取带有唯一的指定 id 的元素。
(2)element 选择器选取带有指定标签名的元素。
(3):first 选择器选取第一个元素。
(4):last 选择器选取最后一个元素。
(5):even 选择器选取每个带有偶数 index 值的元素(比如 2、4、6)。index 值从 0 开始,所有第一个元素是偶数 (0)。
(6):odd 选择器选取每个带有奇数 index 值的元素(比如 1、3、5)。index 值从 0 开始,所有第一个元素是偶数 (0)。
(7):eq() 选择器选取带有指定 index 值的元素。
(8):gt() 选择器选取 index 值高于指定数的元素。
(9):lt() 选择器选取带有小于指定 index 值的元素。
2.层级选择器
(1)ancestor descendant 在给定的祖先元素下匹配所有的后代元素。
(2)parent > child 在给定的父元素下匹配所有的子元素
(3)prev + next 匹配所有紧接在 prev 元素后的 next 元素
(4)prev ~ siblings 匹配 prev 元素的所有同辈 siblings 元素
3.内容选择器
(1):contains(text) :contains 选择器选取包含指定字符串的元素。该字符串可以是直接包含在元素中的文本,或者被包含于子元素中。
(2):empty 选择器选取空的元素。空元素指的是不包含子元素或文本的元素。
(3):has(selector) :has() 选择器选取所有包含一个或多个元素在其内的元素,匹配指定的选择器。
(4):parent 匹配含有子元素或者文本的元素
4.可见性选择器
(1):hidden 所有隐藏的 元素
(2):visible 选择器选取每个当前是可见的元素。
5.属性选择器
(1)[attribute] 选择每个带有指定属性的元素。
(2)[attribute=value] 选择器选取每个带有指定属性和值的元素。
(3)[attribute$=value] 选择器选取每个带有指定属性且以指定字符串结尾的元素。
6.子元素选择器
: first-child
:first-of-type1.9+
:last-child
:last-of-type1.9+
:nth-child
:nth-last-child()1.9+
:nth-last-of-type()1.9+
:nth-of-type()1.9+
:only-child
:only-of-type1.9+
7.表单选择器
:input 匹配所有 input, textarea, select 和 button 元素
:text :匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素,或者type为hidden的元素
8.表单属性选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
:selected 匹配所有选中的option元素
3. DOM操作的相关方法
(1) .get()
(2).eq() eq() 方法返回带有被选元素的指定索引号的元素。
(3).find() 查找
(4).filter() 过滤 再选好的基础上过滤
(5).is() 返回时boolean类型
(6) .has() 判断里面是否含有
(7)add add() 方法把元素添加到已存在的元素组合中
(8)end 返回上一个元素
4.取赋值相关方法:
(1).html() 1.不传递参数就是取值 如果多个相同的标签 取值取第一个值 取的是html片段 2.传递一个html片段 就是赋值 3.也可以传递一个函数
(2).text() 1.不传递参数就是取值 2.传递一个html片段 就是赋值 3.也可以传递一个函数
(3).val() 针对的是表单元素
// 1.用在没有value属性的标签上面,是往.wrapper这个jquery对象上面去赋值
// 2.在type = text 的时候,会有些异同,但不影响正常使用,Dom树上还是原先的值,但是页面变成自己更改后的值
(4).size() 查看某个元素的数量
(5).addClass() 添加一个类 (就是class的属性值)
(6).removeClass() 删除class的属性值,class还保留
(7).hasClass() 检测是否含有某个属性
(8).attr() 始终是自定义的属性 (一个值表示取属性值)
(9)prop关注的是一种状态,只能控制本身的属性,添加属性和属性值Dom树上看不见,如果增加一个系统不承认的属性,增加到了jquery对象上面去了
5.基于jQuery对象查改删增相关方法
6.jquery动画
动画队列 : 如果某个标签身上被添加了多个动画任务,那么这些任务会被按顺序添加到队列中等待执行
按照队列中任务的顺序一个接着一个的执行队列中的任务
1.显示和隐藏:显示show() ,隐藏hide() ,切换toggle()
第一个参数:动画时间(速度)
第二个参数:动画执行完毕之后的回调函数
本质:显示和隐藏动画:控制标签的宽度和高度(透明度)来实现
2.展开和收起:展开slideDown() ,收起slideUp(), 切换slideToggle()
第一个参数:动画时间(速度)
第二个参数:动画执行完毕之后的回调函数
本质:展开和收起动画:控制标签的高度
3.淡入淡出动画:淡入fadeIn(),淡出fadeOut(), 切换fadeToggle(timer,callback)
第一个参数:动画时间(速度)
第二个参数:动画执行完毕之后的回调函数
淡入淡出到指定的值fadeTo (参数1,参数2,参数3)参数1为时间 ,参数2为透明度的值,参数3为回调函数
本质:操作标签设置标签的透明度
4.自 定义动画:animate
语法 jQ().animate(optionsObj,timer,callBack)
第一参数为对象,键值类要做什么动画
第二参数为时间
第三参数为回调函数
5.stop():停止任务
第一个参数:控制队列中的任务(是否清空) true|false
第二个参数:控制是否停止动画 true|false
没有参数: 停止当前的动画, 后面的任务继续执行
true true :立即完成当前的动画,后面的任务不再执行
true false:所有动画任务立刻停止
false false:停止当前的动画,后面的任务继续执行 默认的情况
false true :立即完成当前的动画,后面的任务继续执行
6.delay():延迟执行任务
7.元素与可视区的尺寸
元素的尺寸
width()获取元素的宽度(值不带单位);有参数的话,代表设置宽度,参数不用带单位;
height()获取元素的高度;有参数的话,代表设置高度,参数不用带单位;
innerWidth() width+padding
innerHeight() height+padding
outerWidth() width+padding+border
outerHeight() height+padding+border
可视区的尺寸
页面的宽高
$(document).width()页面的宽
$(document).height()页面的高
可视区的宽高
$(window).width()可视区的宽
$(window).height()可视区的高
元素的距离
元素相对于文档的距离
offSet().left
offSet().top
元素相对于父级的距离
position().left
position().top
positon的值是不受margin的影响的;
offSetParent找到最近的有定位的父级;
滚动条的距离
scrollTop();
scrollLeft();
8.jQuery事件绑定机制
简单事件绑定方法
- click(hander) .click() //绑定事件 或者触发 click事件
- .blur() //失去焦点事件,同上 .
- hover(mousein, mouseleave) //鼠标移入,移出
- mouseout: 当鼠标离开元素及它的子元素的时都会触发。
- mouseleave: 当鼠标离开自己时才会触发,子元素不触发。
- .dbclick() 双击
- change 改变,比如:文本框发送改变,下来列表发生改变等...
- focus 获得焦点
- keyup, keydown, keypress : 键盘 键被按下。
- mousedown, mouseover
绑定事件的方式 方式
1.on
on方式 语法格式:$(selector).on( events [, selector ] [, data ], handler ) 参数介绍: 第一个参数:events,事件名 第二个参数:selector,类似delegate 第三个参数: 传递给事件响应方法的参数 第四个参数:handler,事件处理方法 例如: //绑定一个方法 $( "#dataTable tbody tr" ).on( "click", function() { console.log( $( this ).text() ); }); //给子元素绑定事件 $( "#dataTable tbody" ).on( "click", "tr", function() { console.log( $( this ).text() ); }); //绑定多个事件的方式 $( "div.test" ).on({ click: function() { $( this ).toggleClass( "active" ); }, mouseenter: function() { $( this ).addClass( "inside" ); }, mouseleave: function() { $( this ).removeClass( "inside" ); } });
2. one() 方法为被选元素添加一个或多个事件处理程序,并规定当事件发生时运行的函数。
当使用 one() 方法时,每个元素只能运行一次事件处理程序函数。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){ 10 $("p").one("click",function(){ 11 $(this).animate({fontSize:"+=6px"}); 12 }); 13 }); 14 </script> 15 </head> 16 <body> 17 18 <p>这是一个段落 。</p> 19 <p>这是另外一个段落。</p> 20 <p>点击任意一个段落来修改段落的字体大小,每个段落只会执行一次。</p> 21 22 </body> 23 </html>
3.off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
4.trigger() 方法触发被选元素的指定事件类型。
5.hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
9.动画相关方法:
1..hide()方法如果被选的元素已被显示,则隐藏该元素。
2.show()方法如果被选元素已被隐藏,则显示这些元素:
3.toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
4.fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。
5.fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。
6.fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
如果元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。
如果元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。
注释:隐藏的元素不会被完全显示(不再影响页面的布局)。
7.fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
8.slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。
9..slideUp()方法通过使用滑动效果,隐藏被选元素,如果元素已显示出来的话。
10.slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。
11.animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")
10.jquery工具方法
1.$.type() 判断数据类型
2.$.isArray() 是否是数组
3.$.isFunction() 是否是函数
4.$.isWindow() 函数用于判断指定参数是否是一个window窗口。
5.$.trim() 消除空格
6.$.proxy() 改变this指向
7.$.noConflict()防止冲突
8.$.each() 循环 $.map()
9.$.parseJSON() 严格json字符串转换成对象 – 原生JSON.parse();
10.$.extend() 插件扩展(工具方法)
$.fn.extend() 插件扩展(实例方法)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div style="width: 100px;height: 100px;background-color: #f00;position: absolute;top: 0;left: 0"></div> 9 <script src="jquery-1.11.3.js"></script> 10 <script> 11 12 $.fn.extend({ 13 drag:function(){ 14 var disX,disY; 15 var self=this; 16 $(this).on("mousedown",function(e){ 17 disX=e.pageX-$(this).offset().left; 18 disY=e.pageY-$(this).offset().top; 19 20 21 $(document).on("mousemove",function(e){ 22 $(self).css({left:e.pageX-disX,top:e.pageY-disY}) 23 24 }) 25 $(document).on("mouseup",function(e){ 26 $(document).off("mousemove").off("mouseup") 27 28 }) 29 30 31 }) 32 return this; 33 34 } 35 }) 36 37 38 $("div").drag(); 39 40 41 </script> 42 </body> 43 </html>