响应式网页设计之jQuery基础

最新推荐文章于 2024-04-19 17:05:38 发布

PRINT！

最新推荐文章于 2024-04-19 17:05:38 发布

阅读量893

点赞数 2

分类专栏：响应式网页学习笔记文章标签： jquery html javascript

本文链接：https://blog.csdn.net/qq_48592827/article/details/117772154

版权

响应式网页学习笔记专栏收录该内容

20 篇文章 3 订阅

订阅专栏

jQuery基础

补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。

文章目录

jQuery基础
一、jQuery简介
- 1. 引入jQuery
- 2. jQuery版本
二、jQuery对象
三、入口函数
四、jQuery基本使用
五、jQuery选择器
六、网页小案例
- 1.题目要求
- 2.源码奉上

一、jQuery简介

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

1. 引入jQuery

本地引入

<script src="jquery.js"></script>

使用CDN引入
CDN（Content Delivery Network），即内容分发网络，依靠部署在各地的边缘服务器，通过中心平台进行内容分发，使用户就近获取所需资源，提高用户的访问速度

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

2. 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（生产版本）：经过编译压缩，功能与完整版一样，但体积小、传输效率快，项目上线时使用

二、jQuery对象

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

JS对象 ———> JQ对象
语法：$(js对象)
举例：

var js0bj = document.getElementById( 'text' )//js对象
var jq0bj = $( js0bj) 7/jq对象

JQ对象 ———> JS对象
语法：jq对象[索引]或jq对象.get(索引)
举例：

jq0bj[0]jq0bj.get(0 )

三、入口函数

js：window.οnlοad=函数名/匿名函数
jq：$ (document).ready(函数名/匿名函数)
简写：$ ().ready(函数名/匿名函数)
简写：$(函数名/匿名函数)
js与jq入口函数的区别：
window.onload 只能绑定一个函数，且必须等待网页中所有内容加载完毕
$ (document).ready() 可以绑定多个函数，当DOM结构加载完毕就执行
$(window).load()执行时机与window.onload相同

四、jQuery基本使用

yujQuery 使用 CSS 选择器来选取 HTML 元素。
语法格式：
$(‘CSS选择表达式’)
表达式需加引号
返回的是单个元素或元素组
举栗说明：
以下代码会将所有input元素的value修改为“test”

<input type="text"/>
<input type="text"/>
<input type="text"/>
<script type="text/javascript">
	$(function(){
	$('input').val( "test" )})
</script>

jQuery 基本方法text()、html()、val()
语法格式：
对应innerText、innerHTML、value
获取：括号内不加参数
修改：括号内加参数
若jQuery对象为元素组，则修改该对象对所有元素
举栗说明：
text()、html()、val()等方法可以使用回调函数快速完成遍历

<select>
	<option>a</option>
	<option>b</option>
	<option>c</option>
</select>

<script type="text/javascript">
	$( 'option' ).text(function (i) {
		return i + 1
	})
</script>

attr()可获取、修改元素的属性

$( 'option' ).attr( 'value', function (i) {
	return 'item-' +( i + 1)
})

基本事件绑定，可使用.click()、.mouseover()等方法

<input type="button" id="btn" value="click me" />
<script type="text/javascript">
	$('#btn').click(show)
	function show(){
		alert( "hello world" )
	}
</script>

五、jQuery选择器

① 基础选择器
在这里插入图片描述
② 过滤选择器

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

六、网页小案例

1.题目要求

使用jQuery为表格添加样式

① 首行为标题行，设置背景色为#00a40c，字体色为#fff

② 设置偶数行背景色为#a5e5aa

③ 设置奇数行背景色为#d9ffdc

④ 当鼠标移入某行时，设置该行背景色为#ff9

⑤ 当鼠标移出时，复原背景色

⑥ 鼠标移入移出效果不影响标题行
在这里插入图片描述

2.源码奉上

建议先尝试着写一下，自己完成更有成就感喔！
在这里插入图片描述
html纯表格代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.2/jquery.js"></script>
	</head>
	<body>
		<table border="" cellspacing="0" cellpadding="0">
			<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">
			init()		
			function init(){
				$('th').css({"background-color":"#00a40c","color":"#fff"})			
				$('tr:even').css("background-color","#a5e5aa")
				$('tr:odd').css("background-color","#d9ffdc")
			}
			function changeColor(){
				$(event.currentTarget).css("background-color","#ff9")
				//$(this).css("background-color","#ff9")			
			}
			$('tr').mousemove(changeColor);
			$('tr').mouseout(init);
		</script>
	</body>
</html>

PRINT！

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
响应式网页设计之jQuery基础

jQuery基础补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。文章目录jQuery基础一、jQuery简介1. 引入jQuery2. jQuery版本二、jQuery对象三、入口函数四、jQuery基本使用五、jQuery选择器一、jQuery简介jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档
复制链接

扫一扫