jQuery基本用法与示例代码（全干货）

最新推荐文章于 2025-02-03 13:25:19 发布

Hello3q3q

最新推荐文章于 2025-02-03 13:25:19 发布

阅读量1.3w

点赞数 11

分类专栏： Java 文章标签： js javascript java css

本文链接：https://blog.csdn.net/weixin_45727931/article/details/111247768

版权

Java 专栏收录该内容

63 篇文章

订阅专栏

jQuery基本用法

一、 jQuery介绍
二、 jQuery选择器
三、 jQuery的DOM操作
- 1. jQuery对DOM树中的文本和值进行操作
- 2. jQuery对DOM树中的属性进行操作
四、 jQuery的遍历

一、 jQuery介绍

本文只简单介绍jQuery基本用法，更多信息可以参考菜鸟教程

1. jQuery概述

jQuery是一个快速、简洁的JavaScript库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JQuery封装了JavaScript常用的功能代码，提供了一套易于使用的API，可以跨多种浏览器工作，使HTML文档的遍历和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。

2. jQuery的下载与引入

jQuery的官方下载地址：http://www.jquery.com
jQuery的引入

在需要使用jQuery的html中使用js的引入方式进行引入，如下：

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

jQuery引入成功的测试

$(function(){ 代码 })

关键代码解释:
- 是指 $(document).ready(function(){}) 的简写
- 用来在DOM加载完成之后，自动执行一系列预先定义好的函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Jquery引入</title>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" ></script>
		<script type="text/javascript">
			<!-- Jquery引入的测试 -->
			$(function(){
				alert("执行Jquery的语法成功");
			})
		</script>
	</head>
	<body>
		
	</body>
</html>

3. jQuery对象与js对象之间的转换

jQuery本质上虽然也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象，而不是js方式获得的DOM对象，二者的API方法不能混合使用，若想使用对方的API，需要进行对象的转换。

使用js方式获取的对象是js的DOM对象，使用jQuery方式获取的对象是jQuery对象。两者的转换关系如下：

js的DOM对象转换成jQuery对象，语法：$(js的DOM对象)
jQuery对象转换成js对象，语法：jquery对象[索引] 或 jquery对象.get(索引)
代码演示：

演示使用js的DOM对象方式、jquery对象方式获取div中的文本数据
演示将js的DOM对象转换成 jquery对象，再使用转换后的jquery对象方式获取div中的数据
演示将jquery对象转换成 js的DOM对象，再使用转换后js的DOM对象方式获取div中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            // 需求: 获取div标签中的内容
            // 1 js 传统方式
            var html1 = document.getElementById("mydiv").innerHTML;
            console.info("js 传统方式: " + html1);

            // 2 jquery方式
            var html2 = $("#mydiv").html();
            console.info("jquery 方式 : " + html2);

            // 问题: js对象可以调用jquery对象的属性和方法吗? 不能
            // var html3 = $("#mydiv").innerHTML;
            // console.info("jquery对象调用js对象的属性: 不能  ==== " + html3);

            //var html4 = document.getElementById("mydiv").html();
            //console.info("js对象调用jquery对象的属性: 不能   ==== " + html4);

            //结论1: jquery对象 不能直接调用 js对象的属性和方法
            //结论2: js对象 不能直接调用 jquery对象的属性和方法

            // 解决: jquery对象调用js对象的属性和方法问题: 将jquery对象 转成 js对象
            // how: jquery对象封装了js对象, 将jquery对象理解成一个数组,其中第一个元素就是js对象
            var html5 = $("#mydiv")[0].innerHTML;
            console.info("html5:" + html5);

            // 解决2: js对象 就想调用 jquery对象的属性和方法
            // how ? 将js对象转化成 jquery对象, $(js对象)
            var html6 = $(document.getElementById("mydiv")).html();
            console.info("html6: " + html6);
        });
    </script>
</head>
<body>
    <div id="mydiv">绝不后退</div>
</body>
</html>

将上述代码总结得到：

js的DOM对象转换成jQuery对象，语法：$(js的DOM对象)

var jsDomEle = document.getElementById("myDiv"); //js的DOM对象
var $jQueryEle = $(jsDomEle); //js的DOM对象 转换成 jquery对象

jQuery对象转换成js对象，语法：jquery对象[索引] 或 jquery对象.get(索引)

var $jQueryEle = $("#myDiv"); //jQuery对象
var jsDomEle = $jQueryEle[0]; //jquery对象 转换成 js的DOM对象

提示：JQuery对象变量名前面的$符号，主要作用是便于我们区分该变量是 JsDOM对象与 jQuery对象，并无特殊含义。写$符号代表jQuery对象是行业书写规范，不加$，代码也没有错误。

二、 jQuery选择器

1. 基本选择器

语法

选择器名称	语法	解释
标签选择器（元素选择器）	$(“html标签名”)	获得所有匹配标签名称的于元素
id选择器	$("#id的属性值")	获得与指定id属性值匹配的元素
类选择器	$(".class的属性值")	获得与指定的class属性值匹配的元素

现有如下需求：

改变 id 为 one 的元素的背景色为红色
改变元素名为<div> 的所有元素的背景色为红色
改变 class 为 mini 的所有元素的背景色为红色
改变所有的<span>元素和 id 为 two 的元素的背景色为红色

代码实现：

<script type="text/javascript">
    $(function() {
        //<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
        $("#b1").click(function() {
            $("#one").css("backgroundColor", "red");
        });

        //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
        $("#b2").click(function() {
            $("div").css("backgroundColor", "red");
        });

        //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
        $("#b3").click(function() {
            $(".mini").css("backgroundColor", "red");
        });

        //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
        $("#b4").click(function() {
            $("span,#two").css("backgroundColor", "red");
        });
    })
</script>

2. 层级选择器

语法

选择器名称	语法	解释
后代选择器	$("A B ")	选择A元素内部的所有B元素
子选择器	$(“A > B”)	选择A元素内部的所有B子元素

现有如下需求：

改变 <body> 内所有<div> 的背景色为红色
改变 <body> 内子 <div> 的背景色为红色

实现：

代码基于01-jquery选择器目录下层次选择器.html 进行编写

<script type="text/javascript">
    $(function() {
        //<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
        $("#b1").click(function() {
            $("body div").css("backgroundColor", "red");
        })

        //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
        $("#b2").click(function() {
            $("body>div").css("backgroundColor", "red");
        });
    })
</script>

3. 表单属性选择器

语法

选择器名称	语法	解释
可用元素选择器	:enabled	获得可用元素
不可用元素选择器	:disabled	获得不可用元素
选中选择器	:checked	获得单选/复选框选中的元素
选中选择器	:selected	获得下拉框选中的元素

现有如下需求：

利用 jQuery 对象的 val() 方法改变表单内可用元素的值
利用 jQuery 对象的 val() 方法改变表单内不可用元素的值
利用 jQuery 对象的 length 属性获取多选框选中的个数
利用 jQuery 对象的 text() 方法获取下拉框选中的内容

实现

<script type="text/javascript">
    $(function() {
        //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
        $("#b1").click(function() {
            var $inputs = $("input[type='text']:enabled");
            //$inputs内部有两个input的js的dom对象
            for (var i = 0; i < $inputs.length; i++) {
                console.log($($inputs[i]).val());
            }
        });

        // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
        $("#b2").click(function() {
            var $inputs = $("input[type='text']:disabled");
            //$inputs内部有两个input的js的dom对象
            for (var i = 0; i < $inputs.length; i++) {
                console.log($($inputs[i]).val());
            }
        });

        //<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
        $("#b3").click(function() {
            var $checkedInputs = $("input[type='checkbox']:checked");
            console.log($checkedInputs.length);
        });

        // <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
        $("#b4").click(function() {
            var $options = $("option:selected");
            //$options内部有多个下拉框选中的js的dom对象
            for (var i = 0; i < $options.length; i++) {
                console.log($($options[i]).text());
            }
        });
    })
</script>

三、 jQuery的DOM操作

1. jQuery对DOM树中的文本和值进行操作

语法

API方法	解释
val([value])	获得/设置元素value属性相应的值
text([value])	获得/设置元素的文本内容
html([value])	获得/设置元素的标签体内容

代码演示

<script type="text/javascript">
    //页面加载完成
    $(function(){
        //获取迪丽热巴
        console.log( $("#myinput").val() );
        //获得mydiv的文本内容
        console.log( $("#mydiv").text() );
        //获取mydiv的标签体内容
        console.log( $("#mydiv").html() );
    });
</script>

<body>
    <input id="myinput" type="text" name="username" value="迪丽热巴" /><br />
    <div id="mydiv">
        <p><a href="#">标题标签</a></p>
    </div>
</body>

2. jQuery对DOM树中的属性进行操作

语法

API方法	解释
attr(name[,value])	获得/设置属性的值
prop(name[,value])	获得/设置属性的值(checked，selected)

代码演示

<script type="text/javascript">
    //页面加载完成
    $(function() {
        //获取北京节点的name属性值
        console.log($("#bj").attr("name"));

        //设置北京节点的name属性的值为 大北京
        $("#bj").attr("name", "大北京");

        //新增北京节点的discription属性 属性值是 地图
        $("#bj").attr("discription", "地图")

        //获得hobby的的选中状态
        console.log( $("#hobby").prop("checked") );
    })
</script>

attr与prop的注意问题
- checked 和 selected 使用prop获取
- 其他使用attr获取获取不到换成prop

四、 jQuery的遍历

jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。

1. 原始方式遍历

语法

for(var i=0;i<元素数组.length;i++){
  	元素数组[i];
}

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var $lis = $("#city li");
				for (var i = 0; i < $lis.length; i++) {
					console.log($($lis[i]).html());
				}
			});
		</script>
	</head>
	<body>
		<ul id="city">
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
			<li>重庆</li>
		</ul>
	</body>
</html>

2. jquery对象方法遍历

语法

jquery对象.each(function(index,element){});

其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("#city li").each(function(index, element){
					//index, 就是元素在集合中的索引
					//element,就是集合中的每一个dom元素对象
					console.log(index +"==="+ $(element).html());
				});
			});
		</script>
	</head>
	<body>
		<ul id="city">
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
			<li>重庆</li>
		</ul>
	</body>
</html>

3. jquery的全局方法遍历

语法

$.each(jquery对象,function(index,element){});

其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var $lis = $("#city li");
				$.each($lis, function(index, element){
					//index, 就是元素在集合中的索引
					//element,就是集合中的每一个dom元素对象
					console.log(index +"==="+ $(element).html());
				});
			});
		</script>
	</head>
	<body>
		<ul id="city">
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
			<li>重庆</li>
		</ul>
	</body>
</html>