我的前端自学 jQuery基础（一）

最新推荐文章于 2024-01-24 15:58:46 发布

gh100330

最新推荐文章于 2024-01-24 15:58:46 发布

阅读量213

点赞数

分类专栏：自学

本文链接：https://blog.csdn.net/gh100330/article/details/113047317

版权

自学专栏收录该内容

32 篇文章 0 订阅

订阅专栏

到今天为止，前端的基础入门内容基本顺了一遍，接下来进入前端进阶阶段的学习，学习方向大概为jQuery， node.js， vue，小程序，数据库，linux基础。

（一）概述
jQuery是快速、简洁的JavaScript库（library），是一个封装好的特定的集合（方法和函数），就是为了快速方便的操作DOM，扎实掌握原生JS，对jQuery的学习有非常大的帮助

（二）jQuery入口函数
①等待页面DOM加载完毕再执行JS，传统写法

$(document).ready(function() { JQueryCode })

②更为简洁的写法,相当于原生JS中的DOMContentLoaded

$(function() { JQueryCode })

（三）jQuery顶级对象 $

1 . $ 其实是JQuery的别称，在代码中可以用jQuery代替 $ ，但 $ 更为简单。

2 .$ 是jQuery中的顶级对象，相当于原生JS中的window，把元素利用$ 包装成了jQuery对象。

（四）jQuery对象和DOM对象

1 . DOM对象：用原生JS获取的元素

var myDiv = document.querySelector('div');

2 . jQuery对象：用jQuery方式获取的对象，他的实质是通过$对元素对象进行了包装,并以伪数组的形式存储

$('div');

3 . jQuery对象只能使用jQuery方法，而DOM对象只能使用原生JS的属性和方法。他们之间是可以相互转换的
①DOM对象转换为jQuery对象：$(DOM对象);
②jQuery对象转换为DOM对象：

$('div').get(index); // index是索引号
// 或者
$('div')[index];

（五） jQuery常用API
1 .jQuery选择器
①基础选择器

$('选择器');  // 选择器直接写CSS选择器，但是要加引号

在这里插入图片描述
②层级选择器

③筛选选择器

④筛选方法

2 .jQuery样式
①基本方式

/* $(function() {
	$('选择器').css('属性', '值');
}) */
$('.current').css('backgroundColor', 'red');

②隐式迭代
jQuery会将获取的元素以伪数组的形式进行存储，同时对匹配到的所有元素进行循环遍历，而不用我们再去手动遍历，这个内部遍历执行的过程就叫隐式迭代。

③jQuery排他思想，利用隐式迭代，省去for循环，再利用siblings查找兄弟节点但不包括自身的特性

$(function() {
	$(element).click(function(){
		$(this).css('styleCode', 'style');
		$(this).siblings().css('styleCode', '');
	})
})

④获得当前元素的索引号

$(element).index();

⑤操作CSS方法
jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式
1 .参数只写实行名，则返回属性值

$(element).css('color');// 返回元素的颜色的值
$(element).css('width'); // 返回元素的宽度值，带单位的字符串

2 .参数写属性值

$(element).css('color', 'red');// 修改元素的颜色的值为red
$(element).css('width', 300); // 修改元素的宽度值为300px，单位可以不写，也可以写，写单位要加引号

3 .如果修改的样式较多，参数可以是对象，参数可以不加引号，复合属性用驼峰命名

$(element).css({
	'color': 'red',
	'width': '300'
})

4 .设置类，类名不要加点
①追加类

$(element).addClass('类名');

②移除类

$(element).removeClass('类名');

③切换类

$(element).toggleClass('类名');

3 .jQuery效果
①元素的显示和隐藏

show([speed, [easing], [fn]]); // 显示
hide([speed, [easing], [fn]]); // 隐藏
toggle([speed, [easing], [fn]]); // 切换

显示参数：
speed 速度，slow、normal、fast或者毫秒值（无单位）
easing 切换效果，默认为swing，可用属性linear匀速
fn 回调函数

②滑动

slideDown([speed, [easing], [fn]]) // 向下滑出
slideUp([speed, [easing], [fn]]) // 向上滑入
slideToggle([speed, [easing], [fn]]) // 切换滑动

③jQuery切换事件
hover([over], out);
over:鼠标经过元素要触发的函数，相当于mouseenter
out：鼠标移出元素要触发的函数，相当于mouseleave
如果参数只写一个，那么鼠标经过和离开都会触发这个函数

④jQuery停止动画排队stop方法
stop()方法用于停止动画或效果，写在动画或效果的前面，相当于停止上一次的动画，jQuery动画都会有排队的问题，所以只要做动画，基本都要做停止排队。

$(element).mouseover(function() {
	$(this).children().stop().slideToggle();
})

⑤淡入淡出效果

fadeIn([speed, [easing], [fn]]) // 淡入
fadeOut([speed, [easing], [fn]]) // 淡出
fadeToggle([speed, [easing], [fn]]) // 切换
fadeTo(speed, opacity, [easing], [fn]]) // 渐进方式调整到指定的不透明度

⑥自定义动画

animate(params, [speed], [easing], [fn]);

params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，复合属性驼峰命名

4 .jQuery属性操作
①设置或获取元素固有属性 href、src、checked等
获取

prop('属性')

设置

prop('属性', '值')

②设置或获取自定义属性
获取

attr('属性');

设置

attr('属性', '值')

③数据缓存
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。

<body>
	<div data-index="1">
	
	</div>
	<script>
		$('div').data('uname', 'demo');
		console.log($('div').data('uname')); // demo
		// data() 方法可以获取自定义属性
		$('div').data('index'); // 1 (Number类型)
	</script>
</body>

5 . 文本属性值
主要针对元素的内容和表单的值进行操作
①普通元素内容html(),相当于原生的innerHTML
获取：

html();

设置：

html('内容');

②只操作普通文本内容text()，相当于原生的innerText
获取：

text();

设置：

text('内容');

③设置或者获取表单的值val(),相当于原生的value
获取：

val();

设置：

val('内容');

④表单内容状态改变（如复选框的checked、表单文本值等）事件 change
1 .当复选框的选中状态发生改变时，就会触发的事件

$("input").change(function(){})

2 .复选框状态选择器 :checked
返回复选框状态checked为true的表单元素，以伪数组形式存储

$("input:checked").length;

⑤返回指定元素的指定祖先元素 parents()

$(".son").parents(".father");

⑥ 保留指定浮点数的小数位数
toFixed(n);

var num = 1 / 2;
console.log(num.toFixed(3)); // 0.500

6 .元素操作
①遍历元素
jQuery隐式迭代是对同一类元素做了相同的操作，如果想要给同一类元素做不同操作，就需要用到遍历
each()方法遍历元素：

$("div").each(function(index, DOMEle) { jQueryCode })

index:索引号
DOMEle：每个DOM元素，不是jQuery对象，要使用$包装后才能使用jQuery方法，否则只能使用原生JS方法。

$.each()方法遍历元素：

var arr = [1, 2, 3];
$.each(arr, function(index, value) {
	jQueryCode
})

$.each()方法可以用于遍历任何对象，主要用来处理数据，比如遍历数组、对象
index同样是索引（遍历对象时，index为key），value是遍历的内容（值）

②元素的创建、添加和删除
创建元素：

var li = $("<li></li>"); // 创建一个li标签

添加元素：

$("ul").append(li); // 内部添加 添加的元素在ul内部元素的最后面
$("ul").prepend(li); // 最前面

var div = $("<div></div>");
$("div").before(div); // 外部添加 添加的元素在目标元素div的前面
$("div").after(div); // 目标元素的后面

移除元素：

$("div").remove(); // 删除指定元素div本身
$("ul").empty(); // 删除指定元素中所有子节点
$("ul").html(""); // 清空指定元素中的内容，基本等同empty

7 .尺寸、位置操作
jQuery尺寸：返回值均为数字型，不带单位
①width()/height() 获得元素的宽度和高度

②innerWidth()/innerHeight() 获得元素包含padding的宽度和高度

③outerWidth()/outerHeight() 获得元素包含padding、border的宽度和高度

④outerWidth(true)/outerHeight(true) 获得元素包含padding、border、margin的宽度和高度
以上参数为空，返回相应值，参数为数字，则是修改相应值

jQuery位置：
①offset()设置获取元素相对于文档的偏移坐标，和父级没有任何关系

// 获取：
$(element).offset();
$(element).offset().top;
$(element).offset().left;
// 设置
$(element).offset({ top: 200, left: 300 });

②position()获取元素对于带有定位父元素的偏移坐标，如果父级都没有定位，则以文档为准。
position()方法只能获取，不能设置

// 获取：
$(element).position();
$(element).position().top;
$(element).positon().left;

③scrollTop()和scrollLeft()设置获取元素被卷去的头部和左侧。

// 获取页面被卷去的头部
$(document).scrollTop();
// 设置页面被卷去的头部
$(document).scrollTop(100);

gh100330

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
7
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录