第八周学习周记

最新推荐文章于 2021-06-28 07:32:29 发布

又景众

最新推荐文章于 2021-06-28 07:32:29 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/weixin_49001166/article/details/116019296

版权

第八周学习周记

信息管理创新实践课程第八周学习周记
- 学习内容
- - 知识点
  - 代码区

信息管理创新实践课程第八周学习周记

信息管理创新实践课程学习进度已至第八周，应课堂要求，创作此学习周记，并将以此方式持续记录。

学习内容

本节课初步学习jQuery，可完成一些简单操作。
菜鸟教程自学地址：link.
编辑器：HBuilder X

知识点

1、jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
1.1文档就绪事件
所有 jQuery 函数位于一个 document ready 函数中。

2、jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
2.1元素选择器
jQuery 元素选择器基于元素名选取元素。
2.2#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
2.3.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。

3、常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法章节中已经提到过。
2.1focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
2.2blur()
当元素失去焦点时，发生 blur 事件。

4、jQuery 效果
4.1隐藏和显示
jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
4.2淡入淡出
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
4.3滑动
jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()
4.4动画
Query animate() 方法用于创建自定义动画。

5、jQuery CSS 类
jQuery 拥有若干进行 CSS 操作的方法。
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

代码区

jQuery简单实例

<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#pp").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>恭喜发财</p>
<p>红包拿来</p>
<p id="pp">给</p>
<p>不给</p>
</body>
</html>

知识点1.1

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

知识点2.3

<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
	 $("#1").click(function(){
    $(".test").show();
  });
});
</script>
</head>
<body>

<h2 class="test">恭喜发财</h2>
<p class="test">红包拿来</p>
<p>拿来</p>
<button>不给</button>
<button id=1>给</button>
</body>
</html>

知识点4.2

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
	$("#1").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>

<body>
<p>快来看</p>
<button>看</button>
<button id=1>不想看了</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

知识点4.4

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
		left:'+=50px'
	});
  });
});
</script> 
</head>
 
<body>
<button>rush！</button>
<p>冲鸭</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

又景众

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第八周学习周记

第八周学习周记信息管理创新实践课程第八周学习周记学习内容知识点代码区信息管理创新实践课程第八周学习周记信息管理创新实践课程学习进度已至第八周，应课堂要求，创作此学习周记，并将以此方式持续记录。学习内容本节课初步学习jQuery，可完成一些简单操作。菜鸟教程自学地址：link.编辑器：HBuilder X知识点1、jQuery 语法jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。1.1文档就绪事件所有 jQuery 函数位于一个 document ready 函
复制链接

扫一扫