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)

JQuery总结1

JQuery总结1

1.什么是JQuery

2.JQ的引入

3.文档就绪事件

4.JQ选择器（重点）

流浪成疯

引用和评论

在linux上部署项目