初级Jquery

75 阅读 0 评论 50 点赞

我是靠谱客的博主乐观汉堡，最近开发中收集的这篇文章主要介绍初级Jquery，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近刚好在用Jquery 很多语法都不太熟悉了然后整理了一些

Jquery的基本语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	<script>
		//窗体加载事件
		window.onload=function(){
			console.log("窗体加载事件");
		}
		//文档就绪函数
		$(document).ready(function (){
			//所以js或jQuery代码
			console.log("jquery代码");
		})
		//文档就绪函数的简化写法
		$(function(){
			console.log("jquery的简化写法");
		})
		
	</script>
	</head>
	<body>
	</body>
</html>

Jquery的语法结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		/*
			jquery语法结构:
					$(selector).action()
					$():工厂函数 将DOM对象转换成jQuery对象
					selector:选择器 选取页面上的标签元素
					action:jQuery方法 
		*/
	   //文档就绪函数
	   $(function(){
		   //通过选择器获取标签对象 同时绑定单击事件
		   $("p").click(function(){
			   console.log(666);
		   });
	   })
	   //1.引入jQuery库文件 2.书写文档就绪函数 3.按照语法结构编写jQuery代码
	  $(function(){
		  // $("p").css({"background-color":"red","color":"green"});
		  
	  })
	</script>
	</head>
	<body>
		<div>
			<p>段落1</p>
			<p>段落2</p>
		</div>
	</body>
</html>

Jquery的常用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.aa{
				background-color: aqua;
			}
			.bb{
				font-size: 40px;
			}
		</style>
	<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		//文档就绪函数
		$(function(){
			/*
			jquery常用方法:
				addClass() 给标签添加一个Class属性
				css() 给标签设置相关的css样式
				next() 获取相邻的下一个元素
			*/
		   // $("p").addClass("aa");//添加一个class属性
		   // $("p").addClass("aa bb");//添加多个class属性 用空格隔开
		   // $("#one").removeClass("aa");//移除class属性
		   // $("#one").css("background","yellow");//设置一个样式
		   // $(".cc").css({"color":"red","font-size":"50px"});//设置多个样式
		   // $("one").next().css({"color":"red","font-size":"50px"});//设置多个样式
		})
	</script>
	</head>
	<body>
		<p>段落1</p>
		<p id="one">段落2</p>
		<p class="cc">段落3</p>
	</body>
</html>