Python学习 Day37 jQuery框架01

最新推荐文章于 2022-05-02 18:56:36 发布

ShengXIABai

最新推荐文章于 2022-05-02 18:56:36 发布

阅读量293

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ShengXIABai/article/details/115447854

版权

前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

jQuery框架

一、jQuery基本概述

jQuery是一个快速简洁的JavaScript框架，属于JavaScript代码
jQuery的设计宗旨是：write Less，Do More，写更少的代码，做更多的事
它封装了JS常用的功能代码，提供一种简便的JS设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

jQuery的核心特性可以总结为：

【1】具有独特的链式语法（连续打点）和短小清晰的多功能接口（封装的函数）
【2】具有高效灵活的css选择器，并且可对CSS选择器进行扩展
【3】jQuery兼容各种主流浏览器，如IE6.0+ FF1.5+ Safari2.0+ Opera9.0+

二、引包

概述：我们目前而言，接触过的文件类型有css、html、js。JS这门脚本语言需要嵌套在静态页面中才可以执行
独立JS文件【书写JS语法】不能单独运行，需要在静态页面中引入
注意：JS文件当中可以书写JS代码，JS脚本语言（代码），需要嵌套在静态页面中才可以执行
引包：静态页面引入JS文件，让静态页面给JS文件提供执行环境

语法格式：

< script type=“text/javascript” src=’./jQuery.js '> < /script> 一般放在head中

jQuery下载地址：http://www.jq22.com/jquery-info122

注意：JQ有三个版本1/2/3，并不是最新的就是最好的，2.0以上版本不再支持IE 6/7/8，根据需求选择

jQuery使用：编辑器中新建一个JS文件，将所需要的JQ文件复制到其中，再通过语句在head中进行引包

<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引包：JS中的代码不能独立运行，需要在静态页面的环境才可以运行-->
		<script type="text/javascript" src="js/jQuery.min.js"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				position: relative;
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
	</head>
	<body>
		<ul>
			<!--快捷键 ul>li*10 + tab键-->
			<li>水面清圆</li>
			<li>水面清圆</li>
			<li>水面清圆</li>
			<li>水面清圆</li>
			<li>水面清圆</li>
			<li>水面清圆</li>
			<li>水面清圆</li>
			<li>水面清圆</li>
			<li>水面清圆</li>
			<li>水面清圆</li>
		</ul>
		<div>一一风荷举</div>
	</body>
</html>
<script type="text/javascript">
	$('li').click(function(){
		$(this).css({'background':'red'});
	});
	
	$('div').animate({'left':1000},1000);
</script>

在这里插入图片描述

三、jQuery框架基本使用

概述：jQuery是前端当中非常优秀的一个JS函数库，这个函数库对外暴露一个 $ () 函数

它是jQuery函数库非常核心的一个函数，可以用来匹配节点树上的标签
注意：jQuery函数库支持我们曾经学习过的所有选择器：*【通配选择器】、标签、类、id选择器等
JQ支持链式语法，连续打点【永远是$函数开头的】
CSS函数也是JQ函数提供的，用来设置行内样式
JQ对象才可以使用JQ里面的方法

<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引包-->
		<script type="text/javascript" src="js/jQuery.min.js"></script>
	</head>
	<body>
		<ol>
			<li>吃饭</li>
			<li class="cur">睡觉</li>
			<li id="study">学习</li>
			<li>游戏</li>
			<li>听音乐</li>
			<li>看电影</li>
			<li>跑步</li>
			<li>
				<ul>
					<li>水面清圆</li>
					<li>一一风荷举</li>
				</ul>
			</li>
		</ol>
		<p class="cur">我是一个段落</p>
	</body>
</html>
<script type="text/javascript">
	/*
	 jQuery函数库对外暴露的是一个$函数，$函数是JQ框架中最核心的函数，可以获取节点
	 JQ函数库支持我们曾经学习过的所有选择器，用来获取相应节点
	 */
	//标签选择器
	$("li").css("color","red");
	//类选择器
	$(".cur").css("background","cyan");
	$('#study').css('font-size',40);

在这里插入图片描述

ShengXIABai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Python学习 Day37 jQuery框架01

jQuery框架一、jQuery基本概述jQuery是一个快速简洁的JavaScript框架，属于JavaScript代码jQuery的设计宗旨是：write Less，Do More，写更少的代码，做更多的事它封装了JS常用的功能代码，提供一种简便的JS设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互jQuery的核心特性可以总结为：【1】具有独特的链式语法（连续打点）和短小清晰的多功能接口（封装的函数）【2】具有高效灵活的css选择器，并且可对CSS选择器进行扩展【
复制链接

扫一扫