jQuery初学者笔记

最新推荐文章于 2023-02-23 21:39:11 发布

真的是我太天真

最新推荐文章于 2023-02-23 21:39:11 发布

阅读量115

点赞数

分类专栏：前端学习文章标签： jquery

本文链接：https://blog.csdn.net/xueyushen/article/details/113775439

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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效果

jQuery API中文参考手册

// 显示/隐藏  
// 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文件。

jQuery插件库
jQuery之家

图片懒加载能降低服务器压力

全屏滚动
全屏滚动GitHub
jQuery全屏滚动插件fullPage.js演示

var todolist = [{
    title: '待办一',
    done: false
}, {
    title: '待办二',
    done: false
}];
localStorage.setItem("todo", JSON.stringify(todolist));    // 把数组对象转化为字符串
var data = localStorage.getItem("todo");
data = JSON.parse(data);  // 把字符串转化为数组对象