jQuery之入门篇

最新推荐文章于 2024-08-09 02:16:38 发布

发际线偏高

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量122

点赞数

分类专栏： jquery 文章标签： jquery初探 jquery jquery入门

本文链接：https://blog.csdn.net/weixin_44827738/article/details/101719720

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery的初始语法

首先你得有个jquery的js库，给你准备好啦。
百度网盘js库下载<永久有效>
提取码：kxzx

导入格式如下☟☟☟☟☟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Jquery的初始语法</title>
	<!--引入Jquery库文件-->
	<script src="js/jquery-3.3.1.min.js"></script>
	<script>
		//窗体加载函数(写法一)
		$(function(){
			
		})
		//窗体加载函数(写法二)
		$(document).ready(function(){
			//函数体(写具体操作的地方)
		});
	</script>
	</head>
	<body>
	</body>
</html>

随笔①

使用noConflict()方法创建自定义名称jq代替$符号
代码示例：

<script>
		//用tim 替代JQuery的$
		var t=jQuery.noConflict();
		t(function(){
			alert("我有一根大香肠！");
		})
		//使用t代替$符号
</script>

随笔②

改变标签样式
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script>
		function changeColor()
		{
			/* var span=$("span")[0];  获取第一个span标签元素
			span.style.color="green";  设置元素的css属性
			*/
			$("span")[0].style.color="green";
		}
	</script>	
	</head>
	<body>
		<span>铁甲依然在-------天驱武士团</span>
		<button  onclick="changeColor()">点击变文字颜色</button>
	</body>
</html>

随笔③

隐藏和显示div标签
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div
			{
				height: 200px;
				width: 300px;
				display: none;
				border: 1px solid green;
			}
		</style>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script>
			function openDiv()
			{
				var div=$("div")[0];
				//显示
				$(div).show(5000,function(){
					$(this).text("铁甲依然在");//改变div的颜色,this表示当前的元素(div)
				});
			}
			function closeDiv()
			{
				var div=$("div")[0];
				$(div).hide(6000);//隐藏
			}
			function openAndclose()
			{
				//显示/隐藏
				$($("div")[0]).toggle(6000);
			}
		</script>
	</head>
		
	<body>
		<div>
			我想出就去，我想关就关。
		</div>
		<input type="button" value="打开"  onclick="openDiv()"/>
		<input type="button" value="关闭"  onclick="closeDiv()"/>
		<input type="button" value="打开/关闭"  onclick="openAndclose()"/>
	</body>
</html>

掌握以下单词更有助于提高效率

1. each [i:tʃ] 
adv. 每个；各自; 
2. selector [sɪ'lektə] 
n. 选择器；挑选者 
3. context ['kɒntekst] 
n. 环境；上下文 
4. queue [kjuː] 
n. 队列 
5. element ['elɪm(ə)nt] 
n. 元素 
6. extend [ɪk'stend; ek-] 
vt. 延伸；扩大 
7. offset ['ɒfset] 
n. 偏移 
8. position [pə'zɪʃ(ə)n] 
n. 位置 
9. ancestor ['ænsestə] 
n. 祖先 
10. descendant [dɪ'send(ə)nt] 
n. 后裔；子孙 
11. parent ['peər(ə)nt] 
n. 父亲 
12. even ['iːv(ə)n] 
n. 偶数 
13. odd [ɒd] 
n. 奇数 
14. contains [kən'teinz] 
v. 包含 
15. empty ['em(p)tɪ] 
adj. 空的 
16. hidden ['hɪdn] 
v. 隐藏 
17. toggle ['tɒg(ə)l] 
vi. 开关 
18. submit [səb'mɪt] 
vi. 提交 
19. append [ə'pend] 
vt. 附加；添加 
20. replace [rɪ'pleɪs] 
vt. 取代，代替 
21. remove [rɪ'muːv] 
vt. 移除 
22. previous ['priːvɪəs] 
adj. 以前的 
23. sibling ['sɪblɪŋ] 
n. 兄弟姊妹 
24. delegate ['delɪgət] 
vt. 委派, 委托 
25. slide [slaɪd] 
vi. 滑动 
26. fade [feɪd] 
adj. 平淡的 
27. animate ['ænɪmeɪt] 
vt. 动画 
28. delay [dɪ'leɪ] 
vi. 延迟 
29. scroll [skrəʊl] 
vi. 滚动 
30. inner [ɪnə] 
adj. 内部的 
31. outer ['aʊtə] 
adj. 外面的 
32. filter ['fɪltə] 
vi. 过滤 
33. ready ['redɪ] 
adj. 准备好 
34. stop [stɒp] 
vt. 停止 
35. query ['kwɪərɪ] 
n. 查询 
36. callback ['kɔːlbæk] 
n. 回调 
37. property ['prɒpətɪ] 
n. 属性 
38. first [fɜːst] 
n. 第一 
39. last [lɑːst] 
n. 最后 
40. equal ['ikwəl] 
adj. 相等的 
41. target ['tɑːgɪt] 
n. 目标 
42. visible ['vɪzɪb(ə)l] 
adj. 可见的

发际线偏高

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之入门篇

1. each [i:tʃ] adv. 每个；各自; 2. selector [sɪ'lektə] n. 选择器；挑选者 3. context ['kɒntekst] n. 环境；上下文 4. queue [kjuː] n. 队列 5. element ['elɪm(ə)nt] n. 元素 6. extend [ɪk'stend; ek-] vt. 延伸；扩大 7. offset ['ɒfset] n. 偏移 8. position [pə'zɪʃ(ə)n] n. 位置 9.
复制链接

扫一扫

专栏目录