Javascript的页面初始化事件
1.body中提供οnlοad=“函数”
2.window.οnlοad=function(){}
Jquery的初始化函数
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery的初始化函数</title>
<!--导入jquery函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
/*
$(document).ready(function(){
alert("jquery初始化函数的--原始写法");
});
*/
/*
$(function(){
alert("jquery初始化函数的--简化写法");
});
*/
//$==jQuery,当我们在程序中需要jQuery,可以使用$代替
jQuery(function(){
alert("jquery初始化函数的--简化写法");
});
</script>
</head>
<body>
</body>
</html>
实例:测试语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试jquery的语法</title>
<!--导入jquery函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
/**
* 基础语法: $(selector).action()
* 1.美元符号定义 $ -表示jQuery,jQuery表示$。我们可以使用$代替jQuery。
* 2.选择符(selector)---"查询"和"查找"需要被控制的 HTML 元素。
* 可以将被控制的 HTML 元素转换成jQuery对象。
* 3.action()指对得到的jQuery对象调用的函数/属性
*/
//$("#p1").css("font-size","50px");
//我们可以在jquery的函数中使用javascript语法。
//var pdom=document.getElementById("p1");
//alert(pdom); //[object HTMLParagraphElement]
//$(selector)jQuery的构造器[创建jQuery对象]
//var jqobj=$("#p1");
//alert(jqobj); //[object Object]
//不能使用javascript对象【dom对象】调用jQuery的函数和属性
//var pdom=document.getElementById("p1");
//pdom.css("font-size","50px");
//pdom.style.fontSize="50px";
//不能使用jquery对象调用javascript的函数和属性
//var jqobj=$("#p1");
//jqobj.style.fontSize="50px";
});
</script>
</head>
<body>
<p id="p1">测试jquery的语法</p>
</body>
</html>
Jquery对象与javascript对象的转换
1.javascript对象----》Jquery对象-------【$(javascript对象)】
2.Jquery对象------》javascript对象-----【Jquery对象.get()】
例如:
**
jQuery 选择器**
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
1.元素选择器
jQuery 元素选择器基于元素名选取元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素选择器</title>
<!--导入jquery函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//元素选择器--根据元素名称选中html元素
//$("html元素名称")
//如果需要给多个元素作用同一个动作,无需遍历
//var parry=$("p");
//parry.css("font-size","50px");
//如果需要给每一个元素作用不同一个动作,就需要遍历
var parry=$("p");
var size=20;
for(var i=0;i<parry.length;i++){
size=i*10+size;
//遍历出来的对象是javascript对象
$(parry[i]).css("font-size",size+"px");
}
});
</script>
</head>
<body>
<p>测试jquery的元素选择器1</p>
<p>测试jquery的元素选择器2</p>
<p>测试jquery的元素选择器3</p>
<p>测试jquery的元素选择器4</p>
</body>
</html>
2.#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
例如:
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>#id 选择器</title>
<!--导入jquery函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//#id 选择器--根据元素id属性值选中html元素
$("#p1").css({"font-size":"30px","color":"red"});
//当id属性值相同时只能得到第一个元素
$("#p2").css({"font-size":"40px","color":"red"});
$("#p3").css({"font-size":"50px","color":"red"});
});
</script>
</head>
<body>
<p id="p1">测试jquery的id选择器1</p>
<p id="p2">测试jquery的id选择器2</p>
<p id="p2">测试jquery的id选择器3</p>
<p id="p3">测试jquery的id选择器4</p>
</body>
</html>
**3..class 选择器**
jQuery 类选择器可以通过指定的 class 查找元素。
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<!--导入jquery函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//class选择器--根据元素class属性值选中html元素
$(".p1").css({"font-size":"30px","color":"red"});
//当class属性值相同时会得到一组
//当需要单独控制每一个元素是需要遍历,遍历的每一个元素都是javasript对象
$(".p2").css({"font-size":"40px","color":"red"});
$(".p3").css({"font-size":"50px","color":"red"});
});
</script>
</head>
<body>
<p class="p1">测试jquery的class选择器1</p>
<p class="p2">测试jquery的class选择器2</p>
<p class="p2">测试jquery的class选择器3</p>
<p class="p3">测试jquery的class选择器4</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<script>
$(function(){
//元素选择器
$("p").css("background-color","black");
//.class选择器
$("p.test1").css("color","red");
//id选择器
$("#test2").css("color","blue");
$("p:first").css("color","green");
$("ul li:first").css("font-size","30px");
$("ul li:last-child").css("font-size","40px");
$("[href]").css("font-size","20px");
$(":button").css("width","180px");
$("table").css("width","480px");
$("tr:even").css("background-color","red");
$("tr:odd").css("background-color","blue");
});
</script>
</head>
<body>
<p>测试jquery的基础语法1</p>
<p class="test1">测试jquery的基础语法2</p>
<p>测试jquery的基础语法3</p>
<p id="test2">测试jquery的基础语法4</p>
<ul>
<li>name=zhangsan</li>
<li>age=23</li>
<li>address=xian</li>
</ul>
<ul>
<li>name=lisi</li>
<li>age=23</li>
<li>address=xian</li>
</ul>
<ul>
<li><a href="#">name=wangwu</a></li>
<li><a href="#">age=23</a></li>
<li><a href="#">address=xian</a></li>
</ul>
<input type="button" value="测试button1"/>
<input type="button" value="测试button2"/>
<table border="1px">
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1003</td><td>王五</td><td>24</td><td>西安</td></tr>
<tr><td>1002</td><td>lisi</td><td>25</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1003</td><td>王五</td><td>24</td><td>西安</td></tr>
<tr><td>1002</td><td>lisi</td><td>25</td><td>西安</td></tr>
</table>
</body>
</html>
2.jQuery HTML
1.jQuery获取/设置文本元素的值
jQuery获取元素的值 text()、html() 以及 val()
text()—返回所选元素的文本内容
html()–返回所选元素的内容(包括 HTML 标记)
val()----返回表单字段的值
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取/设置html元素的文本值</title>
<!-- 导入jquery的函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
/*
jQuery获取元素的值 text()、html() 以及 val()
text()---返回所选元素的文本内容
html()--返回所选元素的内容(包括 HTML 标记)
val()----返回表单字段的值
*/
//获取元素的值
//var h1value=$("#h1").text();//不包含html标记
//var h1value=$("#h1").html();//包含html标记
//var butvalue=$(":button").val(); //获取表单元素的文本值
//jQuery设置元素的值 text(content)、html(content) 以及 val(content)
//text(content)---设置所选元素的文本内容[不解释html标记]
//html(content)--设置所选元素的内容[解释html标记]
//val(content)----设置表单字段的值
//$("#h1").text("<font color='red'>设置文本元素的值</font>");
//$("#h1").html("<font color='red'>设置文本元素的值</font>");
//$(":button").val("设置表单元素的值");
//javaSctipt jQuery
//innerText text([content])
//innerHTML html([content])
//value val([content])
});
</script>
</head>
<body>
<h1 id="h1">获取/设置<a href="#">h1</a>元素的文本值</h1>
<input type="button" value="测试val()" />
</body>
</html>
jQuery - 添加元素
append() - 在被选中元素中插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加元素</title>
<style>
#div1{
width: 500px;
height: 500px;
background-color: red;
}
</style>
<!-- 导入jquery的函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//jquery--添加元素
//append() - 在被选中元素中插入内容[最后一个元素在最后]
//$("#div1").append("文本数据值");
//$("#div1").append("<h1>文本数据值</h1>");
$("#div1").append("<img src='imgs/open.PNG'/>");
//prepend() -在被选中元素中插入内容[最后一个元素在最前]
//$("#div1").prepend("文本数据值");
//$("#div1").prepend("<h1>文本数据值</h1>");
//$("#div1").prepend("<img src='imgs/open.PNG'/>");
//after() - 在被选元素之后插入内容
$("#div1").after("<img src='imgs/open.PNG'/>");
//before() - 在被选元素之前插入内容
$("#div1").before("<img src='imgs/open.PNG'/>");
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
Query - 删除元素
remove() - 删除被选元素(及其子元素)【有过滤功能】
empty() - 从被选元素中删除子元素
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除元素</title>
<style>
#div1{
width: 450px;
height: 450px;
background-color: red;
}
</style>
<!-- 导入jquery的函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//jquery--删除元素
//remove() - 删除被选元素(及其子元素)【有过滤功能】
//empty() - 从被选元素中删除子元素
//$("#div1").remove();
//$("#div1").empty();
});
</script>
</head>
<body>
<div id="div1">
<h1>测试删除元素</h1>
<img src="imgs/open.PNG"/>
</div>
</body>
</html>
3.jquery的CSS 操作
1.为元素添加不存在的样式
css(样式属性名称,属性值) 设置被选元素的具有这个样式。
css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。
2.为元素添加已经存在的样式
addClass() - 向被选元素添加一个或多个样式类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置css样式</title>
<!-- 导入jquery的函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<style>
.div1{
width: 200px;
height: 200px;
background-color: black;
}
</style>
<script>
$(function(){
//当没有样式存在时
//css() - 设置样式
//1.css(样式属性名称,属性值) 设置被选元素的具有这个样式。
//$("#p1").css("font-size","50px");
//2.css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。
$("#p1").css({"font-size":"50px","color":"red"});
//当有样式存在时,没有作用在元素上
//addClass() - 向被选元素添加一个或多个样式类
$("#but1").click(function(){
$("#div1").addClass("div1");
});
//removeClass() - 从被选元素删除一个或多个类
$("#but2").click(function(){
$("#div1").removeClass("div1");
});
//toggleClass() - 对被选元素进行添加/删除类的切换操作
$("#but3").click(function(){
$("#div1").toggleClass("div1");
});
});
</script>
</head>
<body>
<p id="p1">测试设置css样式</p>
<input id="but1" type="button" value="addClass()"/>
<input id="but2" type="button" value="removeClass()"/>
<input id="but3" type="button" value="toggleClass()"/>
<div id="div1"></div>
</body>
</html>
3.获取元素样式
css(样式属性名称) 返回被选元素的指定样式属性值。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取样式属性值</title>
<style>
p{
font-size: 50px;
color: red;
}
</style>
<!-- 导入jquery的函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
css(样式属性名称) 返回被选元素的指定样式属性值。
var size=$("p").css("font-size");
alert(size);
});
</script>
</head>
<body>
<p>测试获取样式属性值</p>
</body>
</html>