概述

  1. 概念：jQuery是一个快速、简洁的JavaScript库，简化js开发

快速入门

  1. 下载
JQuery库种有两个文件：jquery-3.5.1.min.js和jquery-3.5.1.js。两者的区别是：
1. 前者是生产版本，程序中使用，没有缩进。体积小一点，程序加载更快。
2. 后者是开发版本，给程序员看的，有良好的注释和缩进，体积大一些
  1. 导入JQuery的js文件：导入min.js文件
  2. 使用
// 示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src = "/js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="id1">HelloWorld</div>
    <script>
        <!-- 使用jQuery获取元素对象 -->
        var div1 = $("#id1");
        <!-- 使用html方法获取标签内容HelloWorld-->
        alert(div1.html())
    </script>
</body>
</html>

JQuery对象和Js对象的区别与转换

1. 区别
  1. JQuery对象在操作时更加方便
  2. Jquery对象和Js对象的方法是不通用的
2. 转换
  1. jq->js：jq对象[索引]或者jq对象.get(索引)。JQuery对象本身为数组对象，该数组中的第0个元素即为JQuery对象对应的js中的DOM对象
  2. js->jq:$(js对象)。$(document).ready()表示将JS中的document对象转为JQuery对象。$()是JQuery中的函数
 // js方式获取标签名称为div的所有html元素对象
var divs = document.getElementsByTagName("div");
alert(divs.length); // 2
// 对divs中的所有div标签,将其标签体内容设置为Hello
for (var i = 0; i < divs.length; i++) {
    divs[i].innerHTML = "Hello";
}

for (var i = 0; i < divs.length; i++) {
    // js对象转为jq对象
    $(divs[i]).html("nice");
}

// JQuery方式获取
var $divs = $("div");
alert($divs.length);// 2
// 对divs中的所有div标签,将其标签体内容设置为Hi
$divs.html("Hi");
// jq对象转为js对象
$divs[0].innerHTML = "AAA";
$divs.get(1).innerHTML = "BBB";

JQuery中的选择器

选择器：选择器:就是定位条件，通知jquery函数定位满足条件的 DOM 对象

1.基本选择器
  1. 标签选择器（元素选择器）：$("html标签名称")表示获取所有匹配标签名称的元素。等价于JavaScript通过标签名定位DOM对象document.getElementsByTagName()
  2. id选择器:$("#id的属性值")表示获得与指定id属性值匹配的元素。等价于JavaScript通过id属性值定位DOM对象document.getElementById()
  3. 类选择器：$(".class的属性值")表示获得与指定的class属性值匹配的元素。等价于JavaScript通过class属性值定位DOM对象document.getElementsByClassName()
  4. 并集选择器：$("选择器1，选择器2，...")获取多个选择器选中的元素
2.层级选择器
  1. 后代选择器
1.  $("A B"):选择A元素内部的所有B元素
  1. 子选择器
1. $("A > B"):选择A元素内部的所有B子元素
3.属性选择器
  1. 属性名称选择器：$(“A[属性名]”)表示包含指定属性的选择器
  2. 属性选择器：$(“A[属性名 = ‘值’]”)表示包含指定属性等于指定值的选择器
  3. 复合属性选择器：$(“A[属性名] = ‘值'[]….”)表示包含多个属性的选择器
4.过滤选择器：过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。
  1. 首元素选择器：:first表示获得选择的元素中的第一个元素。语法为：$("选择器:first")
// 改变第一个div元素的背景色为粉红
$("div:first").css("backgroundColor","pink");
  1. 尾元素选择器：:last
  2. 非元素选择器::not（selector）
  3. 偶数选择器::even 偶数，从0开始计数
  4. 奇数选择器::odd 奇数，从0开始计数
  5. 等于索引选择器：:eq(index)，index从0开始
  6. 大于索引选择器::gt(index)
  7. 小于索引选择器::lt(index)
  8. 标题选择器::header
5.表单选择器

语法： $(":type 属性值")

$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮

示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			function func1() {
				var $obj = $(":text");
				// 获取第一个DOM对象的值
				alert($obj.val());
			}
			function func2() {
				var $obj = $(":radio");
				for (var i = 0; i < $obj.length; i++) {
					//JQuery对象转为DOM对象
					var obj = $obj[i];
					alert(obj.value);
				}
			}
			function func3() {
				var $obj = $(":checkbox");
				for (var i = 0; i < $obj.length; i++) {
					var obj = $obj[i];
					alert(obj.value);
				}
			}
		</script>
	</head>
	<body>
		用户名：<input type="text" value="用户名"/><br/>
		性别：<br/>
		<input type="radio" value="man" name="sex"/>男<br/>
		<input type="radio" value="woman" name="sex"/>女<br/>
		爱好：<br/>
		<input type="checkbox" value="bike"/>骑行<br/>
		<input type="checkbox" value="music"/>音乐<br/>
		<input type="checkbox" value="football"/>足球<br/>
		<h3>功能按钮</h3>
		<input type="button" value="读取文本框的值" onclick="func1()"/>
		<input type="button" value="读取单选框的值" onclick="func2()"/>
		<input type="button" value="读取复合框的值" onclick="func3()"/>
	</body>
</html>
6.表单过滤选择器
  1. 可用元素选择器：:enabled表示获得可用元素。例如$(":text:enabled")表示选择可用的文本框
  2. 不可用元素选择器：:disabled表示获得不可用元素
  3. 选中选择器：:checked表示获得单选框、复选框中选中的元素
  4. 选中选择器：:selected表示获得下拉框中选中的元素
示例：
$(“:text:enabled”) // 选择可用的文本框
$(“:text:disabled”)// 选择不可用的文本框
$(“:checkbox:checked”) //复选框选中的元素
$("选择器>option：selected")//选择指定下拉列表的被选中元素


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			// 写在JQuery的入口函数里面
			$(function() {
				// JQuery绑定事件
				$("#btn1").click(function() {
					$(":text:enabled").val("Hello");
				})
				$("#btn2").click(function() {
					var $obj = $(":checkbox:checked");
					$obj.each(function(i, n) {
						alert("第" + i + "个成员，DOM值为:" + n.value + "JQuery对象取值为:" + $(n).val());
					})
				})
				$("#btn3").click(function () {
					// 下拉框选中的option
					var $obj = $("select > option:selected");
					alert($obj.val() + "," + $obj.text());
				}) 
			})
		</script>
	</head>
	<body>
		<p>文本框</p>
		<input type="text" id="text1" value="text1"/><br/>
		<input type="text" id="text2" value="text2" disabled /><br/>
		<input type="text" id="text3" value="text3"/><br/>
		<input type="text" id="text4" value="text4" disabled /><br/>
		<p>复选框</p>
		<input type="checkbox" value="唱歌"/>唱歌<br/>
		<input type="checkbox" value="跳舞" checked/>跳舞<br/>
		<input type="checkbox" value="玩游戏" checked/>玩游戏<br/>
		<p>下拉框</p>
		<select id="language">
			<option value="java">java语言</option>
			<option value="go" selected>go语言</option>
			<option value="c++">c++语言</option>
		</select>
		<p>功能按钮</p>
		<button id="btn1">可用的text值</button><br/>
		<button id="btn2">显示被选中的复选框的值</button><br/>
		<button id="btn3">显示下拉列表选中的值</button><br/>
	</body>
</html>

运行图如下：
image.png

7.所有选择器

${"*"}表示选取页面中所有DOM对象

JQuery中的入口函数

1. JQuery中的入口函数

这些入口函数，一旦dom结构渲染完毕即可执行内部代码

1. $(function() {
});
2. $(document).ready(function() {
}); // $(document)表示将document对象转为JQuery对象
2.和wndow.onload的区别
  1. jQuery入口函数可以书写多次，window.onload只能书写一次；
  2. 执行的时机不同，jQuery的入口，一旦dom结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成；window.onload的是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

DOM操作

1.内容操作
  1. html():获取/设置元素的标签体内容
  2. text():获取/设置元素的标签体纯文本内容
  3. val():获取/设置元素的value属性值。语法：$("选择器").val() 或者$("选择器").val(值)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内容相关操作</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        // 入口函数
        $(function() {
            // 获取userInput的value值用户名
            let val = $("#userInput").val();
            alert(val)
            // 获取myDiv的标签体内容<a href="#">下载</a>
            let html = $("div").html();
            alert(html);
            // 获取myDiv文本内容下载
            let text = $("#myDiv").text();
            alert(text);
        });
    </script>
</head>
<body>
    <input type="text" id="userInput" name="用户名" value="用户名"><br/>
    <div id="myDiv"><a href="#">下载</a></div>
</body>
</html>
2. 属性操作
  1. 通用属性操作
1. attr():获取/设置元素的属性
2. removeAttr()：删除元素的属性
3. prop()
4. removeProp()

atttr和prop的区别：
1、 如果操作的是HTML元素的固有属性，则建议使用prop
2、 如果操作的是HTML元素的自定义属性，则建议使用attr属性
2. 对class属性操作

1. addClass()：增加class属性
2. removeClass()
3. toggleClass()：切换class属性
    例如：toggleClass("one")表示
    判断元素对象上是否存在值为one的class属性，存在则将属性值one删除，不存在则添加
3. CRUD操作
  1. append():父元素将子元素追加到末尾
  2. prepend():父元素将子元素追加到开头
  3. appendTo()
对象1.appendTo(对象2)：将对象1添加到对象2内部,并且在末尾
  1. prependTo()：与上面类似
  2. after():添加元素到元素后边。这两个元素为兄弟关系
  3. before()：添加元素到元素前边.这两个元素为兄弟关系
  4. insertAfter().这两个元素为兄弟关系
  5. insertBefore().这两个元素为兄弟关系
  6. remove():将对象删除掉
  7. empty()：清空元素的所有后代元素，保留当前元素

案例1：对表格中的数据行隔行换色

案例2：复选框全选和全不选

动画

  1. 默认显示和隐藏方式
1.show( [duration ][, easing ] [, function ] )
    默认值: "normal"， 三种预定速度的字符串("slow", "normal",或"fast")或表示动画运行时长的毫秒数值(如：1000) ） 
    easing用来指定切换效果，jQuery自身提供"linear" 和 "swing。
        swing表示动画执行效果是先慢，中间快，最后又慢
        linear表示动画执行时速度是匀速的
    function为在动画完成时执行的函数
2. hide
3. toggle()
  1. 滑动显示和隐藏方式
1.slideDown() 
2.slideUp()
3.slideToggle
  1. 淡入淡出显示和隐藏方式
1.fadeIn()
2.fadeOut()
3.fadeToggle()

遍历

1.js的遍历方式
for(初始化值；循环结束条件；步长)

// 获取ul下的所有li元素对象
let $citys = $("#city li");
// 1. js的遍历方式
// for (let i = 0; i < $citys.length; i++) {
//     alert($citys[i].innerHTML);
// }
2.JQuery的遍历方式
  1. jq对象.each(callback); // callback为回调函数
// 获取ul下的所有li元素对象
let $citys = $("#city li");
// jq的遍历方式
 $citys.each(function(index, element) {
     // 获取li对象第一种方式：3.1中使用this
     // alert(this.innerHTML);
     // alert($(this).html());

     // 获取li对象第二种方式：3.2中在回调函数中定义参数，index和element
     alert(index + ":" + $(element).html());
 })
  1. $.each(object,[callback]); // 全局遍历方式
$.each($citys, function() {
    alert($(this).html());
})
  1. for..of
// for...of遍历，3.0版本之后提供的方式
for (li of $citys) {
    alert($(li).html());
}

事件绑定

  1. JQuery标准的绑定方式：jq对象.事件方法(回调函数 )
<input id="name" type="text" value="绑定点击事件"/>
<script>
    $(function() {
        $("#name").click(function() {
            alert("文本框被点击");
        });
        
        //$("#name").focus();   // 让文本输入框获得焦点
    });
</script>
  1. on/off来绑定事件和解除绑定事件
jq对象.on("事件名称",回调函数);
jq对象.off("事件名称"); // 如果off方法不传递参数，则组件上的所有事件都被解绑

<input id="btn1" type="button" value="使用on绑定点击事件"/>
<input id="btn2" type="button" value="使用off解绑点击事件"/>

<script>
    $(function() {
        // 点击btn1绑定单击事件
        $("#btn1").on("click", function () {
            alert("点击");
        });
        // 点击btn2解除绑定btn1的单机事件
        $("#btn2").click("click",function () {
            $("#btn1").off("click")
        });
    });
</script>
  1. 事件切换（toggle）
jq对象.toggle(func1, func2, ....);  // 当单击jq对象对应的组件后，会执行func1,第二次点击执行func2...

案例1：

  1. 当页面加载完，三秒后自动显示广告
  2. 广告显示五秒后，自动消失

案例2：抽奖

插件：增强JQuery的功能

1.实现方式
  1. $.fn.extend(object);
$("#id"):表示增强通过JQuery获取的对象的功能
  1. $.extend(object); // 增强JQuery对象自身（即$/jQuery）的功能，扩展jQuery全局函数 ，调用时直接$.函数名(参数)
// 给jQuery对象自身扩展两个功能
$.extend({
    min: function(a, b) {
        return a < b ? a : b;
    },
    max: function(a, b) {
        return a > b ? a : b;
    }
});
var min = $.min(1,2);
alert(min);   // 1
var max = $.max(1,2);
alert(max);   // 2
版权声明：本文为文件精度原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiaocer/p/16622466.html