日期: 1月21日 ~ 2月1日;
时段: 20:00 ~ 22:00;
### 教学内容:
+ jQuery + bootstrap
+ 仿'新浪微博'与'抖音'小程序页面;
===============================================================
- jquery
+ jQuery 是一个 JavaScript 库;jQuery 极大地简化了 JavaScript 编程
+ jquery的安装(下载jquery的库 jquery.com 线上、)
+ 基本语法:(jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作)
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(selector).action()
美元符号定义 jQuery;
(selector)选择器 用于"查询"和"查找" HTML 元素;
action() 执行对元素的操作;
$(选择器).需要执行的操作()
=================================================
文档就绪函数 ready() (也称为jQuery入口函数) 作用: 为了防止文档在完全加载(就绪)之前运行 jQuery 代码
$(document).ready(function(){
// 执行代码
});
或者简写为:
$(function(){
// 执行代码
});
==================================================
JavaScript 入口函数:
window.onload = function () {
// 执行代码
}
jQuery 入口函数与 JavaScript 入口函数的区别:
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行;
JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行;
jQuery事件
==============================================================================================
$(document).ready()当文档完成加载时;
$(selector).click()被选元素的点击事件;
$(selector).focus()被选元素的获得焦点事件;
$(selector).mouseover()当鼠标指针移上被选元素元素时;
$(selector).mouseleave()当鼠标指针离开被选元素元素时;
jQuery事件原理:当事件被触发时会调用一个函数(事件处理函数;
如: $(selector).click(function) 我们称之为事件方法;
jQuery中的事件方法:就是触发被匹配元素的事件,调用一个函数;或理解为将函数绑定到所有被匹配元素的某个事件上;
$(selector).click(function(){
// 当事件触发时,执行的代码需要执行的代码块
})
jQuery选择器
================================================================================
jQuery 中所有选择器都以美元符号开头:$(),它基于已经存在的 CSS 选择器;
元素选择器、#id选择器、.class类选择器 类型、属性、属性值;
页面转到 demo (1).html
jQuery遍历(用一种相对的关系来查找html元素)
=======================================================
向上查找(祖先元素)
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素
$("span").parents().css("color","red");
使用可选参数来过滤对祖先元素的搜索
$("span").parents("ul").css("color","red");
该例返回所有span元素的所有祖先,并且它是ul元素
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
$("span").parentsUntil("div").css("border","2px solid red");
该例返回介于span与div元素之间的所有祖先元素