JQuery总结1
`1.什么是JQuery
2.JQ的引入
3.文档就绪事件
4.JQ选择器（重点）`
1.什么是JQuery
- JQ就是一个轻型的JS函数库（JS简略框架）
- 要在html中应用jq，就必须先引入jq函数库文件。
2.JQ的引入
//在应用JQ之前，先引入JQ文件
<script src="JQ文件门路">3.文档就绪事件
- 下列代码运行出错，因为在运行alert的时候，浏览器还没有加载到body中的div，浏览器的内存中还没有div，所以会出错。
<head>
<script>
var div_1 = document.getElmentById("d1");
alert(div_1.innerHTML);
</script>
</head>
<body>
<div id=d1>滴滴滴滴</div>
</body>解决方案：
- （1）将
<script>移到<body>中的<div>之后，浏览器就会先加载<div> - （2）将获取的标签放在文档就绪函数当中，浏览器在加载完所有html元素后，执行文档就绪函数，因而就能加载要加载的元素。
<head>
// 应用JQ之前，需先引入jQ文件
<script src="JQ文件门路"/>
<script>
$(function(){
var div_1 = document.getElmentById("d1");
alert(div_1.innerHTML);
});
</script>
</head>
<body>
<div id=d1>滴滴滴滴</div>
</body>- （3）将事件放在一个点击事件中，点击再触发
<head>
<script>
var DD = function(){
var div_1 = document.getElmentById("d1");
alert(div_1.innerHTML);
}
</script>
</head>
<body>
<div id=d1 onclick="DD()">滴滴滴滴</div>
</body>- 那么什么时候要应用就绪函数？
*如果在元素还没加载之前，就获取元素时，就须要应用就绪函数。
*JQ的文档就绪函数
$(function(){
//浏览器加载实现HTML后，会执行这的代码
})*JS的文档就绪函数
window.onload = function(){
//浏览器加载实现HTML后，会执行这的代码
}4.JQ选择器（重点）
*（1）根本选择器
//1.元素选择器
$("div")选中所有的div $("sapan")
//2.id选择器
$("#one")选中id为one的元素
//3.class选择器
$(".two")选中class为two的元素
//4.多元素选择器
$("div,span,.s1.#one")选中所有的div元素，span元素，class为s1的元素，id为one的元素
*（2）层级选择器
$("div span") //选中div下的所有span元素
$(".s1 div") //选中class为s1的所有div元素
$("#two+div") //选中id为two的元素前面紧邻的div元素
$("#two").next("span") //选中id为two的元素的前面紧邻的span元素
$("#two").prev("span") //选中id为two的元素的后面紧邻的span元素
$("#two~span") //选中id为two的元素前面的所有span元素
$("#two").nextAll("span") //选中id为two的元素前面的所有span元素
$("#two").prevAll("span") //选中id为two的元素后面的所有span元素
$("#two").slibings("span") //选中id为two的元素前后所有的span元素
*（3）根本过滤选择器
//抉择第一个div
$("div:firsht")
$("div:eq(0)")
$("div").eq(0)
//抉择最初一个div
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)
//抉择第n+1个div
$("div:eq(n)")
$("div").eq(n)
发表回复