关于jquery:JQuery总结1

47次阅读

共计 1689 个字符，预计需要花费 5 分钟才能阅读完成。

`1. 什么是 JQuery
2.JQ 的引入
3. 文档就绪事件
4.JQ 选择器（重点）`

JQ 就是一个轻型的 JS 函数库（JS 简略框架）
要在 html 中应用 jq，就必须先引入 jq 函数库文件。

// 在应用 JQ 之前，先引入 JQ 文件
<script src="JQ 文件门路">

下列代码运行出错，因为在运行 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 后，会执行这的代码}

*（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)

正文完