初识jQuery

最新推荐文章于 2024-07-17 09:44:02 发布

weixin_46143669

最新推荐文章于 2024-07-17 09:44:02 发布

阅读量91

点赞数

分类专栏： JS学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46143669/article/details/106708585

版权

JS学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.jQuery的作用
HTML元素选取、元素操作、CSS操作、HTML事件函数、js特效和动画、HTML DOM遍历和修改、AJAX、Utilities

化大为小，化繁为简，用来替代原生JavaScript

IE 6/7/8 兼容最高版本为jQuery1.9.1

优势：轻量级、强大的选择器、出色的DOM操作及其封装、可靠的事件处理机制、完善的Ajax、不污染顶级变量、出色的浏览器兼容性、链式操作方式、隐式迭代、行为层和结构层分离、丰富的插件支持

目标：看懂jquery的源代码

2.jquery的引入与$符号

<head>
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript" src = "js/script.js"></script>
</head>

$ 符号 == jQuery符号
jQuery把所有功能都封装在一个全局变量jQUery中，而$也是一个合法的变量名，它是jQuery的别名

window.jQuery;//jQuery(selector,context)
window.$;//jQuery(selector,context)
$ === jQuery; //true
typeOf($); //'function'

绝大多数时候，直接使用 $，如果被占用，且不能改，就只能使用jQuery这个变量

$;//jQuery(selector,context)
jQuery.noConflict();//释放变量 $
$;//undefined
jQuery;//jQuery(selector,context)

3.jQuery的书写格式
不变的宗旨是你用什么就选什么

$;         //jQuery(selector,context)
jQuery;    //jQuery(selector,context)

$('div').addClass('div');
jQuery('div').addClass('div');

原始格式

$(document).ready(function(){//获取document对象，并在所有都已经ready情况下运行
	$('div').addClass('div');
});

缩写格式

$().ready(function(){//省略document对象
	$('div').addClass('div');
});
$(funciton(){//省略document和ready
	$('div').addClass('div');
})

建议使用原始格式！

3.案例
ctrl + shift + h 格式化代码

display:flex;
justify-content:space-between;
两个属性结合使用可以让元素在容器中左右均匀分布，最常用于移动端开发

vw:相对单位，1vw等于可视窗口宽度的1%
vh：相对单位，1vh等于可视窗口宽度的1%

static状态的元素与absolute元素重叠时，永远在下方，可以将其改为relative或控制z-index调整压盖顺序

z-index: 3;
position: relative;

利用拔河效应达到居中效果

//水平垂直居中
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
margin:auto;

//水平居中
position:abusolute;
left:0;
right:0;
margin:0 auto;

//垂直居中
position:abusolute;
top:0;
bottom:0;
margin:auto 0;

jQuery写法：可以在“.”处回车换行，不影响效果

$(document).ready(function(){//获取document,并在ready之后运行
	$("a").click(function(){//获取所有 a 标签，并绑定click事件
		$("img")//获取所有的img标签
		.eq($(this).index())//eq()用于选择对应的img，$(this)获取当前发生事件的a，index()获取a的顺序号
		.css({'opacity':'1'})//css()方法内通过{}操作css属性，键值对都是字符串
		.siblings()//获取选中的img标签的所有兄弟标签
		.css({'opacity':'0'});
	});
});

4.方法介绍
css()方法，参数为对象，用于设置CSS属性，作用于jQuery对象，类似style
eq()方法，参数为变量或数字，与jQuery对象联用，用于获取对象–alinks.eq(i) == alinks[i]
text()方法，作用于jQuery对象，用于改变它内部的文本
html()方法，用于插入html标签及内容，类似innerHTML

var alinks = $('a');
for(var i=alinks.length-1;i>=0;i--){
	alinks.eq(i).css({
		'background':'red',
		'color':'#fff'
	}).html('<strong>aaaa<strong>')
	.text('asdf');//若html后跟text方法，会覆盖掉插入的标签和内容
}

weixin_46143669

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识jQuery

1.jQuery的作用HTML元素选取、元素操作、CSS操作、HTML事件函数、js特效和动画、HTML DOM遍历和修改、AJAX、Utilities化大为小，化繁为简，用来替代原生JavaScriptIE 6/7/8 兼容最高版本为jQuery1.9.1优势：轻量级、强大的选择器、出色的DOM操作及其封装、可靠的事件处理机制、完善的Ajax、不污染顶级变量、出色的浏览器兼容性、链式操作方式、隐式迭代、行为层和结构层分离、丰富的插件支持目标：看懂jquery的源代码2.jquery的引入与$符
复制链接

扫一扫