关于jquery:jquery总结一

51次阅读

共计 6652 个字符，预计需要花费 17 分钟才能阅读完成。

电脑系统: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()