[北京|结业弟子]JS-朱春雨|2019年12月21日的日报-技能树.IT修真院

发表于： 2019-12-21 21:59:13

1 1176

今天完成的事情：

完成任务二玩家配比页面

学习jQuery

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

<script src="jquery-1.10.2.min.js"></script>

基础语法： $(selector).action()

实例:

———————————————————————————————

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

简洁写法（与以上写法效果相同）:

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

—————————————————————

$("button").click(function(){                  点击p消失

      $("p").hide();

});

$("p").click(function(){                         点击p标签，这个元素会消失
  $(this).hide();
});

$("p").dblclick(function(){                  双击这个元素会消失
  $(this).hide();
});

$("#p1").mouseenter(function(){                       鼠标移到#p1 上出现提示

alert('您的鼠标移到了 id="p1" 的元素上!');       mouseleave   鼠标离开出现的效果

});

$("#p1").mousedown(function(){               鼠标在文字上方，点击出现的效果

alert("鼠标在该段落上按下！");               mouseup是鼠标点击松开后的效果

});

hover()方法用于模拟光标悬停事件。

$(function(){

$("#p1").hover(

		function(){

			alert("你进入了 p1!");

},

		function(){

			alert("拜拜! 现在你离开了 p1!");

}

)

});

鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

————————————————————————————————

$(function(){

$("input").focus(function(){

$(this).css("background-color","#cccccc");

});

$("input").blur(function(){

$(this).css("background-color","#ffffff");

});

});

当元素获得焦点时，发生 focus 事件。

当元素失去焦点时，发生 blur 事件。

——————————————————————————————————

$(".ex .hide").click(function(){

$(this).parents(".ex").hide("slow");          slow缓慢的消失

});

——————————————————————

jQuery 效果- 隐藏和显示

hide（） 消失  show显示

点击按钮，所以P标签消失 再次点击出现 过程2秒

可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

点击消失，消失完提示信息

jQuery 效果 - 淡入淡出

jQuery fadeIn() 用于淡入已隐藏的元素。

淡入效果，正常速度，放慢，更慢，视觉来看就是淡入效果

————————————————————————————————————

淡出效果，这里不用设置display none

fadeToggle（）是淡出淡入

——————————————————————————————————

fadeTo("slow",0.15)  透明度0-1之间

————————————————————————————————————

jQuery 效果 - 滑动

slideDown() 向下滑动元素

slideUp 向上滑动元素

slideToggle() 方法可以在 slideDown() 与 slideUp() 之间进行切换

__________________________________________________________________

jQuery 效果- 动画

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

.animate({left:'250px'}

——————————————————————

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

放大放大     一直大

缩小缩小   一直缩小

可以把属性的动画值设置为 "show显示"、"hide隐藏" 或 "toggle显示/隐藏"

————————————————————————

animate() - 使用队列功能

——————————————————————

————————————————————

——————————————————————————————

jQuery 停止动画

停止

stop(true); 停止所有

stop(true,true)停止所有，但完成动作

————————————————————

jQuery - 链(Chaining)

Chaining 允许在一条语句中运行多个 jQuery 方法（在相同的元素上）。

可以把多种效果结合在一起

——————————————————————————————

jQuery - 获取内容和属性

获得内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

通过 jQuery text() 和 html() 方法来获得内容：

————————————————————————

利用val显示值

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

————————————————————————

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

如何改变链接中 href 属性的值

改变网址 同时改变文字

明天计划的事情：

做任务2

遇到的问题：

暂无
收获：

使用JQ

返回列表