jquqry 总结一
电脑系统:windows10 专业版
在开发的过程中, 咱们依据需要会常常应用到 jquery, 当初我简略的做了以下总结, 心愿对大家有所帮忙。
jQuery 是一个基于 JavaScript 的面向对象封装.
在 jQuery 中 通过选择器获取到的是一个对象, 该对象中存在一个数组属性, 该数组中存储着所有通过抉择获取到的元素.
jQuery 1.x: 兼容 IE6, 7, 8
jQuery 2.x: 不兼容 IE6, 7, 8
jQuery 3.x: 不兼容 IE6, 7, 8
1, 元素绑定事件
on(参数一, 参数二): 绑定事件
参数一: 要绑定的事件类型
参数二: 要绑定的事件(能够是匿名函数, 也能够是函数名)
off(参数一, 参数二): 解除绑定
参数一: 事件类型
参数二: 事件名
注: 如果省略参数二不写, 将勾销所有参数一类型事件的绑定; 如果通过参数二指定了要解除绑定的事件, 则只解除对应的一个事件.
2, DOM 操作
创立标签：
$('<div>')创立 DOM
A.apppendTo(B): 将 A 元素增加到 B 元素里
A.append(B): 将 B 元素 增加到 A 元素外部的前面
A.prepend(B): 将 B 元素 增加到 A 元素外部的后面
A.after(B): 将 B 元素 增加到 A 元素内部的前面
A.after(B): 将 B 元素 增加到 A 元素内部的后面
A.replaceWith(B): 用 B 元素替换 A 元素
B.replaceAll(Sel): 用 B 元素替换所有通过 Sel 选择器匹配到的元素
A.empty(): 革除 A 元素中的所有内容
A.remove(Sel): 革除 满足 Sel 选择器 的 A 元素
获取指定标签的子级标签和父级标签
parent(): 获取指定元素的间接父级标签
parents(): 获取指定元素的所有父级标签
children(): 获取指定元素的所有子级标签
find(Sel): 获取指定元素中满足 Sel 选择器的 子级标签
3, 元素款式操作
形式一: 一次性设置多个款式
$(“.out p”).css({background: “red”, fontSize: ’30px’});
形式二: 一次只设置一个款式
$(“.out p”).css(‘textAlign’, ‘center’);
4, 操作元素属性
// 设置的单个属性 $(‘div’).attr(“id”, “one”); // 设置多个属性 $(‘img’).attr({src: “./img/timg.jpeg”, width: ‘300’}); // 获取: 也是获取的第一个匹配胜利的元素的属性值 console.log($(‘div’).attr(“id”)); // 删除属性 $(“img”).removeAttr(“width”); 属性值能够是一个函数, 函数携带两个参数 参数一(i): 匹配到的元素在数组中的下标 参数二(v): 以后正在操作的这个元素原来的属性值 $(‘img’).attr(‘width’, function(i, v) {return (i + 1) \* 200; }); // 200, 400, 600 // 400, 800, 1200 // 练习: 设置 img 的 width 为之前的二倍 $(‘img’).attr(‘width’, function(i, v) {return v * 2;});
操作元素属性办法二: prop()
prop()办法 的应用形式简直与 attr()办法 雷同.
区别: prop() 往往用于操作元素的固有属性, attr() 往往用于操作自定义属性
当属性值为 布尔类型 时, 应用 prop() 办法操作该属性
5, 操作元素的内容
// html(): 成果同 innerHTML $(‘p’).html(“<strong> 你好, 晚饭还早!</strong>”); // text(): 成果同 innerText $(‘p’).text(“你好, 晚饭还早!“); // 一, html() // 获取: 获取的是第一个匹配胜利的元素中的内容 console.log($(‘p’).html()); // 获取: 获取的是所有匹配胜利的元素中的内容 console.log($(‘p’).text()); // 三, val() // 设置 $(“input”).val(“ 姓名 ”); $(“input”).val(function(i, v) {var arr = [“ 张三 ”, “ 男 ”, 18] return arr[i]; }); // 获取: 获取的是第一个匹配胜利的元素中的内容 console.log($(“input”).val());
6, 动画
animate(参数一, 参数二, 参数三, 参数四)
参数一: 须要做动画的属性(类型为对象)
参数二: 动画的继续时长, 单位: 毫秒
参数三: 速度变动曲线, jQuery 默认提供 linear 和 swing(须要插件反对), 个别省略该参数
参数四: 动画执行结束之后的回调函数
$(‘.out’).animate({height: ‘100px’, fontSize: ’50px’}, 3000, function() { alert(“ 动画执行实现 ”); });
7，操作元素类名
// 1, 增加类名 为指定的标签增加 class 值 $(‘p’).addClass(“one”); // 2, 删除类名 $(‘p’).removeClass(‘first’); $(‘p’).removeClass(function(i, v) {return ‘a’ + i;}); // 3, 非凡的办法 toggleClass(参数一, 参数二) 参数一: 对应的 class 值 参数二: 布尔值, 增加或者删除. true 增加; false 删除 当省略参数二时: 如果元素原来存在对应的 class 值, 则删除; 如果不存在, 则增加. $(‘p’).on(‘click’, function() {$(this).toggleClass(‘active’, true); });
动画
一、显示 / 暗藏
暗藏动画
A.hide()
设置动画的过程：slow, normal, fast, 毫秒数
显示动画
A.show()
设置动画的过程：slow, normal, fast, 毫秒数
显示 / 暗藏
A.toggle()
设置动画的过程：slow, normal, fast, 毫秒数
二、淡入 / 淡出
淡出
A.fadeOut()
设置动画的过程：slow, normal, fast, 毫秒数
淡出
A.fadwIn()
设置动画的过程：slow, normal, fast, 毫秒数
淡入 / 淡出
A.fadeToggle()
设置动画的过程：slow, normal, fast, 毫秒数
非凡的
A.fadwTo()
必须有一个透明度的参数
设置动画的过程：slow, normal, fast, 毫秒数
三、上滑 / 下滑
上滑
A.slideUp()
设置动画的过程：slow, normal, fast, 毫秒数
下滑
A.slideDown()
设置动画的过程：slow, normal, fast, 毫秒数
A.slideToggle()
设置动画的过程：slow, normal, fast, 毫秒数
四、自定义动画
同时批改多个值
$(‘#custom1’).on(‘click’, function() {$(‘#aaa’).animate({width: 200, height: ‘200’, fontSize: ’30px’}, 1000, function() { alert(“ 动画执行结束 ”); }); });
在以后属性值的根底上减少 / 缩小
$(‘#custom2’).on(‘click’, function() {$(‘#aaa’).animate({width: ‘+=200’, height: ‘-=100’}, ‘slow’, function() { alert(“ 动画执行结束 ”); }); });
队列动画
$(‘#custom3’).on(‘click’, function() {$(‘#aaa’).animate({width: ‘200’,}, 3000); $(‘#aaa’).animate({height: ‘200’,}, 3000); $(‘#aaa’).animate({width: ‘100’,}, 3000); $(‘#aaa’).animate({height: ‘100’,}, 3000); });
链式操作
当对同一个元素做多项操作时, 能够连在一起写.
$(‘img’) .prop(‘src’, ‘./img/timg.jpeg’) .css({border: ‘2px solid gold’, width: ‘300px’}) .slideUp(1000) .slideDown(1000);
事件
一，加载事件
形式一
$(‘document’).ready(function(){})
形式二
$(function(){})
js 中的加载与 jQuery 的区别
前者等页面元素和内部文件加载结束后再触发
后者是页面元素加载结束后触发
鼠标事件
click
dblclick
mouseout()
mouseover()
mouseenter()
mouseleave()
键盘事件
keypress()
keyup()
keydown()
表单事件
// focusin(): 当元素取得焦点前，触发 focusin 事件。
// focusin 事件跟 focus 事件区别在于，他能够在父元素上检测子元素获取焦点的状况。
focusin()
// focusout(): 当元素失去焦点前，触发 focusout 事件。
// focusout 事件跟 blur 事件区别在于，他能够在父元素上检测子元素失去焦点的状况。
focusout()
// select(): 当 text 类型的 input 或者 文本域中的内容被选中时触发
select()
// resize: 只能给 window
$(window).resize(function() {console.log(“ 小米粥!!!”); });
jQuery 没有封装滚轮事件和鼠标右击事件
jQuery 封装的滚动事件 (留神, scroll() 并不是 鼠标滚轮事件, 而是在能滚动元素滚动时触发的事件)
$(‘.fatDiv’).scroll(function() {console.log(“+++++++”); });
JS 原生鼠标滚轮事件
var fatDiv = document.getElementsByClassName(“fatDiv”)[0]; fatDiv.onmousewheel = function() { console.log(“=======”); }
事件绑定
on 能够绑定多个事件
off 能够勾销多个绑定事件
bind() 绑定事件
unbind() 勾销绑定事件
合成事件
hover(事件一, 事件二): 鼠标移入元素时触发事件一, 鼠标移出元素时触发事件二
$(‘.resizeDiv’).hover(fun1, fun2); function fun1() { console.log(‘ 羊肉烩面!’); } function fun2() { console.log(‘ 炝锅烩面!’); }
toggle(fun1, fun2, …, funN): 1.9 版本之前, 当点击元素时会顺次触发 fun1, fun2, …, funN
一次性事件
$(‘#once’).one(‘click’, function() {alert(“ 爱你到天荒地老 …”); });
DOM
增加元素
A.append(B) 将 B 元素增加到 A 元素外部的前面
A.prepend(B) 将 B 元素增加到 A 元素外部的后面
A.after(B): 将 B 元素增加到
A.before(B)
A.replaceWith(B)
A.replaceAll(Sel)
A.empty(): 革除 A 元素中所有的内容
A.remove(Sel): 革除满足 Sel 选择器的 A 元素
增加
A.appendTo(B): 把 A 元素增加到 B 元素外部的前面
插入
A.insertBefore(B): 将 A 元素增加到 B 元素内部的后面
A.insertAfter(B): 将 A 元素增加到 B 元素内部的前面
删除元素
detach() 办法可能移除元素，然而不会移除元素身上的事件
remove() 办法，既能移除元素，也能移除元素自身的事件
// A.detach(): 满足这个选择器的元素被删除
$(‘#btn’).on(‘click’,function(){alert})
克隆
clone(是否拷贝事件)，默认值 false 代表只克隆元素，不克隆元素身上的事件
true 会克隆元素身上的事件
包裹元素的办法
A.wrap(B): 用 B 标签包裹每一个 A 元素
A.wrapAll(B)：用 B 标签包裹所有的 A 元素（谨慎，A 元素不挨着会扭转布局）
A.wrapInner(B): 用 B 标签包裹每一个 A 元素中的内容
遍历节点
each()
函数做参数
i 是下标
e 是遍历的元素
siblings() : 获取以后元素之外的同级元素
几个尺寸值
高度（同宽度）
// height() = height
console.log($(‘.one’).height());
// innerHeight() = height() + 高低 padding
console.log($(‘.one’).innerHeight());
// outerHeight() = innerHeight() + 高低 border
console.log($(‘.one’).outerHeight());
// outerHeight(true) = outerHeight() + 高低 margin
console.log($(‘.one’).outerHeight(true));
元素边框左上角到以后窗口的间隔
// 获取
console.log($(‘.one’).offset());
// 设置
$(‘.one’).offset({top: 500, left: 300});
position(): 元素 margin 左上角 到离它最近的已定位父元素 边框左上角内边缘 的间隔
// scrollLeft(): 程度滚动条的地位(页面左侧卷进去的间隔)
console.log($(‘:root’).scrollLeft());
// scrollTop(): 垂直滚动条的地位(页面顶部卷进去的间隔)
console.log($(‘:root’).scrollTop());
// 设置
$(document).click(function() {$(‘:root’).scrollTop(99); });
jQuery 的 AJAX 申请
ajax 申请有两种形式
形式一
$.ajax({})
形式二
$.ajax(url,{})
get 申请
$.get(‘url’,{})
post 申请
$.post(‘url’,{})
解析 json 数据
$.post(‘url’,{},function(data){// 解析 json 数据 var doc=JSON.parse(data) })
解析 xml 数据：间接从 data 中查找
$(data).find(‘student’).each(function(i,v){var trM=$(”).appendTo(‘table’); $(v).children().each(function(i,v){$(”).text($(v).text()).appendTo(trM); }) })
// 本期对于 jquery 的总结到了这里就完结啦! 是不是很简略! 让咱们一起走向巅峰!