本帖最后由 小石姐姐 于 2018-5-4 09:48 编辑
web学习笔记
Java-Web-Day02-CSS&JS
【HTML的块标签】
<div></div> :默认一个div独占一行.
<span></span> :默认在同一行.
【CSS的基本语法】
CSS的基本语法通常包含两个部分：一个是选择器，一个声明.
* 选择器{属性:属性值;属性:属性值...}
【CSS的引入的方式】
行内样式：直接在HTML的元素上使用style属性设置CSS.
<h1 style="color:red;font-size:200px ;">标题</h1>
页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
<style>
h1{
color:blue;
font-size: 40px;
}
</style>
外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
在head标签中使用
【CSS的选择器】
元素选择器：
div{
border:1px solid blue;
width:40px;
height:45px;
}
ID选择器: (一般情况下ID是唯一的)
#d1{
border:2px solid red;
}
类选择器：
.divClass{
border:2px solid yellow;
}
【元素上定义类可以定义多个】
(class="xxx xxx xxx xxx")
类的内容加载是从上往下的,
【CSS的浮动】
使用float属性可以完成DIV的浮动.
float属性的取值:
值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
清除浮动效果：使用clear属性进行清除:
值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
总结：
【CSS的其他选择器】
属性选择器：
<style>
input[type="text"]{
background-color: red;
}
</style>
后代选择器:
div span 查找的是所有div中的所有的span元素.
子元素选择器：
div > span找这个div中的第一层级的span元素.
并列选择器:
选择器,选择器{
}
【CSS的样式】
背景
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
文本
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
字体
属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。
列表
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
marker-offset
【其他】
display : inline 将元素一行显示
solid 边框是实线
【CSS中的盒子模型】
内边距：padding.
边框：border
外边距：margin
【CSS中的定位】
position属性设置定位：
* relative:相对定位
* absolute:绝对定位
* fixde 根据网页的滚动而动(类似页面广告)
使用另外两个属性:left,top
【超链接的伪类】
a:link {color: xxx} //未访问的链接
a:visited {color: xxx} //已访问的链接
a:hover {color: xxx} //鼠标移动到链接上
a:active {color: xxx} //选定链接单击的时候
Java-Web-Day-3-JavaScript基本用法
【JS的组成】
ECMAScript，BOM，DOM
【JS的语法】
* JS的变量声明:
var 变量名 = 数值
变量的类型根据后面的赋值来判定
* JS的数据类型：
* 原始类型：undefined,boolean,string,number,null
* 引用类型：
【JS的运算符】
* 与java中基本一致.有一个 === 类型与值都相同的情况下才会为true.
【JS的语句】
* 与Java中的语句一致.
【简单的表单校验】
* 正则的校验：使用String的match方法和正则中的test方法.
string.match("正则表达式");
正则表达式.test("字符串");
【JavaScript 函数常用事件】
onclick 单击触发事件
ondblclick 双击触发事件
onmouseover 鼠标放在上面触发的事件
onmouseout 鼠标从元素上离开触发的事件
onload 页面加载事件
【JS中的Window对象的定时的操作】
* 设置定时的方法
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 清除定时的方法
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
滚动图片代码实现
<script>
window.onload = function(){
// 设置定时：
window.setInterval("changeImg()",5000);
}
var i = 1;
function changeImg(){
i++;
// 获得图片的控制权：
if(i > 3){
i=1;
}
var img1 = document.getElementById("img1");
img1.src="../img/"+i+".jpg";
}
</script>
【CSS的显示和隐藏的属性】
* display
* block：显示元素：
* none：隐藏元素：
【JS中的BOM对象】(BOM 浏览器对象模型)
Window
* alert(); --弹出对话框 一般做调试用
* setInterval(); 根据时间连续调用方法
* setTimeout(); 根据时间设置调用一次方法
* clearInterval(); 清除
* clearTimeout(); 清除
* confirm(); --弹出一个确认窗口 返回ture或者 flase
* prompt(); --弹出一个可输入的对话框
* open(); --打开一个新窗口
Navigator ：包含的是浏览器的信息
详细查看API
Screen:用来获得屏幕信息:
详细查看API
History:浏览器的历史对象:
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面
Location:包含URL信息的对象
href 设置或返回完整的 URL。 (重要,做用页面跳转)
hash 设置或返回从井号 (#) 开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。
location href 作用是页面的跳转,跟超链接同样的作用
BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。
【JS中的DOM对象】（DOM 文档对象模型）
DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。
Document 对象属性和方法
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName() 返回带有指定名称的对象集合。
document.getElementsByTagName() 返回带有指定标签名的对象集合。
总结
将JS的代码定义成一个文件引入:
<script src="../js/check.js"></script>
获得页面中的元素:
* document.getElementById(“”);
正则的匹配:
JS中有两种匹配正则的方式:
* 使用String对象中的match方法.
* 使用正则对象中的test方法.
BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。 DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。 BOM的内容不多，主要还是DOM。 由于DOM的操作对象是文档（Document），所以dom和浏览器没有直接关系。
Java-Web-Day04-JavaScript高级用法
【JS的输出】
* document.getElementById(“”).innerHTML=”HTML的代码”;
* document.write(“”);
【JS的事件】
* onfocus :获得焦点.
* onblur :失去焦点.
* onsubmit :提交的时候.
【JS的事件的总结】
* onload : 页面加载
* onclick : 单击事件
* onsubmit : 提交事件
* onfocus : 获取焦点事件
* onblur : 移除焦点事件
* onchange :下拉列表改变事件.
* ondblclick: 双击某个元素的事件.
键盘操作事件:
* onkeydown : 键盘按下按键事件
* onkeyup : 键盘松开按键事件
* onkeypress: 键盘按下松开按键事件
鼠标操作事件：
* onmousemove： 鼠标移动事件
* onmouseout： 用户的鼠标移除 HTML 元素上方触发函数
* onmouseover： 用户的鼠标移至 HTML 元素上方触发函数
* onmousedown: 鼠标按下时触发函数
* onmouseup: 鼠标松开是触发函数
* onclick : 鼠标单击事件
【使用JS获得表格的行数】
* 获得到控制的表格元素:
* var tab1 = document.getElementById(“tab1”);
* var len = tab1.rows.length;
function changeColor(){
// 获得要操作的对象的控制权：
var tab1 = document.getElementById("tab1");
// 获得表格的所有的行数:
var count = tab1.rows.length;
// 遍历每行:
for(var i = 0;i<count;i++){
if(i % 2 == 0){
// 偶数行
tab1.rows.style.backgroundColor = "#00FF00";
}else{
// 奇数行
tab1.rows.style.backgroundColor = "#00FFFF";
}
}
}
表格中的tbody和thead标签
function changeColor(){
// 获得操作的表格的控制权:
var tab1 = document.getElementById("tab1");
// 获得tbody中的所有的行.
var len = tab1.tBodies[0].rows.length;
for(var i = 0;i< len ;i++){
if(i % 2 == 0){
tab1.tBodies[0].rows.style.backgroundColor = "green";
}else{
tab1.tBodies[0].rows.style.backgroundColor = "gold";
}
}
}
【DOM的概述】
什么是DOM
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
DOM的使用：
知道document，element，attribute中的属性和方法
【DOM的常用的操作】
获得元素：
* document.getElementById(); -- 通过ID获得元素.
* document.getElementsByName(); -- 通过name属性获得元素.
* document.getElementsByTagName(); -- 通过标签名获得元素.
创建元素：
* document.createElement(); -- 创建元素
* document.createTextNode(); -- 创建文本
添加节点：
* element.appendChild(); -- 在最后添加一个节点.
* element.insertBefore(); -- 在某个元素之前插入.
删除节点：
* element.removeChild(); -- 删除元素
【使用DOM完成对ul中添加一个li元素】
function addElement(){
var city = document.getElementById("city");
// 创建一个元素:
var liEl = document.createElement("li");
// 创建一个文本节点:
var text = document.createTextNode("深圳");
// 添加子节点:
liEl.appendChild(text);
city.appendChild(liEl);
}
【JS中创建数组】
【创建Array对象的语法】
new Array();
new Array(size);
new Array(element0,element1,element2....)
【JS的事件】
下拉的列表的改变的事件.onchange.
【JS的DOM的操作】
创建元素：
添加元素：
【JS的内置对象】
JavaScript Array 对象
JavaScript Boolean 对象
JavaScript Date 对象
JavaScript Math 对象
JavaScript Number 对象
JavaScript String 对象
JavaScript RegExp 对象
JavaScript 全局属性/函数
Array:
Array 对象属性
属性 描述
constructor 返回对创建此对象的数组函数的引用。
length 设置或者返回数组元素的数目
prototype 使您有能力向对象添加属性和方法。
Array 对象方法
方法 描述
concat() 连接两个或更多的数组，并返回结果。
indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素，并向数组添加新元素。
toString() 把数组转换为字符串，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() 返回数组对象的原始值
Boolean:
Boolean 对象属性
属性 描述
constructor 返回对创建此对象的 Boolean 函数的引用
prototype 使您有能力向对象添加属性和方法。
Boolean 对象方法
方法 描述
toString() 把布尔值转换为字符串，并返回结果。
valueOf() 返回 Boolean 对象的原始值。
Date:
Date 对象属性
属性 描述
constructor 返回对创建此对象的 Date 函数的引用。
prototype 使您有能力向对象添加属性和方法。
Date 对象方法
方法 描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear() 已废弃。 请使用 getFullYear() 方法代替。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setTime() setTime() 方法以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds() setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear() 已废弃。请使用 setFullYear() 方法代替。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 已废弃。请使用 toUTCString() 方法代替。
toISOString() 使用 ISO 标准返回字符串的日期格式。
toJSON() 以 JSON 数据格式返回日期字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString() 据本地时间格式，把 Date 对象转换为字符串。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toUTCString() 根据世界时，把 Date 对象转换为字符串。
UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。
Math对象:
Math 对象属性
属性 描述
E 返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2 返回 2 的自然对数（约等于0.693）。
LN10 返回 10 的自然对数（约等于2.302）。
LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
PI 返回圆周率（约等于3.14159）。
SQRT1-2 返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2 返回 2 的平方根（约等于 1.414）。
Math 对象方法
方法 描述
abs(x) 返回 x 的绝对值。
acos(x) 返回 x 的反余弦值。
asin(x) 返回 x 的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 Ex 的指数。
floor(x) 对 x 进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y,z,...,n) 返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n) 返回 x,y,z,...,n中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
String对象:
* charAt();
* indexOf();
* lastIndexOf();
* split();
* replace();
* substring();
* substr();
【JS的全局函数】
【JavaScript 全局属性】
属性 描述
Infinity 代表正的无穷大的数值。
NaN 指示某个值是不是数字值。
undefined 指示未定义的值。
【JavaScript 全局函数】
函数 描述
decodeURI() 解码某个编码的 URI。
decodeURIComponent() 解码一个编码的 URI 组件。
encodeURI() 把字符串编码为 URI。
encodeURIComponent() 把字符串编码为 URI 组件。
escape() 对字符串进行编码。
eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
isFinite() 检查某个值是否为有穷大的数。
isNaN() 检查某个值是否是数字。
Number() 把对象的值转换为数字。
parseFloat() 解析一个字符串并返回一个浮点数。
parseInt() 解析一个字符串并返回一个整数。
String() 把对象的值转换为字符串。
unescape() 对由 escape() 编码的字符串进行解码。
* parseInt();
* parseInt(“11”);
* parseFloat();
* parseFloat(“32.09”);
* 编码和解码的方法：
// 解码
* decodeURI();
* decodeURIComponent();
// 编码
* encodeURI();
* encodeURIComponent();
eval函数：
* 将一段内容当成是JS的代码执行.
//var sss = “alert(‘aaaa’)”;
//eval(sss);
【DOM图解】（重要）
Java-Web-Day05-JQuery
【JQuery的入门】
引入Jquery的js文件.
<script src="../../js/jquery-1.11.3.min.js"></script>
JQuery的入口函数:
// JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高.
// window.onload 等页面加载完成后执行该方法.
// $(function(){}):等页面的DOM树绘制完成后进行执行.
// $相当于JQuery
$(function(){
alert("aaa");
});
$(function(){
alert("bbb");
});
【JS对象和JQ对象的转换】
$(function(){
var $d1 = $("#d1");
// $d1.html("JQ对象的属性");
// 转成JS的对象:
// 一种方式
// $d1[0].innerHTML = "将JQ的对象转成JS对象";
// 二种方式:
$d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";
});
【JQ显示和隐藏】
JQ的效果操作:
* show();
* 使用一:Jq对象.show();
* 使用二:Jq对象.show(“slow”); // slow,normal,fast
* 使用三:Jq对象.show(毫秒值); // 1000
* 使用四:Jq对象.show(毫秒值,function(){});
* hide();
* 使用一:Jq对象.hide();
* 使用二:Jq对象.hide(“slow”); // slow,normal,fast
* 使用三:Jq对象.hide(毫秒值); // 1000
* 使用四:Jq对象.hide(毫秒值,function(){});
* slideDown(); --向下滑动
* 使用一:Jq对象.slideDown();
* 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideDown(毫秒值); // 1000
* 使用四:Jq对象.slideDown(毫秒值,function(){});
* slideUp(); --向上滑动
* 使用一:Jq对象.slideUp();
* 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideUp(毫秒值); // 1000
* 使用四:Jq对象.slideUp(毫秒值,function(){});
* fadeIn(); --淡入
* 使用一:Jq对象.fadeIn();
* 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeIn(毫秒值); // 1000
* 使用四:Jq对象.fadeIn(毫秒值,function(){});
* fadeOut(); --淡出
* 使用一:Jq对象.fadeOut();
* 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeOut(毫秒值); // 1000
* 使用四:Jq对象.fadeOut(毫秒值,function(){});
* animate(); --自定义动画
* toggle(); --单击切换函数
* Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
【JQuery的选择器】
【基本选择器】
id选择器
* 用法:$(“#id”)
类选择器
* 用法:$(“.类名”)
元素选择器
* 用法:$(“元素名称”)
通配符选择器
* 用法:$(“*”)
并列选择器
* 用法:$(“选择器,选择器,选择器”)
选择器演示：
$(function(){
$("#but1").click(function(){
// alert("aaaa");
$("#one").css("background","#bbffaa");
});
$("#but2").click(function(){
$(".mini").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("*").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#two,span,.mini").css("background","#bbffaa");
});
});
【层级选择器】
后代选择器：使用空格分隔 所有后代包含孙子及以下的元素
子元素选择器：使用> 第一层的元素（儿子）
下一个元素:使用+ 下一个同辈元素
兄弟元素:使用~ 后面所有的同辈元素
选择器演示：
<script>
$(function(){
// 后代选择器:
$("#but1").click(function(){
$("body div").css("background","#bbffaa");
});
// body下的第一层div元素
$("#but2").click(function(){
$("body > div").css("background","#bbffaa");
});
// 查找下一个同辈的元素
$("#but3").click(function(){
$("#three + div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("#two ~ div").css("background","#bbffaa");
});
});
</script>
【基本过滤选择器】
基本
:first
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lang1.9+
:last
:lt(index)
:header
:animated
:focus
选择器演示：
<script>
$(function(){
$("#but1").click(function(){
$("#three div:first").css("background","#bbffaa");
});
$("#but2").click(function(){
$("#three div:last").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div:odd").css("background","#bbffaa");
});
$("#but4").click(function(){
$("div:even").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#three div:eq(1)").css("background","#bbffaa");
});
});
</script>
【内容选择器】
内容
:contains(text)
:empty
:has(selector)
:parent
选择器演示：
<script>
$(function(){
$("#but1").click(function(){
$("div:contains('1')").css("background","#bbffaa");
});
});
</script>
【属性选择器】
属性
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]
选择器演示：
将标签中的属性填入大括号中,就是属性选择器
$("input[name='newsletter']").attr("checked", true);
【表单选择器】
表单
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
选择器演示:
<script>
$(function(){
$("#but1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#but2").click(function(){
// $(":text").css("background","#bbffaa");
$("input[type='text']").css("background","#bbffaa");
});
});
</script>
【表单属性选择器】
表单对象属性
:enabled
:disabled
:checked
:selected
【JQ的样式的属性修改】
css
取得第一个段落的color样式属性的值。
$("p").css("color");
将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ "color": "#ff0011", "background": "blue" });
将所有段落字体设为红色
$("p").css("color","red");
逐渐增加div的大小
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
【JQuery中添加和移除样式】
* 如果样式没有事先定义,可以使用css方法为奇数行或者偶数行设置背景颜色.
* 如果已经在css文件中事先将样式定义完成了,不能使用css方法了.使用JQ中的CSS类中的方法：
* addClass();
* removeClass();
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
【JQuery对属性的操作的方法】
* prop();新版本的方法.
* 使用方法一：$(“”).prop(“src”); //获得src的属性
* 使用方法二：$(“”).prop(“src”,”test.jpg”); //更改src属性
* 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
* removeProp();
* addClass()
* removeClass();
【JQuery的DOM操作】
* 常用的方法:
* append(); ---在某个元素后添加内容.
* appendTO(); ---将某个元素添加到另一个元素后.
* remove(); ---将某个元素移除.
文档处理
内部插入
append(content|fn)
appendTo(content)
prepend(content|fn)
prependTo(content)
外部插入
after(content|fn)
before(content|fn)
insertAfter(content)
insertBefore(content)
包裹
wrap(html|ele|fn)
unwrap()
wrapAll(html|ele)
wrapInner(html|ele|fn)
替换
replaceWith(content|fn)
replaceAll(selector)
删除
empty() 清空内容
remove([expr]) 自己都清空掉
detach([expr])
复制
clone([Even[,deepEven]])
【JQuery的遍历】
遍历的方式一：
* $.each(objects,function(i,n){
});
遍历的方式二:
* $(“”).each(function(i,n){
});
遍历的演示:
$(function(){
var arrs = new Array("张森","张凤","张芙蓉");
// 将这个数组转成JQ的对象使用each方法.
/*$(arrs).each(function(i,n){
alert(i+" "+n);
});*/
$.each(arrs,function(i,n){
alert(i+" "+n);
});
});
Java-Web-Day06-jQuery&BootStrap介绍
【JQuery常用事件】
事件
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])
【JQ的事件切换】
* hover(); --鼠标悬停的切换
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
代码:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
【JQ的事件委派】
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
将页面加载之后创建的元素触发的事件委托给父类元素,并触发函数function
代码：
$("父类元素").delegate("未来创建的元素","触发的事件",function(){});
【JQ的事件处理】
on("事件1 事件2...",function(){})
bind("事件1 事件2...",function(){})
可以绑定多个事件去触发同样的函数
trigger
triggerHandler
【BootStrap的概述】
引入的文件
子主题 1
添加一个<meta>标签
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
【BootStrap的全局CSS】
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
使用.row样式定义栅格的行.
定义列：.col-lg-n .col-md-n .col-sm-n .col-xs-n
栅格参数：
子主题 1
布局容器
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
|
|
收藏
淘帖
踩
