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

最新推荐文章于 2022-11-04 15:14:11 发布

TomLazy

最新推荐文章于 2022-11-04 15:14:11 发布

阅读量145

点赞数

分类专栏：日常学习文章标签： jquery

本文链接：https://blog.csdn.net/qq_41071754/article/details/108376248

版权

日常学习专栏收录该内容

82 篇文章 8 订阅

订阅专栏

①. 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中

<head> <script type="text/javascript" src="jquery-3.4.1.js"></script> </head>

②. 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>
    <!--
      id选择器唯一
      class可以实现批量操作
    -->
    <p id="p01" class="cp01">段落1</p>
    <p id="p02" class="cp01">段落2</p>
    <p id="p03">段落3</p>
    <!--
        #：跳转至页面本身
        javascript:void(0)：禁用a链接的跳转显示
    -->
    <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文件

TomLazy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
你不得不知道的jQuery基础（1）

jQuery：jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它通过一个易于使用的 API 使 HTML 文档遍历和操作、事件处理、动画和 Ajax 等操作更简单，该 API 可跨多种浏览器工作。jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。
复制链接

扫一扫