Vor kurzem habe ich nur Jquery verwendet und bin mit vielen Grammatiken nicht sehr vertraut, also habe ich einige aussortiert
- Grundlegende Syntax von 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>
- Die grammatikalische Struktur von 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>
- Gängige Methoden von 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>
Bitte korrigieren Sie mich, wenn ein Fehler vorliegt