你不得不知道的jQuery基础（1）

tech2022-09-22 109

①. jquery的安装

②. jQuery的语法

③. jQuery的选择器

④. 独立使用js文件

①. jquery的安装

jQuery：jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它通过一个易于使用的 API 使 HTML 文档遍历和操作、事件处理、动画和 Ajax 等操作更简单，该 API 可跨多种浏览器工作。jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。 jquery-3.4.1.js JavaScript 源码文件（开发环境js文件）[学习时选用] 优点：可读性较好，易于debug和更改.缺点：体积较大，传输时间长jquery-3.4.1.min.js 压缩版的js文件（生产环境js文件）优点：体积较小传输快, 源码防窃缺点：可读性差

// 一般我们建议把script写在body中

②. jQuery的语法

jQuery的语法基本语法：$("选择器名称").函数名(); 实例： $(this).hide(); - 隐藏当前元素 $("p").hide(); - 隐藏所有的p标签 $("p.test").hide(); - 隐藏类名为test的p标签 $("#test").hide(); - 隐藏id为test的标签 // 点击使div消失 <script> $("div").click(function(){ $(this).hide(); }); </script> 文档就绪事件（jQuery的入口函数）：$(document).ready(function(){

}); 或者简写为：$(function(){

});

onload与ready的区别

window.onload()

$(document).ready()

执行时机

在页面所有元素（包括图片，引用文件）加载完后执行。

页面中所有HTML DOM，CSS DOM结构加载完之后就会执行，其他图片可能没有加载完.

如果想要网页所有内容（包括图片等）加载完毕，再注册事件，使用$(window).load(function);

等价于window.onload()

编写个数

不能同时写多个，后面的将会覆盖前面的。ex:

window.οnlοad=function(){ alert("A"); }

window.οnlοad=function(){ alert("B"); }

结果会执行“B”

如果想要顺序执行alert("A")和alert("B")需写成

window.οnlοad=function(){

alert("A");

alert("B");

}

可以同时写多个

简写

无

$(document).ready(function(){

　　//to do;

})；

可写成

$().ready(function(){ //$()不带参数默认是document

　　//to do;

});或

$(function(){

　　//to do;

});

// 显示/隐藏操作例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示/隐藏页面中所有p标签</title> </head> <body>  <p id="p01" class="cp01">段落1</p> <p id="p02" class="cp01">段落2</p> <p id="p03">段落3</p>  <a id="hide" href="javascript:void(0)">隐藏</a> <a id="show" href="javascript:void(0)">显示</a> <script type="text/javascript" src="../js/jquery-3.4.1.js"></script> <script> // a标签的单击事件函数 $("#hide").click(function (){ $("p").hide(); }); $("#show").click(function (){ $("p").show(); }); </script> </body> </html>

③. jQuery的选择器

选择器

实例

选取

$("*")

所有元素

#id

$("#lastname")

id="lastname" 的元素

.class

$(".intro")

所有 class="intro" 的元素

element

$("p")

所有 <p> 元素

.class.class

$(".intro.demo")

所有 class="intro" 且 class="demo" 的元素

:first

$("p:first")

第一个 <p> 元素

:last

$("p:last")

最后一个 <p> 元素

:even

$("tr:even")

所有偶数 <tr> 元素

:odd

$("tr:odd")

所有奇数 <tr> 元素

:eq(index)

$("ul li:eq(3)")

列表中的第四个元素（index 从 0 开始）

:gt(no)

$("ul li:gt(3)")

列出 index 大于 3 的元素

:lt(no)

$("ul li:lt(3)")

列出 index 小于 3 的元素

:not(selector)

$("input:not(:empty)")

所有不为空的 input 元素

:header

$(":header")

所有标题元素 <h1> - <h6>

:animated

所有动画元素

:contains(text)

$(":contains('W3School')")

包含指定字符串的所有元素

:empty

$(":empty")

无子（元素）节点的所有元素

:hidden

$("p:hidden")

所有隐藏的 <p> 元素

:visible

$("table:visible")

所有可见的表格

s1,s2,s3

$("th,td,.intro")

所有带有匹配选择的元素

[attribute]

$("[href]")

所有带有 href 属性的元素

[attribute=value]

$("[href='#']")

所有 href 属性的值等于 "#" 的元素

[attribute!=value]

$("[href!='#']")

所有 href 属性的值不等于 "#" 的元素

[attribute$=value]

$("[href$='.jpg']")

所有 href 属性的值包含以 ".jpg" 结尾的元素

:input

$(":input")

所有 <input> 元素

:text

$(":text")

所有 type="text" 的 <input> 元素

:password

$(":password")

所有 type="password" 的 <input> 元素

:radio

$(":radio")

所有 type="radio" 的 <input> 元素

:checkbox

$(":checkbox")

所有 type="checkbox" 的 <input> 元素

:submit

$(":submit")

所有 type="submit" 的 <input> 元素

:reset

$(":reset")

所有 type="reset" 的 <input> 元素

:button

$(":button")

所有 type="button" 的 <input> 元素

:image

$(":image")

所有 type="image" 的 <input> 元素

:file

$(":file")

所有 type="file" 的 <input> 元素

:enabled

$(":enabled")

所有激活的 input 元素

:disabled

$(":disabled")

所有禁用的 input 元素

:selected

$(":selected")

所有被选取的 input 元素

:checked

$(":checked")

所有被选中的 input 元素

④. 独立使用js文件

最新回复(0)