jQuery素材
jQuery素材
jQuery-3.7.js
jQuery.animate-colors.js
跟随鼠标移动
随机位置产生
轮播图
虚拟键盘
jQuery课后作业参考答案(部分)
第4章:jQuery的DOM操作一
CH04-JQuery的DOM操作一本章目标
掌握jQuery操作DOM节点——创建、插入、替换、复制、包裹、删除节点的使用
掌握jQuery遍历DOM节点的使用
一、jQuery 中的 DOM 操作1、DOMDOM(Document Object Model—文档对象模型):是 W3C(万维网联盟)的标准,可以将任何HTML、XML文档描绘成一个多层次的节点树。例:HTML DOM 节点树
树中的所有节点均可通过 JavaScript 进行操作。包括节点修改,创建或删除等。
2、DOM操作分为三类
DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById()
HTML-DOM:用于处理HTML文档,如document.forms
CSS-DOM:用于操作CSS,如element.style.color=”green”
JavaScript用于对(x)html文档进行操作,它对这三类DOM操作都提供了支持
3、jQuery 中的 DOM 操作分类jQuery对JavaScript中的DOM操作进行了封装,使用起来将更加简便
jQuery ...
第3章:JQuery过滤选择器
CH03-JQuery过滤选择器本章目标
掌握基本过滤选择器的使用
掌握可见性过滤选择器的使用
掌握表单对象过滤器的使用
一、过滤选择器分类1、什么是jQuery过滤选择器
过滤选择器通过特定的过滤
规则来筛选元素语法特点是使用“:”,如使用$(“li:first”)来选取第一个li元素
2、jQuery过滤选择器分类
过滤选择器
基本过滤选择器
可见性过滤选择器
表单对象过滤器
二、过滤选择器1、基本过滤选择器基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素
基本过滤选择器案例的公用Html代码:
12345678910111213141516171819202122232425262728<style> .one { background-color:yellow; } .two { color:blue; /*bold跟font-wei ...
第2章:JQuery选择器
CH02-JQuery选择器本章目标
掌握基本选择器的使用
掌握层次选择器的使用
掌握属性选择器的使用
一、jQuery选择器1、什么是jQuery选择器jQuery选择器:类似于CSS选择器,用来选取网页中的元素发生的发生
例:设置网页中所有h3元素的背景
效果图:
12345678<script src="js/jquery.min.js"></script><script> $(function() { //设置所有h3元素的背影颜色 $("h3").css("background", "yellow"); });</script><h3>请开始你的表演,因为我也要开始了</h3>
注:
“h3”为选择器
$(“h3”)返回jQuery对象
.css()是为jQuery对象设置样式的方法
2、jQue ...
第1章:初识JQuery
CH01-初识JQuery本章目标
了解什么是JQuery
掌握JQuery可以做什么
掌握JQuery的使用步骤
掌握JQuery的语法
一、基本概念1.jQuery起源
jQuery的作者是John Resig,于2006年创建的一个开源项目,随着越来越多开发者的加入, jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。
jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。若把JavaScript看作原始社会生火方式-钻木取火。 jQuery就是现代社会的火柴了。
2.什么是jQueryjQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的”写的少,做的多”的 JavaScript 库。
3.为什么要使用jQuery目前网络上有大量开源的 JS 代码库, 但是 jQuery 是目前最流行的 JS 代码库,而且提供了大量的扩展。
很多大公司都在使用 jQuery, 例如:
Google
Microsoft
IBM
Netflix
4.jQuery的优势
体积 ...
第8章:jQuery动画
CH08-JQuery动画本章目标
掌握jQuery非自定义动画的使用
掌握jQuery自定义动画的使用
一、非自定义动画1、显示和隐藏show() 和 hide() 在显示和隐藏元素时,能定义显示元素时的效果。
其中显示速度可以取如下值:毫秒(如1000)、slow、normal、fast
绘制如下界面,实现显示和隐藏的动画效果:
123456789101112131415161718<script src="js/jquery.min.js"></script><script> $(function(){ //点击按钮缓慢显示 $("#btn1").click(function () { $(".tipsbox").show("slow"); }) //点击按钮3秒隐藏 $(&quo ...
第7章:jQuery事件二
CH07-JQuery事件二本章目标
掌握表单事件的使用
掌握change事件的使用
掌握给元素绑定事件的使用
一、讲解内容1、表单事件当元素获得焦点时会触发focus事件,失去焦点时会触发blur事件,详见下表:
例:用户名文本框获得焦点时,文本框添加背景颜色,失去焦点时,文本框背景颜色还原添加一个背景颜色的样式
效果图:
1234567891011121314<script src="js/jquery.min.js"></script><script> $(function(){ $("#name").focus(function () { //获取焦点添加背景样式 $(this).addClass("bg"); }); $("#name").blur(function () { ...
第6章:jQuery事件一
CH06-JQuery事件一本章目标
了解事件的概念和常用的事件
掌握窗体、键盘、鼠标和复合事件的使用
一、事件的分类1、什么是事件?页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
在元素上移动鼠标
选取单选按钮
点击元素
2、常用的事件
基础事件
窗体事件
键盘事件
鼠标事件
表单事件
复合事件是多个事件的组合
鼠标光标悬停
鼠标连续点击
二、窗体事件1、load()语法:$(selector).load(function)
当指定的元素已加载时,会发生load事件
window.onload必须等待网页中所有的内容加载完毕后(包括图片、flash、视频等)才能执行
例:页面已加载进行提示
效果图:
1234567<script src="js/jquery.min.js"></script><script> $(window).load(function(){ alert("图片已载入&quo ...
第5章:jQuery的DOM操作二
CH05-JQuery的DOM操作二本章目标
掌握jQuery操作CSS样式的使用
掌握jQuery操作文本与属性值内容的使用
掌握jQuery节点属性操作
一、操作CSS样式1、使用css()设置样式值
例:给如下标签设置样式
操作css样式公共HTML代码:
12<p>使用css()为指定的元素设置单个样式</p> <h2>使用css()为指定的元素设置多个样式值</h2>
效果图:
123456789<script src="js/jquery.min.js"></script><script> $(function(){ //点击p段落设置单个样式 $("p").click(function(){ $(this).css("border", "5px solid blue"); ...
JavaScript素材
JavaScript素材
二重循环打印型号图案
百钱买百鸡
万年历
广创学生管理系统
冒泡排序
九九乘法表
斐波拉切数列