Jquery框架
Jquery框架
Echo关于jQuery的笔记,涵盖jQuery的基础知识。
Welcome to my notes on jQuery!
jQuery
1.简介
JQuery是js函数库 本质就是js库
jQuery总共有三个版本 1版本兼容性最好 2 版本3版本轻量化
jquery 核心函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!--
1. 作为一般函数调用: $(param)
1). 参数为函数 : 当DOM加载完成后,执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将dom对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
2. 作为对象使用: $.xxx()
1). $.each() : 隐式遍历数组
2). $.trim() : 去除两端的空格
-->
<!--/*-->
<!--需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框-->
<!--需求2. 遍历输出数组中所有元素值-->
<!--需求3. 去掉" my atguigu "两端的空格-->
<!--*/-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
// <!--需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框-->
// 1. 参数为函数 则约等于页面加载完成(window.onload)的回调函数
$(function () {
// 2. 参数为选择器字符串 通过选择器去匹配的元素封装成jquery对象返回
$('#btn').click(function () {
// 3. 参数为dom对象 将当前的dom对象转换成jquery对象返回
alert($(this).html());
// 4. 参数为html标签字符串 将当前这个标签创建 并且直接为jquery对象
$('<input type="text" name="msg3"/><br/>').appendTo('div');
})
// <!--需求2. 遍历输出数组中所有元素值-->
var arr = [4,7,3,1,6];
// 回调函数中 第一个参数对应索引 第二个参数对应当前元素的值
$.each(arr,function (index,item) {
console.log(index,item);
});
// <!--需求3. 去掉" my atguigu "两端的空格-->
var str = ' my atguigu ';
// console.log(str.trim())
console.log($.trim(str))
})
2.jquery使用
2.1 dom对象和jquery对象
1.引入文件
2.写入口函数
1 | <script src="jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> |
jquery和原生入口函数的区别
jquery入口能写多个 js只能写一个
jquery入口函数执行的速度比原生的js快
$是一个函数
1.如果传递的是一个匿名函数 那么他就是一个入口函数
$(function(){})
2.如果穿的的是一个字符串 那么它就是一个选择器
$(“#box”);
3.也可以是创建一个标签
$(“
<div>
哈哈哈<div>
“);4.如果传递的是一个dom对象 那么它就会把dom对象转换成为jquery对象
$(“dom 对象”);
DOM&jquery对象
DOM对象及时原生的js获取的对象
DOM 对象只能调用dom的方法或者属性 不能调用jquery的属性或者方法
jquery 利用jquery对象选择器获取的对象
jquery 只能调用jquery的方法或者属性 不能调用dom的属性或者方法
DOM对象和jquery对象对互相转换
1 | $(function(){ |
2.2 text方法
获取文本
$(‘#one’).text();
会获取到这个标签中的所有的文本 包括后代元素的文本
1
//里面给参数就是获取文本
$(‘div’).text();
包含多个dom对象的 获取到的是多个dom对象的文本
设置文本
$(‘#one’).text(‘新的设置的文本’);
设置的文本会替代原来的文本
$(‘#one’).text(‘
<h1>
fsdfasdf<h1>
‘);如果包含的有标签 也是不会把标签解析出来的
$(‘div’).text();
如果包含了多个dom对象的 设置文本 会把所有的dom对象的文本都替换掉
2.3 css方法
css是设置和获取样式的
获取样式
$(‘#one’).css(‘样式名称’);
$(‘#one’).css(‘height’); 获取class为one 元素的高度
$(‘div’).css(‘width’);
获取包含多个DOM对象的样式 只会获取第一个
设置样式
$(‘#one’).css(‘样式’,属性值);如果带单位 px 需要加引号 如果是单纯的数值就不需要加引号
设置多样式
$(‘#one’).css({
样式名称:样式值,
样式名称2;样式值2,…………..
});
给一组DOM设置样式 这种会隐式遍历 会把每一个元素都遍历出来
1
2
3
4$('div').css({
样式名称:样式值,
样式名称1:样式值2,.......
});
2.4 选择器
让我们能跟快的找到自己需要的元素
选择器 | 实例 | 选取 |
---|---|---|
* | $(“*”) | 所有元素 |
#id | $(“#lastname”) | id=”lastname” 的元素 |
.class | $(“.intro”) | 所有 class=”intro” 的元素 |
element | $(“p”) | 所有 <p> 元素 |
.class.class | $(“.intro.demo”) | 所有 class=”intro” 且 class=”demo” 的元素 |
:first | $(“p:first”) | 第一个 <p> 元素 |
:last | $(“p:last”) | 最后一个 <p> 元素 |
:even | $(“tr:even”) | 所有偶数 <tr> 元素 |
:odd | $(“tr:odd”) | 所有奇数 <tr> 元素 |
:eq(index) | $(“ul li:eq(3)”) | 列表中的第四个元素(index 从 0 开始) |
:gt(no) | $(“ul li:gt(3)”) | 列出 index 大于 3 的元素 |
:lt(no) | $(“ul li:lt(3)”) | 列出 index 小于 3 的元素 |
:not(selector) | $(“input:not(:empty)”) | 所有不为空的 input 元素 |
:header | $(“:header”) | 所有标题元素 <h1> - <h6> |
:animated | 所有动画元素 | |
:contains(text) | $(“:contains(‘W3School’)”) | 包含指定字符串的所有元素 |
:empty | $(“:empty”) | 无子(元素)节点的所有元素 |
:hidden | $(“p:hidden”) | 所有隐藏的 <p> 元素 |
:visible | $(“table:visible”) | 所有可见的表格 |
s1,s2,s3 | $(“th,td,.intro”) | 所有带有匹配选择的元素 |
[attribute] | $(“[href]”) | 所有带有 href 属性的元素 |
[attribute=value] | $(“[href=’#’]”) | 所有 href 属性的值等于 “#” 的元素 |
[attribute!=value] | $(“[href!=’#’]”) | 所有 href 属性的值不等于 “#” 的元素 |
[attribute$=value] | $(“[href$=’.jpg’]”) | 所有 href 属性的值包含以 “.jpg” 结尾的元素 |
:input | $(“:input”) | 所有 <input> 元素 |
:text | $(“:text”) | 所有 type=”text” 的 <input> 元素 |
:password | $(“:password”) | 所有 type=”password” 的 <input> 元素 |
:radio | $(“:radio”) | 所有 type=”radio” 的 <input> 元素 |
:checkbox | $(“:checkbox”) | 所有 type=”checkbox” 的 <input> 元素 |
:submit | $(“:submit”) | 所有 type=”submit” 的 <input> 元素 |
:reset | $(“:reset”) | 所有 type=”reset” 的 <input> 元素 |
:button | $(“:button”) | 所有 type=”button” 的 <input> 元素 |
:image | $(“:image”) | 所有 type=”image” 的 <input> 元素 |
:file | $(“:file”) | 所有 type=”file” 的 <input> 元素 |
:enabled | $(“:enabled”) | 所有激活的 input 元素 |
:disabled | $(“:disabled”) | 所有禁用的 input 元素 |
:selected | $(“:selected”) | 所有被选取的 input 元素 |
:checked | $(“:checked”) | 所有被选中的 input 元素大 |
后代选择器
父>子元素 :获取父元素的子元素 不会获取父亲元素
父 后代元素:获取父元素的所有的后代元素
2.5 父代 兄弟 后代选择
,parent();返回的是元素的父亲元素
.parents();返回元素的祖先元素 返回的是该元素的 所有对祖先元素 一直到html
children();返回的是该元素的所有的之间子元素
find(); 返回的是被选元素的后代元素 一直到最后一个后代元素
1
2$('div').find('span');
//返回的是div的后代的所有的span元素siblings() 方法返回被选元素的所有同胞元素
next() 返回的是被选元素的下一个同胞元素
nextAll() 返回的是所有的后面的同胞元素
nextUntil() 返回的是两个参数之间的同胞元素
1 | $('h2').nextUntil('h5'); |
first() 返回的是被选元素的第一个元素
1
2$('div p').first();
//返回的是div元素中的第一个plast() 返回的是被选元素的最后一个元素
1
2$("div p").last();
//返回的是div元素中的最后一个peq() 返回的是 带有指定索引的元素
1
2$("div").eq(1);
//返回的是第一个divfilter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
1
2
3
4$(document).ready(function(){
$("p").filter(".url");
});
//返回带有类名 "url" 的所有 <p> 元素:not 法返回不匹配标准的所有元素、
1
2$("div").not('.url');
返回的是div中所有的不带url的元素
2.6 class类的操作
———————————–添加和移除类的操作—————————————-
addClass(‘类名称’) 给元素添加类
addclass(‘l类1 类2’) 给元素添加多个类
removeClass(); 不写参数就是移除所有的类
removeClass(‘类名称’) 移除元素的类
removeClass(‘类名称1 类名称2’) 移除元素的多个类
1
2$('#one').removeClass();
//移除one 的所有的类
————————————-判断类的操作–——————————————–
hasClass(‘类名称’) 判断类 判断一个元素有没有某个类 如果有就返回true 反正返回false
1
2$('#one').hasClass('one');
//判断one里面有没有one这个类
————————————-切换类的操作–——————————————–
toggleClass(‘类名称’) 切换类
1
2$('#one').toggleClass('ddd');
//把one的类切换为ddd
2.7 jquery 动画
显示与隐藏
show();如果没有参数就没有动画效果
show(时长,回调函数);时长可以是毫秒数 也可以是其他的参数
1
2
3$('div').show(2000,function(){
alert('哈哈哈');
})hide()隐藏 没有参数就是没有动画效果 就直接消失了
hide(时长,回调函数); 效果是和show一样的
toggle()切换 ;切换动画的显示和隐藏两种状态
滑入与滑出
slideDown() 没有参数的话就是默认的相当于给了一个默认的时长2s
slideDown(时长,回调函数);
1
2
3$('div').slideDown(200,function(){
alert('hahhah');
})slideUp() 滑出 默认效果
slideUp(时长,回调函数);
slideToggle() 切换
淡入与淡出(改的是透明度)
fadeIn();默认效果
fadeIn(时长,回调函数);
fadeOut ();淡出默认淡出效果
fadeOut(时长,回调函数);
fadeToggle() 淡出淡出的切换
fadeTo(时长,0-1的数字);淡入到哪里 后面那个参数改的是透明度
自定义动画
animate(要改变的属性,时长,linear/swing,回调函数);
参数1 :必选的属性 是需要改变的值
参数2:执行动画的时长
参数3:代表的是匀速还是缓动 默认是缓动
1
2
3
4
5
6
7
8
9
10
11
12$('div').animate({
width:100,
height:100,
left:100,
top:100
},200,linear,function(){
//最后有一个回调函数意味着我们可以继续无线套娃
$('div').animate({
windth:200,
height:300
}200,swing,function(){});
});
动画队列与停止队列
动画队列 就是一组连续的动画
1
2$('div').slideDown(2000).slideUp(2000);
//滑入用2000毫秒随后使用2000毫秒的时间来滑出停止动画
stop(true/false , true/false);
参数1:是否清除队列 (动画执行到一半了 点击停止 是否还继续执行未完成的动画)
参数2:是否跳到最终的效果(动画执行到一半了 点击停止 是否直接跳到动画的最终效果)
1
2
3$('div').stop(true,false).slideDown(200);
//div的第一个动画还没执行完的时候 下一个动画就来了就会产生动画的队列
然后进行设置 让动画队列继续存在 但是当前的动画不执行完 马上执行下一个动画
2.8 jquery节点
html方法:设置或者获取内容
html() 不给参数就是获取内容 获取的是元素的所有的内容
html(参数);设置的内容会替换掉原来的内容 、
如果设置的内容中包含标签 会把标签里面的内容解析出来
1
2
3$('div').html('我是设置的内容');
$('div').html('我是设置的内容<a hrtf="www.baidu.com">百度<a>');
//下面的这个会把设置的里面的标签解析出来
$(参数);能够创建元素 但是创建的元素是单独的 需要追加到节点中
1
2
3
4let aLink=$('<a href="www.baidu.com">百度<a>');
//创建元素
$('div').append(aLink);
//把创建的a元素追加到div中
2.9 添加节点
append(对象);
父元素.append(子元素);把子元素作为最后一个元素添加
1
2
3
4$ul=$('ul');
$li3=$('#li3');
$ul.append('li3');
//假设ul里面有五个元素 上面的方法会把li3剪切到最后面去 小技巧把ul中的li3 剪切到ul2的最后一个位置上面
1
2
3//获取ul中的li3
$ul2.append($li3);
//完成剪切prepend();
父元素.prepend(子元素);把子元素添加到父元素所有的子元素的第一个的位置上
剪切 同append()方法
before();作为兄弟元素添加
在某某之前
元素A.before(元素B);A和B是兄弟元素 B元素会添加到A元素的前面
after();
A.after(B);B元素会添加到A元素的后面
appendTo();
子元素.appendTo(父元素); 子元素会添加到父元素中去 作为最后一个子元素添加
2.10 移除元素
empty();清空
父元素.empty();清空父元素中的内容 同时也会移除元素的事件
remove(); 清除掉素元素
元素.remove(); 自杀 自己清楚掉自己
1
2$li.parent().remove();
//子元素清除掉父元素
2.11 克隆节点
clone();
元素.clone();克隆的节点只会存在在内存中 还需要把节点添加到页面中 克隆出来的元素和原来的元素的所有的属性都是一样的
clone(true/false); 参数是TRUE 就会把事件也一起克隆 如果是FALSE就不会
2.12 设置获取表单元素的值
获取的是表单元素的值
val();不给参数就是获取
val(’值’);给的参数就是设置的值
3.jquery 属性操作
3.1设置属性
attr();
对单属性进行设置
元素.attr(‘属性’,’属性值’);修改属性值
元素.attr(‘自定义属性’,’自定义属性值’);修改自定义属性值
元素.attr(‘自定义属性’,‘自定义属性值’); 修改自定义属性值
对多属性进行设置
元素.attr({
属性名1:属性值1,
属性名2:属性值2,
属性值3,属性值3.。。。。。。。。
})
3.2 获取属性
元素.attr(‘属性名’);
自定义的属性也可以获取 如果没有这个属性就返回underfind
1 | $("div").attr('height'); |
3.3 移除属性
元素.removeAttr(‘属性名’);移除单个属性
元素.removeAttr(‘属性名1 属性名2 属性名3.。。。。’)
3.4 操作布尔类型
在原生的h5 中有这样的一种属性 比如说checked 如果元素有这个属性就表示选中了 如果元素没有这个属性就表示元素没有被选中 在现在的js中不能使用attr来获取这类 属性只能使用prop来获取
元素。prop();获取属性的布尔值 例如checkde的值 TRUE或者flase
3.4尺寸和位置的操作(height 和width)
通过元素。css(’属性名’)的方法也能够获取到元素的宽和高 但是获取的是一个字符串 后面带的有px 如果不想后面带有px 可以使用
元素.width(); 获取元素的宽度 不包括内边距 外边距 和边框
元素.height();获取元素的高度 不包括内边距 外边距 和边框
元素.width(数值);设置元素的宽 不包括 内外边距和边框
元素.heigth(数值);设置元素的高 不包括 内外边距和边框
含有padding的获取方式
元素.innerHeight/ innerWidth ();
含有内边距 和边框 的获取方式
元素.outerWidth() / outerHeingt() ;
含有内外边距 和边框的获取方式
元素.outerWidth( true )/outerHeight(true ) 需要在参数里面加上TRUE
3.5 获取页面可视区宽度和高度
window.height();
window.width();
3.6 元素的位置(相对于视口的位置 or 相对于元素父元素的位置)
元素.offset();元素相对于document的位置 获取会得到一个对象 对象里面包含了top 和 left的值
元素.position();元素相对于父元素的位置 获取会得到一个对象 对象里面包含了
3.7 设置或者获取滚动条的位置
元素.scrollTop 与 scrollLeft 获取的是元素被卷曲进 进度条的值 ( 一个div 200200 的宽高 里面放了一个400400的元素 形成了滚动条 被卷曲的部分为200*200)
元素.scrollLeft(数值) 元素.scroolTop(数值) 设置元素被卷曲进去的宽高
window.scrollLeft() window.scrollTOP 获取页面被卷曲的高度和宽度
加上数值 了以后就是设置
4 jquery 事件
4.1 事件注册(了解)
原生的js 注册事件 后面的事件会对前面的事件进行覆盖
jquery不会
bind 支持同时注册 但是不支持动态注册
- 同时注册 就是指能够同时注册多个事件 比如可以给一个对象同时注册鼠标移入和点击事件
- 动态注册 就是如果给ID为one 的div这个元素注册了事件 如果在重建一个id为one的div 那么这个新的div就不享受前面那个div所注册的事件
bind
元素.bind({
事件对象:function(){
发生的内容
},
事件对象2:function(){
发生的内容2
}
})
1 | $('div').bind({ |
delegate 注册委托事件
支持同时注册也支持动态注册
父元素.delegate(‘要绑定的元素’,’事件类型’,事件处理函数)
1 | 为ul下面的所有的li注册点击事件 |
4.2 事件注册(重点)
on 简单注册
不支持动态注册
元素.on(‘事件名’,’事件函数’);
1 | $('div').on('click',function(){ |
on 委托注册
支持动态注册
父元素.on(‘事件名’,’事件对象’,事件函数);
1 | $('ul').on('click','li',function(){ |
4.3 事件的解绑
元素.off() 不给参数就是解绑所有的事件
元素.off(‘事件’) 给了参数就是解绑对应的事件
1 | $('button').off('click'); |
4.4 触发器
一般来讲 如果要触发事件 肯定要有触发的条件 比如说 鼠标点击 鼠标移入等等.但是我们也可以自定义事件 自定义的事件没有触发的条件 这个时候就需要我们使用trigger来触发这个事件
元素.trigger(‘事件名称’);
1 | //给button 自定义一个事件 |
4.5 事件对象
注册一个事件 系统就会帮助我们生成一个对象啦记录这个事件的一些信息,比如触发事件的时候有没有按住某个按键 鼠标的移动坐标啊 什么的
在原生的js中 在函数里面有一个参数event function(event)
jquery 的事对象是对原生js事件对象的一个封装 它帮助我们处理好了 ie兼容的问题
jquery 事件对象的写法
1 | $('button').on('click',function(e){ |
事件对象常用的三个距离
- screenX or screenY :屏幕左上角距离你触发事件的那个位置的距离的值
- clientX or clientY:可视区左上角 距离你触发事件的位置的距离的字值
- pageX or pageY: 页面左上角 距离你触发事件位置的距离的值
阻止事件对象冒泡
由于事件的冒泡 子元素的事件对象被触发时 它的父元素的事件也会被触发
e.stopPropagation();组织事件冒泡
阻止浏览器的默认行为
e.preventDefault();
return false——既能阻止对象冒泡 也能阻止默认行为
获取按键
获取用户按下的按键
e.keyCode();
5.链式编程
如果给元素调用一个方法这个方法有返回值 并且这个返回的 是jquery对象 我们可以继续在这个返回对象的基础上在调用方法
返回的对象是jquery对象 如果返回的不是jquery对象 那么我们就没有必要在继续点击下去了
1 | $('div').height(100).width(100).css('backgroundColor',red); |
5.1 end
end 能够返回上一个this
元素.end();
end也是jquery对象的方法 只能是jquery对象才能够返回
end能够回到上一个状态 end后面也能跟end 这样的话就能够回到上一个元素或者对象
1 | $('li').parent().parent(); |
5.2 显示迭代 each()
each()是用来遍历jquery对象的 为每一个匹配到的对象 执行一个函数
$(‘li’).each(function(index,element){})
index是对象的下标 element是该对象的dom对象
1 | $('li').each(function(index,element){ |
6.多库共存
如果引入了多个jquery 那么引入的是哪个jquery对象里面的 所用就需要查看jquery的版本
哪个jquery最后引入的 那么现在用的就是那个最后引入的jquery版本
1 | $.fn.jquery; |
后面引入的会把前面引入的jquery版本给覆盖掉 使用noConflict()
1 | $.noConflict(); |
7.jquery 插件
插件就是用来做扩展功能的
网站:jq22.com
7.1 插件调用方法
- 引入jquery文件
- 引入插件文件
- 调用插件方法
7.2 UI插件
从官网上面把ui插件下载下来 然后看下载内容里面的使用的方法自己使用