jQuery字典中文版网址,不懂的都在这查哦
https://www.jquery123.com/
1.什么是jquery?
jQuery其实就是一堆的js函数(js库),也是普通的js而已,底层为js代码编写。
2.jquery使用精髓
选择元素,循环操作,链式调用。
2.选择器
-
基本选择器
(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元素
- 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” );
}
});
- 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>
以上内容经转载总结。