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>
4640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
