2021年02月19日 20:15:04
Javascript初学者笔记
JavaScript库:即library,是一个封装好的特定的集合(方法和函数)。jQuery就是为了快速方便的操作DOM而产生的快速、简介的JavaScript库。
Jquery概述
常见的JavaScript库
- Jquery
- Prototype
- YUI
- Dojo
- Ext JS
- 移动端的zepto
这些都是对原生JavaScript的封装,内部都是用JavaScript实现的。
// 推荐此方法
$(function () {
// 此处是页面DOM加载完成的入口,相当于js中的DOMContentLoaded
});
$(document).ready(function() {
// 此处是页面DOM加载完成的入口,相当于js中的DOMContentLoaded
});
$是jQuery的别称,是jQuery的顶级对象。
jQuery对象和DOM对象
用原生JS获取的对象就是DOM对象,jQuery方法获取的元素就是jQuery对象。jQuery对象的本质是利用$对DOM对象包装后产生的对象(以伪数组形式存储)。
<body>
<div></div>
<script>
var div = document.querySelector('div'); // DOM对象
$('div'); // jQuery对象
</script>
</body>
// 它们不能互相操作!!!
对象转换
// DOM 对象转换为jQuery对象
<body>
<video src="movies/1.mp4"></video>
<script>
var myvideo = document.querySelector('video');
$(myvideo)
$('video')
</script>
</body>
// jQuery对象转换为DOM对象
<body>
<video src="movies/1.mp4"></video>
<script>
var myvideo = document.querySelector('video');
$(myvideo)[0].play(); // 两种方式
$(myvideo).get(0).play();
</script>
</body>
jQuery常用API
jQuery选择器
$('选择器') // 里面选择器直接写CSS选择器即可,但是要加引号
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $(’#id’) | 获取指定ID的元素 |
全选选择器 | $(’*’) | 匹配所有元素 |
类选择器 | $(’.class’) | 获取同一类class的元素 |
标签选择器 | $(‘div’) | 获取同一类标签的所有元素 |
并集选择器 | $(‘div,p,li’) | 选取多个元素 |
交集选择器 | $(‘li.current’) | 交集元素 |
层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $(‘ul>li’) | 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素 |
后代选择器 | $(‘ul li’) | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子层级的元素 |
筛选选择器
名称 | 用法 | 描述 |
---|---|---|
:first | $(‘li:first’) | 获取第一个li元素 |
:last | $(“li:last”) | 获取最后一个li元素 |
:eq(index) | $(‘li:eq(2)’) | 获取到的li元素中,选择索引号为2的元素,索引从0开始 |
:odd | $(“li:odd”) | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“li:even”) | 获取到的li元素中,选择索引号为偶数的元素 |
筛选方法 ★
语法 | 用法 | 说明 |
---|---|---|
parent() | $(‘li’).parent() | 查找父级 |
parents() | $(‘li’).parents(".p-ul") | 查找父级们中的为p-ul类的元素 |
children(selector) | $(‘ul’).children(‘li’) | 相当于$(‘ul>li’),最近一级的儿子 |
find(selector) | $(‘ul’).find(‘li’) | 相当于$(‘ul li’) ,后代选择器 |
siblings(selector) | $(’.first’).siblings(‘li’) | 查找兄节点,不包括自己本身 |
nextAll([expr]) | $(’.first’).nextAll() | 查找当前元素之后所有的同辈元素 |
prevtAll([expr] | $(’.last’).prevtAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $(‘div’).hasClass(‘protected’) | 检查当前元素是否含有某个特定的类,如有则返回true |
eq(index) | $(‘li’).eq(2) | 相当于$(‘li:eq(2)’),index从0开始 |
链式编程
$(this).css('color', 'red').siblings().css('color', '');
jQuery样式操作
// 1. 返回属性值
$(this).css('color');
// 2. 设置
$(this).css('color', 'red');
// 3. 设置多组属性
$(this).css({'color':'white','font-size':'20px'});
// 添加类 类名前不要加'点'
$('div').addClass('类名');
// 移除类
$('div').removeClass('类名');
// 切换类
$('div').toggleClass('类名');
jQuery效果
// 显示/隐藏
// speed 速度 slow、normal、fast或者数值1000单位是毫秒
// easing 效果 swing linear
// fn 回调函数
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
动画队列及其停止排队的方法
动画或者效果一旦触发就会执行,如果多次触发,就造成多次动画或者效果排队执行。
停止排队
// stop()
// stop 方法用于停止动画或者效果,必须写在动画或者效果前面,作用是停止上一次的动画或者效果
$("ul").stop().slideToggle();
自定义动画
animate(params,[speed],[easing],[fn])
jQuery属性操作
获取属性值
prop("属性")
设置属性
prop("属性","属性值")
自定义属性
// 对于H5 自定义属性也可以设置和获取,如:data-index
attr("属性")
attr("属性","属性值")
数据缓存
// 对于H5 自定义属性也可以设置和获取,但是不需要加data,如:data-index,只写index即可
// 设置
data("uname","Pianpianluoye")
// 获取
data("uname")
checkbox复选框按钮可以用使用’:checked’获取已选取的数量
$("j-checkbox:checked").length
jQuery文本属性值
获取、设置元素内容
// 相当于原生innerHTML
$("div").html()
$("div").html("test text")
获取、设置元素文本内容
// 相当于原生innerText
$("div").text()
$("div").text("test text")
获取、设置表单值
// 相当于原生value
$("input").val()
$("input").val("test text")
保留小数位
(p * n).toFixed(2) // 保留2位小数
jQuery元素操作
遍历元素
// index 每个元素的索引号,index 可以改名字,比如:i,j,k
// domEle 是每个DOM元素对象,不是jQuery对象,需要转换$(domEle)
$("div").each(function(index,domEle){
.....;
})
$.each($("div"),function(i, ele){
....;
})
// 该用法可以用来遍历数组、对象等
$.each(arr,function(i, ele){
....;
})
- 创建元素
var li = $("<li>test li</li>")
- 添加元素
// 内部添加
element.append("内容") // 类似于原生的appendChild,把内容放到最后面
var li = $("<li>test li</li>");
$("ul").append(li)
$("ul").prepend(li) // 把内容放到最前面
// 外部加添
element.before("内容") // 把内容放到目标元素前面
element.after("内容") // 把内容放到目标元素后面
var div = $("<div>test div</div>");
$(".test").after(div);
- 删除元素
element.remove() // 删除匹配的元素(本身)
$("ul").remove();
element.empty() // 删除匹配的元素集合中所有的子节点
$("ul").empty();
element.html("") // 清空匹配的元素内容
$("ul").html("");
jQuery尺寸、位置操作
语法 | 用法 |
---|---|
width() / height() | 取得匹配元素的高度和宽度值 只算width / height |
innerWidth() / innerHeight() | 取得匹配元素的高度和宽度值 包含padding |
outerWidth() / outerHeight() | 取得匹配元素的高度和宽度值 包含padding、 border |
outerWidth(true) / outerHeight(true) | 取得匹配元素的高度和宽度值 包含padding、 border、margin |
- offset 设置或获取距离文档的距离
- position 获取距离带有定位父级的位置 ,如果父级没有定位则以文档为准(只能获取不能设置)
- scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
jQuery事件
// 单个事件注册
$("div").click(function(){
...
})
// 事件处理 on , 可以在匹配的元素上绑定一个或多个事件
element.on(events,[selector],fn)
$("div").on({
mouseenter: function () {
....
},
click: function () {
....
}
});
// 多个事件调用同一函数时,可以如下写法:
$("div").on("mouseenter mouseleave", function () {
....
})
on() 还可以进行事件委托,还可以给动态生成的元素绑定事件。
// 绑定的是ul,触发的是li
$("ul").on("click", "li", function () {
....
})
off() 解绑事件
$("div").off(); // 解除div上所有的事件
$("div").off("click"); // 解除div上的click事件
one() 事件
// 只能触发一次
$("div").one("click", function() {
....
})
自动触发事件
// 1. 元素.事件()
$("div").click();
// 2. 元素.trigger()
$("div").trigger("click");
// 3. 自动触发 元素.triggerHandler(type) , 不会触发元素的默认行为,比如:input的光标闪烁
$("div").triggerHandle("click");
事件对象
element.on(events,[selector],function(event){})
例如:
event.preventDeafault() 或者return false 用来阻止默认行为
event.stopPropagation() 用来阻止冒泡
jQuery其他方法
jQuery拷贝对象
$.extend([deep], target, object1, [objectN])
- deep true深拷贝、false浅拷贝
- target 要拷贝的对象
- 待拷贝的第一个对象的对象
// 会覆盖原来对象的数据,浅拷贝拷贝复杂数据类型的地址,深拷贝复制值并且相同属性名不会覆盖会合并
var targetObj = {};
var obj = {
id: 1,
name: "Pianpianluoye"
};
$.extend(targetObj, obj)
多库共存
jQuery使用$作为标识符,可能与其他js库的标识符产生冲突
- 为了能多库共存可以把$改成jQuery
- jQuery的变量名规定新的名称:$.noConflict() var xxx = $.noConflict();
jQuery插件
jQuery插件依赖jQuery,所以使用前必须先引用jQuery文件。
图片懒加载能降低服务器压力
var todolist = [{
title: '待办一',
done: false
}, {
title: '待办二',
done: false
}];
localStorage.setItem("todo", JSON.stringify(todolist)); // 把数组对象转化为字符串
var data = localStorage.getItem("todo");
data = JSON.parse(data); // 把字符串转化为数组对象