第十七讲 jQuery基础

最新推荐文章于 2022-06-02 17:36:57 发布

鵼鷡

最新推荐文章于 2022-06-02 17:36:57 发布

阅读量197

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/llXlI/article/details/116525738

版权

系列课程目录

第十七讲 jQuery基础

前言

jQuery基础

提示：以下是本篇文章正文内容，下面案例可供参考

一、jQuery基础

1.jQuery简介

jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互等

引入jQuery

在这里插入图片描述

本地引入
使用CDN引入

2.jQuery引入

jQuery版本

1.x：兼容所有浏览器，使用最为广泛
2.x：不兼容IE6/7/8，很少使用
3.x：不兼容IE6/7/8, 最新版，功能更多，但很多jQuery插件不兼容新版

*根据具体需求选择，一般选择1.8.2版本或3.4.1版本

开发版本/生产版本

jquery.js（开发版本）：完整未压缩，文件比较大，一般用于阅读学习源码或修改源码，项目开发时使用
jquery.min.js（生产版本）：经过编译压缩，功能与完整版一样，但体积小、传输效率快，项目上线时使用

CDN

国内：https://www.bootcdn.cn/
国外：https://cdnjs.com/

3.jQuery对象

jQuery对象可以使用jQuery的附加功能，在操作时更加方便
jQuery对象与js对象方法不通用
两者可以相互转换

JS对象JQ对象

$(js对象)

在这里插入图片描述

JQ对象JS对象

jq对象[索引]或jq对象.get(索引)

在这里插入图片描述

4.入口函数

js：window.οnlοad=函数名/匿名函数

jq：$(document).ready(函数名/匿名函数)

简写：$().ready(函数名/匿名函数)

简写：$(函数名/匿名函数)

区别

window.onload 只能绑定一个函数，且必须等待网页中所有内容加载完毕
$(d o c u m e n t) . r e a d y () 可以绑定多个函数，当 D O M 结构加载完毕就执行 * *$ (window).load()执行时机与window.onload相同**

5.jQuery基本使用

jQuery 使用 CSS 选择器来选取 HTML 元素。

$(‘CSS选择表达式’)
表达式需加引号
返回的是单个元素或元素组

jQuery 基本方法text()、html()、val()

对应innerText、innerHTML、value
获取：括号内不加参数
修改：括号内加参数
若jQuery对象为元素组，则修改该对象对所有元素

在这里插入图片描述
会将所有input元素的value修改为“test”

基本事件绑定，可使用.click()、.mouseover()等方法
在这里插入图片描述
css()方法可以修改元素样式

可以同时设置多个css属性

addClass()、removeClass() 添加/移除类

练习：使用jQuery完成以下练习(使用jQuery绑定点击事件以及修改css样式)
在这里插入图片描述
点击按钮时，将页面背景修改为对应颜色

6.jQuery选择器

基础选择器

在这里插入图片描述
过滤选择器

注：由于even/odd是指偶数索引/奇数索引，因此even选取的偶数索引0、2、4、6实际为第1、3、5、7个元素

二、课堂作业

1.按照要求完成任务

如下（示例）：

在这里插入图片描述

2.解析代码

任务17-1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="new_file.js">
			
		</script>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
					<tr><th>学号</th><th>姓名</th><th>年龄</th></tr>
					<tr><td>202000001</td><td>刘一</td><td>女</td></tr>
					<tr><td>202000002</td><td>陈二</td><td>女</td></tr>
					<tr><td>202000003</td><td>张三</td><td>男</td></tr>
					<tr><td>202000004</td><td>李四</td><td>男</td></tr>
					<tr><td>202000005</td><td>王五</td><td>女</td></tr>
					<tr><td>202000006</td><td>赵六</td><td>男</td></tr>
					<tr><td>202000007</td><td>孙七</td><td>女</td></tr>
					<tr><td>202000008</td><td>周八</td><td>男</td></tr>
					<tr><td>202000009</td><td>吴九</td><td>男</td></tr>
				</table>
				
				<script type="text/javascript">
					$("th").css({"background-color":"#00a40c","color":"#fff"})
					$("tr:odd").css("background-color","#d9ffdc")
					$("tr:even").css("background-color","#a5e5aa")
					$("tr").mouseover(function(){
					    $(this).css("background-color","#ff9")
					})
					$("tr").mouseout(function(){
					    $("tr:odd").css("background-color","#d9ffdc ")
					    $("tr:even").css("background-color","#a5e5aa")
					})
				</script>
	</body>
</html>