本帖最后由 小石姐姐 于 2018-1-24 15:07 编辑
JavaScript笔记
JS的输出 (属性)
document.getElementById("").innerHTML="HTML的代码";
(方法)
document.write("");
JS的事件
onfocus 获得焦点
onblur 失去焦点
onsubmit 提交的时候触发
步骤
1,创建html文档
2,在要去校验的文本框上添加事件
3,触发函数
4,在函数中向文本框后的html的区域中写入一段提示内容
function tips(id, content) {
//获得span元素,并且写入文本框后面的提示
document.getElementById(id + "Span").innerHTML = "<font color='red'size='1'>" + content + "</font>"
}
function checkForm(id, content) { //这个id不能加双引号,不然就写死了,id="username"或者"password".是一个引用
var value = document.getElementById(id).value;
if(value=="") {
document.getElementById(id + "Span").innerHTML = "<font color='red'size='1'>" + content + "</font>"
}
}
<table width="100%" height="100%" border="0" align="center" cellspacing="10">
<tr>
<td>用户名</td>
<!--获得焦点触发事件调用tips方法-->?
<td><input type="text" id="username" name="username" />
<span id="usernameSpan"><!--写在文本框后面-->
</span>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password" />
<span id="passwordSpan">
</span>
</td>
JS的事件总结
onload 当页面加载时
onclick: 单击
onsubmit: 点击提交按钮的时候
onfocus:获得焦点
onblur 失去焦点
onchange:下拉列表改变事件
ondblclick:双击某个元素的事件
键盘操作事件
onkeydown 某个键被按下 :
onkeyup 键盘抬起
onkeypress 键盘敲
鼠标操作事件
onmousedown 鼠标键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移动到某元素上
onunload 用户退出页面
onmouseup 滚动条
使用JS完成后台数据展示的隔行换色的表格
使用JS获得表格的行数
获得到控制的表格元素
var tab1 = document.getElementById("tab1");
获得行数
var len = tab1.rows.length
步骤分析
1,创建一个HTML页面:可以使用后台设计页面
2,确定事件,onload事件
3,触发一个函数,在这个函数中获得操作的表格
4,获得表格的行数
5,遍历表格的行数
6,判断是否是奇数还是偶数
function change() {
//获得要操作的对象的控制权
var tab1 = document.getElementById("tab1");
//获得表格的所有的行数
//var count = tab1.rows.length;
//遍历每行
for(var i = 0; i < tab1.rows.length; i++) {
if(i % 2 == 0) {
//偶数
tab1.rows.style.backgroundColor = "yellow";
} else {
//奇数
tab1.rows.style.backgroundColor = "green";
}
}
}
</script>
</head>
<body>
<table id="tab1" border="1" width="80%" align="center">
表格中的tbody和thead标签
JS中创建数组
new Array();
new Array(size);
new Array(element0,element1,..../elementn);
JQuery
JQuery是一个JS的框架(JS类库),工具类
对传图的JS进行了封装.
企业通常会使用JS框架进行开发
JS的常用框架
JQuery, ExtJS,DWR
JQ的使用,
学习JQuery的语法
引入Juerry $(function(){ }) =(window.onload,等页面加载完成后运行)
可执行多次,在DOM树绘制完成后 执行一次,页面加载后执行
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/712b7a4a07b24342b98ded633c28826a/8b607a77059c459298253a7f17815051.jpg
Juerry在树形图绘制完成后加载
总结1 JQ的入口函数,比JS的入口函数下率高,并且可以执行多次
2 JS对象和JS对象的区别
JQ是一堆JS
3,注意事项 JS对象只能使用JS的方法和属性
JQ对象只能使用JQ的方法和属性
4,相互转换
JQ----JS通过数组的交标获取
JS----JQ通过$()这个将JS括起来即可实现
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/4c5e25cf52214e9f866d9e32f79e3ab3/9a706a3aa8764363bf1135a7cde64261.jpg
JQ完成显示和隐藏
JQ的效果操作
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/27b0fd65debf46eb9a2b46bd5adc2322/6d7df4f9cacb4f53ae01a23d6b9a8482.jpg
show();
使用一:JQ对象.show();
使用二:JQ对象.hide("slow");
slideDown()向下滑动
fadein();淡入
fadeOut();淡出
选择器
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/1c4249321776441f942a483a0c3bcc85/566341cc3946425ba363e80e4294e862.jpg
基本选择器
id选择器
$("#id")
元素选择器
通配选择器
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/26a237c0f24a4d2a90d87b637186734e/b5fc9394b2114af99319c136b2217431.jpg
并列选择器
$("选择器,选择器 ")
层级选择器
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/1d2c8b228e8249498e0d4f48a4ced812/fba7d8fd1e1d4202915cac4d468db84e.jpg
后代选择器 使用空格
子元素选择器 使用>
一下个元素 使用
兄弟元素
过滤选择器
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/f39e7b2fb75b46e896772e1ee2e57117/8bf3f4dd68744c618e92c9c692940fbc.jpg
JQuery对属性的操作的方法
attr();
使用方法一:$("").attr("src");
prop()新版本,css以外的方法
css,用来修饰样式的.
JQuery的DOM操作
常用的方法:
append(); 在某个元素后添加内容
trigger,不仅执行函数体,而且触发浏览器默认的这个函数操作
triggeHandler,只执行函数体
BootStrap
响应式页面,可以在手机,PAD,PC上访问
BOM浏览器对象
window;
Navigator:
Screen
History:
Location: href 跳转页面
DOM:文档对象
添加元素:
element.appendChild()
删除元素
element.removeChild()
创建元素
document.createElement(),document.createTextNode();
修改元素值
innerHTML属性;
JQuery的选择器
基本选择器
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/37df3427e02049929e6b74276c7cd3c8/560c2c7ad3b04ddb8750aa27f62e6d4c.jpg
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/f617b4bd8c634d8ca4c4473a0ee90a4e/ca26b674b0b142eea4380c3f00159e6b.jpg
层级选择器
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/3d7dca1f216f408cac58c1bb9fb73686/f7acc94502f94ee7ba3bf23d2af69dfd.jpg
基本过滤选择器
even;偶数
odd;奇数
eq(index);内容是否相同
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/3c456e1d3f01409293e383cdcfad14dc/0f1c716ef66d4d89af5fcc8bac31d382.jpg
内容选择器
contains(text)是否包含
empty是否为空
has(selector);
parent:父级
属性选择器
表单选择器
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/3571fe57e1a44da997c335239d3c8c92/f60e5c74eb254fb68f3dd4b8f0332e49.jpg
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/90df43a1064c4c18b538da58815feece/449d70f5250a442b9269bffd31fa0284.jpg
checked:复选框被选择
selected:下拉列表选择器
|
|
收藏
淘帖
踩
