jQuery入门教程

最新推荐文章于 2026-03-29 04:19:29 发布

转载最新推荐文章于 2026-03-29 04:19:29 发布 · 7.5k 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/Fiki515/article/details/124806334?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22124806334%22%2C%22source%22%3A%22Fiki515%22%7D&ctrtid=VUGxh

标签

#jquery #javascript #前端

html 同时被 3 个专栏收录

10 篇文章

订阅专栏

javascript

8 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍了jQuery的基础知识，包括jQuery是什么、如何引入、DOM对象与jQuery对象的转换、入口小函数$（document）.ready()及其与window.onload的区别。详细讲解了jQuery的选择器分类，如基本选择器、层次选择器、过滤选择器，以及表单选择器的用法。此外，还探讨了jQuery中的方法，如显示、隐藏、样式设置、内容操作和动画效果。通过对这些概念和实践的解析，帮助读者快速掌握jQuery的基本操作。

一、jQuery是什么？

jQuery是一种方法库

语法：$ jQuery

二、jQuery文件引用

1、本地引用

语法：<script type="text/javascript" src="jquery.js"></script>

2、远程调用：

语法：<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery1.4.min.js"></script>

注意：需要在连网的情况下使用

三、jQuery对象与dom对象转换

1、dom对象转换为jQuery对象 $（dom对象）

2、jquery对象转换为dom对象（jquery对象[索引号]、jquery对象.get[索引号]）


 <body>
    <div id="box">hello div</div>
    <div id="box2">hello div</div>
  </body>
  <script>
    //   原生js 操作css
    var _div = document.getElementById("box");
    // _div.style.color = "red";
    // _div.style.width = "200px";
 
    // dom对象转换为jquery
    // $(dom对象)
 
    // jQuery(_div).css("color", "#00f");
    // $(_div).css("color", "#00f");
    // $(_div).css({ width: "200px", height: "100px", color: "yellow" });
 
    // $("#box") === $(document.getElementById("box"));
 
    // jquery对象 转换为 dom对象
    // jquery对象[索引]
    // jquery对象.get(索引)
 
    // $("div")[1].style.backgroundColor = "red";
    // $("div").get(0).style.backgroundColor = "red";
    $("#box").get(0).style.color = "#990";
 
    // jquery对象 转换为 dom对象
    // jquery对象[索引]
    // jquery对象.get(索引)
 
    // dom对象转换为jquery
    // $(dom对象)
 
    // jquery样式操作
    // 添加一条样式
    // jquery对象.css("样式属性名" , "属性值")
 
    // 添加多条样式
    // jquery对象.css({"样式属性名" : "属性值" , "样式属性名" : "属性值" , ...});
 
    // 获取样式
    // jquery对象.css("属性名")
  </script>

四、jQuery入口小函数

语法：$（document）.ready（function（）{}）

简写：$(function()})

1、$（document）.ready（）与window.οnlοad=function（）{}的区别

	window.onload	$(document).ready()
执行时机	必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码
执行次数	只能执行一次，如果第二次，那么第一次的执行会被覆盖	可以执行多次，第N次都不会被上一次覆盖

五、在页面中得到DOM对象

1、JavaScript中得到DOM对象document.getElementById(“menu”)

2、jQuery得到jquery对象 $(“#menu”)

六、jQuery选择器分类

1、基本选择器

选择器	描述	返回	示例
#id	根据指定的id匹配元素	单个元素	$(“#hel”)选择id=hel的元素
.class	根据类匹配元素	集合元素	$(“.hel”)选择class=hel的元素
Element	根据元素名匹配元素	集合元素	$(“div”)选择所有的div元素
*	匹配所有元素	集合元素	*$(“”)选择所有元素**
E1,E2,E3	分组匹配元素	集合元素	$(“div,span,.hotclass”)选择所有div，span,和class为hotcalss的元素

2、层次选择器

选择器	描述	返回值	示例
$(“E1 E2”)	选择E1下所有E2	集合元素	$(“div span”)选择div下所有span
$(“E1> E2”)	选择E1下的子E2,不包含E2下满足的元素	集合元素	$(“div > span”)选择div下的span元素，不包含span下的span元素
$(“E1+ E2”)	选择E1后紧相邻的E2	集合元素	$(“.one + div”)选择class=one的下一个div元素
$(“E1~ E2”)	选择E1之后的所有E2	集合元素	$(“#one ~ div”)选择id为one后的所有div元素
补充说明： $(“E1 + E2”)可以用$(E1).next(E2)代替 $(“E1 ~ E2”)可以用$(E1).nextAll(E2)代替


<body>
    <div>hhhh</div>
    <span>hello 0</span>
    <div class="box">hello div</div>
    <span>hello span1 <b>hhhh </b></span>
    <span>hello span2</span>
    <b>hh b</b>
  </body>
  <script>
    $(document).ready(function () {
      //   $(".box+span").css("color", "red");
      //   $(".box~span").css("color", "gold");
      //兄弟间查找方法
      //   $(".box").next().css("background-color", "blue");
      //   $(".box").next("span").css("background-color", "blue");
      //   $(".box").nextAll().css("color", "green");
      //   $(".box").nextAll("b").css("color", "green");
 
      //   $(".box").prev().css("color", "pink");
      //   $(".box").prev("span").css("color", "pink");
      //   $(".box").prevAll().css("background-color", "green");
      $(".box").prevAll("span").css("background-color", "green");
    });
  </script>

3、过滤选择器

（1）基本的过滤选择器

选择器	描述	返回	示例
:first	选择第1个元素	单个元素	$(“div:first”)选择第1个div元素
:last	选择最后1个元素	单个元素	$(“div:last”)选择最后1个div元素
:not(E1)	去除所有E1选择器匹配的元素	集合元素	$(“input:not(.my)”)选择class不是.my的所有input元素
:even	选择索引是偶数的所有元素，索引从0开始	集合元素	$(“tr:even”)选择表格中所有偶数的行
:odd	选择索引是奇数的所有元素，索引从0开始	集合元素	$(“tr:odd”)选择表格中所有奇数的行
:eq(index)	选择索引值是index的元素，index从0开始	单个元素	$(“tr:eq(1)”)选择表格行索引等于1的行
:gt(index)	选择索引值大于index的元素,index从0开始	集合元素	$(“tr:gt(1) ”)选择表格行索引大于1的行
:lt(index)	选择索引值小于index的元素,index从0开始	集合元素	$(“tr:lt(1)”)选择表格行索引小于1的行
:header	所取所有的标题元素,h1~h6	集合元素	$(“:header”)选择网页中所有的<h1>,<h2>…<h6>
:animated	选择当前正在执行动画的所有元素	集合元素	$(“div:animated”)选择正在执行动画的div元素


<body>
    <ul>
      <li>无序列表1</li>
      <li>无序列表2</li>
      <li>无序列表3</li>
    </ul>
    <ol>
      <li>有序列表</li>
      <li>有序列表</li>
      <li>有序列表</li>
      <li>有序列表</li>
    </ol>
  </body>
  <script>
    $(document).ready(function () {
      //   $("ul li:first").css("color", "red");//文档里的第一个li元素  唯一
      //   $("ul li").first().css("color", "blue");
      //   $("ul li:last").css("color", "red");
      //   $("ul li").last().css("font-size", "30px");
      //   $("li:odd").css("background-color", "red"); //文档里【索引为奇数】li
      //   $("li:eq(0)").css("color", "red");
      //   $("li").eq(0).css("color", "red");
      //   $("li:lt(3)").css("color", "green");//索引小于3的li
      $("li:gt(3)").css("color", "green"); //索引大于3的li
 
      //   $("ul li:first-child").css("color", "red");//每一组里的第一个li子元素 可能是多个
      //   $("ul li:last-child").css("color", "red");
      //   $("ul li:nth-child(odd)").css("background-color", "red"); //每一组里【第奇数】个li
    });
 
    // get() 与 eq() 区别
    // 都是jquery对象调用  jquery对象.get(索引)  jquery对象.eq(索引)
 
    // 不同点：
    // jquery对象.get(索引)   dom对象
    // jquery对象.eq(索引)    jquery对象
  </script>

（2）内容过滤选择器

选择器	描述	返回值	示例
:contains(text)	选择含有text文本内容的元素	集合元素	$(“div:contains(‘我’)”)选择内容里包含我的所有div
:empty	选择不包含子元素或文本的空元素	集合元素	$(“div:empty”)选择不包含子元素（含文本）的所有div元素
:has(E1)	选择包含有(E1选择器匹配的元素)的所有元素	集合元素	$(“div:has(p)”)选择含有p元素的所有div元素
:parent	选择含有子元素或文本的元素	集合元素	$(“div:parent”)选择拥有子元素（包含文本）的所有div元素

（3）子元素过滤选择器

选择器	功能描述	返回值	简单示例
:nth-child(index/even/odd)	选取每个父元素下的第index个子元素或奇偶元素.(index从1开始）	集合元素	:eq(index)只匹配一个元素,而:nth-child(index)将为每一个父元素匹配子元素,并且:nth-child(index)的index从1开始,而:eq(index)的index从0开始.
:first-child	选择每个父元素的第1个子元素	集合元素	:first只选择单个元素,而:first-child将为每个父元素匹配第1个子元素如: $(“ul li:first-child”)选择每个ul下的第一个<li>
:last-child	选取每个父元素的最后1个子元素	集合元素	$(“ul li:last-child”)选择每个ul下的最后一个<li>
:only-child	如果某个元素是它父元素中惟一的子元素,那么将会被匹配.如果父元素中含有其他元素,则不会被匹配	集合元素	$(“ul li:only-child”)在<ul>中选取是惟一子元素的<li>

:nth-child()选择器详细功能描述:

:nth-child(even)能选择每个父元素下的索引值是偶数的元素
:nth-child(odd)选择出每个父元素下的索引值是奇数的元素
:nth-child(2)选取每个父元素下的索引值等于2的元素
:nth-child(3n)能选出每个父元素下的索引值是3的倍数的元素,n从0开始
:nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素.n从0开始

4、表单选择器

选择器	描述	返回值	示例
:input	匹配所有<input> <textarea> <select> <button>元素	集合元素	$(“:input”) 同描述
:text	选择所有单行文本框	集合元素	$(“:text”)匹配所有单行文本框
:password	选择所有密码框	集合元素	$(“:password”)
:radio	选择所有单选框	集合元素	$(“:radio”)
:checkbox	选择所有复选框	集合元素	$(“:checkbox”)
:submit	匹配所有提交按钮	集合元素	$(“:submit”)
:image	匹配所有图像按钮	集合元素	$(“:image”)
:reset	匹配所有重置按钮	集合元素	$(“:reset”)
:button	匹配所有按钮	集合元素	$(“:button”)
:file	匹配所有文件域	集合元素	$(“:file”)
:hidden	匹配所有不可见元素	集合元素	$(“:hidden”)

选择器中的一些注意事项：

1、特殊符号的处理

“.”、”#”、”(“、”]”

示例：

<div id=“id#b”>www.baidu.com</div>

<div id=“id[1]”>hello</div>

正确的写法：使用转义符\\将特殊符号转义 $(“#id\\#b”) $(“#id\\[1\\]”)

2、选择器中包含空格

选择器中的空格是不容忽视的，多一个空格或少一个空格会得到截然不同的结果.

如: $(“div:input”) 和 $(“div :input”)

七、jQuery中的方法初探

方法	功能描述
show()	显示隐藏的匹配元素，可带整数参数表示时间，单位是毫秒
hide()	隐藏显示的匹配元素，可带整数参数表示时间，单位是毫秒
css(name,value)	给匹配的元素设置css样式
text(string)	获取或设置匹配元素的文本内容,不包含html标签
filter(expr)	筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。
addClass(class)	为匹配的元素增加一个类样式
removeClass(class)	为匹配的元素移除一个类样式
html()	获取或设置匹配元素的内容，包含html标签
siblings()	$(“.abc”).siblings()匹配得到class=abc的其它兄弟元素

1、操作样式

（1）设置

设置单条样式 .css(“属性名”，”属性值”)

设置多条样式 .css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})

（2）获取样式

获取样式值 .css(“属性名”)

增加类可增加/删除多个类

.addClass(“类名1 类名2 ……”) 多个类名之间用空格隔开

.removeClass(“”)

.toggleClass(“”)

.toggleClass(“类名”,true/false) 用来判断样式类添加还是移除的布尔值


 <script>
    $(function () {
      $(".box").addClass("bg"); //添加类
      $("button").bind("click", function () {
        // $(".box").removeClass("bg box"); //删除类
        // $(".box").removeClass(); //清空
        // $(".box").toggleClass("fz box");
        // $(".box").toggleClass(); //removeClass()
        // $(".box").toggleClass("bg", false);//removeClass()
        $(".box").toggleClass("fz", true); //addClass()
      });
 
      // $("button").mouseover(function (ev) {}).mouseout(function(){});
      //   $("button").bind("mouseover mouseout", function (ev) {
      //     // console.log(ev); //event事件对象
      //     if (ev.type === "mouseover") {
      //       $(this).css("background-color", "red");
      //     } else if (ev.type === "mouseout") {
      //       $(this).css("background-color", "");
      //     }
      //   });
      //   $("button").bind({
      //     mouseover: function () {
      //       $(this).css("background-color", "red");
      //     },
      //     mouseout: function () {
      //       $(this).css("background-color", "");
      //     },
      //   });
    });
 
    // jquery对象.bind("事件名1 事件名2 ...", function () {});
    // jquery对象.bind({ 事件名1: function () {}, 事件名1: function () {} });
  </script>

2、操作元素中的内容：

（1）设置：

.html(“str”) 设置元素的里面的内容可用带html标签 js中的innerHTML
.text(“str”) 设置元素的里面的内容可用不带html标签 js中的innerText
.val(“str”) 设置表单的值

3、.html(),.text()和.val()的差异总结：

（1） .html(),.text(),.val()三种方法都是用来读取选定元素的内容；

只不过.html()是用来读取元素的html内容（包括html标签），
.text()用来读取元素的纯文本内容，包括其后代元素，
.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上

(2）.html()方法使用在多个元素上时，只读取第一个元素；

.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，
但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

(3) .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。

(4 ).html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

例如：$('li').html(function(n){return "被点击的元素的索引值是"+n}); 将会把所有li元素内的内容替换为返回值，并会把n值变成每个li对应的索引值

八、动画

show(speed,[callback]) //显示

hide( speed,[callback] ) //隐藏

toggle(speed,[callback])


<script>
    $(document).ready(function () {
      //   $(".box h2").click(function () {
      //     var $dis = $(this).next(".list").css("display");
      //     if ($dis === "none") {
      //       $(this).next(".list").css("display", "block");
      //       $(this).children(".sj").css("transform", "rotate(90deg)");
      //     } else {
      //       $(this).next(".list").css("display", "none");
      //       $(this).children(".sj").css("transform", "rotate(0deg)");
      //     }
      //   });
 
      $(".box h2").click(function () {
        var list = $(this).next(".list"); //当前点击的h2后的那一个ul
        list.toggle(200);
 
        // list.show(5000, function () {
        //   // console.log(this);
        //   $(this).hide(2000); //指向的是有动画的jquery对象
        // }); //回调函数
        // $(this).next(".list").hide(5000);
      });
    });
 
    // 显示与隐藏
    // jquery对象.show(参数1，参数2)
    // 参数1：可选 动画持续时间
    // 参数2：可选 回调函数  动画执行完后调用的函数
 
    // jquery对象.hide(参数1，参数2)
    // 参数1：可选 动画持续时间
    // 参数2：可选 回调函数  动画执行完后调用的函数
 
    // jquery对象.toggle(参数1，参数2)
    // 参数1：可选 动画持续时间
    // 参数2：可选 回调函数  动画执行完后调用的函数
  </script>

参数：

speed：设置显示/隐藏时的速度值，可为fast，slow或毫秒值

callback：显示或隐藏动作完成后调用的函数

toggle()方法：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）

slideUp(speed,[callback] )//往上滑动

slideDown(speed,[callback] ) //往下滑动

slideToggle() fadeIn(speed,[callback] )

fadeOut(speed,[callback] ) // 从看得见到看不见淡出 1-0

fadeIn(speed,[callback]) // 从看不见到看得见淡入 0-1

fadeTo(speed,opacity,[callback]) //设置淡入淡出效果到一定的不透明度 fadeToggle()


 <script>
    $(function () {
      // $(".box h2").click(function(){})
      $(".box h2").bind("click", function () {
        //淡入淡出
        // 从看不见到看得见 淡入 0-1  fadeIn()
        // 从看得见到看不见 淡出 1-0  fadeOut()
        // $(".list").fadeIn(5000).fadeOut(2000);
        // $(".list").fadeToggle(2000);
        $(".list").fadeTo(2000, 0.5, function () {});
 
        // 往上滑动 / 往下滑动
        // $(".list").slideDown(5000, function () {
        //   $(this).slideUp(2000);
        // });
        // $(".list").slideToggle("normal");//400
        // $(".list").slideToggle("slow");//600
        // $(".list").slideToggle("fast"); //200
        // $(".list").slideToggle(400);
        // $(".list").slideDown(5000).slideUp(5000);
        // $(".list").slideUp(5000);
      });
      //   $(".box h2").on("click", function () {
      //     console.log(111);
      //   });
      // dom.addEventListener("click",function(){})
    });
  </script>