JavaScript程序开发笔记|持续更新

//弹出
alert('第一个语言');
//点击超链接弹出||内嵌jsp
<a href="javascript:alert('内嵌方式二')">5456446464</a>

//事件onclick
<input type="button" onclick="alert('我被点击了')" value="点击">
//点击隐藏
文档获取id（header2）
<input onclick="document.getElementById('header2').style.display='none' " type="button" value="隐藏"/>
var sz=[1,2,3,4,5,6,7,8,9];
sz.push(6);//在数组后面添加6
alert(sz);
//检测数据类型
alert(typeof input3);*/
//变量类型转换为Int//
var input3=parseInt(input1);
var input4=parseInt(input2);    
window.alert(input3+input4);
//获取div中input状态
var div3=document.getElementById('div1');
var div4=div3.getElementsByTagName('input');
//悬浮事件
onmousever=function(){}
//定时器
//setInterval(函数,时间);时间的单位毫秒ms 1000ms=1s
//关闭定时器
clearInterval(变量名);
//获取控件left值
offsetLeft
//使用class
containEl[i].classList.add("yc");
//撤销class
containEl[i].classList.remove("yc");
//事件操作
click     当按下并释放任意鼠标按键时触发
dbiclick  当鼠标双击时触发
mouseover 当鼠标进入时触发
mouseout  当鼠标离开时触发
change    当内容发生改变时触发，一般多用于对象
mousedown 当按下任意鼠标按键时触发
mouseup   当释放任意鼠标按键时触发
mousemove 在元素内当鼠标移动时持续触发
//单一添加事件需要on 如onclick,onmouseout
div[3].onmouseout=function(){}
//添加事件监听不需要on,如下
div[3].addEventListener("mouseout",function(){});
//键盘事件
window.addEventListener("keydown",function(even){})

Javascrpit----------------- 执行方式--------------------Javascrpit

//执行方式一
<input type="button" id="zx" value="执行">
<input type="button" id="bjk" value="背景">
<script>
var bjkj= document.getElementById('bjk');
var bjk1= document.getElementById('header2');
bjkj.onclick=user2;
function user2(){
bjk1.style.background='#0f0';
}
document.getElementById('zx').onclick=user1;
function user1(){
document.getElementById('color').style.background='#f00';
}
</script>
//定时器执行
var iNow=0;
function fn1(){
iNow++;
console.log(iNow);
}
setInterval(fn1,1000);
//第二种写法
var iNow=0;
setInterval(function(){
iNow++;
console.log(iNow);
},1000);
//关闭定时器
var iNow=100;
var timer=setInterval(function(){
iNow+=10;
oDiv.style.left=iNow+'px';
},10);
btn.onclick=function(){
clearInterval(timer);
}

Javascrpit-----------------进阶分区-----------------Javascript

//多重事件构造
for (var i = 0; i < tp.length; i++) {
(function (i) {

})(i)
}

jquery学习笔记分区——————javascript分界线

//标签选择器
//$("h3").css("background-color","blue");
//类选择器
//$(".title").css("background-color","pink");
//ID选择器
//$("#bbx").css("background-color","gray");
//并集选择器
//$("#bbx,.title").css("background-color","green");
//交集选择器
//$("h3.title").css("background-color","purple");
//全集选择器
$("*").css("background-color","hotpink");
//后代选择器
//$("#menu span").css("background","red");
//子选择器
//$("#menu>span").css("background","blue");
//紧邻选择器
//$("#h2+dl").css("background","green");
//同辈选择器
//$("h2~dl").css("background","pink");
//属性+值的选择器
//$("h2[class=odds]").css("background-color", "hotpink");
//复合选择器
//$("li[class=evens][title*=y]").css("background-color", "#0f0");

//显示隐藏
$("ul").toggle();
或者//显示隐藏使用滑动效果
$("ul").slideToggle();

//获取div中的标签代码
$("div").html();

//节点操作
var $nodeList=$("
死神
");
//ul的内部追加后置节点
//$("ul").append($nodeList);
//或者
//$nodeList.appendTo("ul");
//2.ul的内部追加前置节点
//$("ul").prepend($nodeList);
//或者
//$nodeList.prependTo("ul");
//3.外部插入后置节点
//$("ul").after($nodeList);
//4.外部插入前置节点
//$("ul").before($nodeList);
//$nodeList.insertBefore("ul");
//5.替换节点
//$("ul li:eq(1)").replaceWith($nodeList);
//$nodeList.replaceAll("ul li:eq(2)");
//克隆节点 clnoe(true)是否需要克隆 true为是 false为否
//$("ul li:eq(1)").clone(true).appendTo("ul");
//删除节点
//$("ul li:eq(2)").remove();//整个节点带结构删除
//$("ul li:eq(2)").detach();
//$("ul li:eq(2)").empty();

//事件操作-----------------------------分解线-----------------------------事件操作\\
//鼠标悬浮事件(mouseover)及鼠标移开事件(mouseout)
//代码示例
("#nav ul li").mouseover(function(){
//$(this).addClass("heightlight");
$(this).css("background-color","#f00");
}).mouseout(function(){ //$("#nav ul li").removeClass("heightlight"); $(this).css("background-color","#fff");
注：当有多个控件(如li)时,使用this可以只选择单独控件，如：
$("#nav .navsBox ul li").mouseover(function(){
$(this).addClass("onbg");
}).mouseout(function(){
$(this).removeClass("onbg");
});

//键盘按下事件keyEvents(keydown)
//代码示例
$(function(){
//键盘按下事件   events为赋值常量，当按下键盘后将键盘值赋给events，判断events的keyCode键值为13时弹出提示框
$(document).keydown(function(events){
//判断是否是回车键
if(events.keyCode=="13"){
alert("你确定要提交吗?")
} }); });

//焦点事件 focus blur
//代码示例
$(function(){
//焦点执行事件
$("input").focus(function(){
$(this).css("background-color","skyblue");
});
//失去焦点事件
$("input").blur(function(){
$(this).css("background-color","white");
});
});

Style属性--------------分界线----------------Style属性

opacity: 0.5;//透明度 0为完全透明 1为不透明
cursor:pointer;//让鼠标变为手掌 cursor为手型
placeholder="请输入想要的内容"//placeholder为input标签中的属性
vertical-align: middle;"让图片与文字存在一条线上"
text-overflow: ellipsis;//超出部分使用...代替
overflow: hidden;//溢出隐藏//超出布局不显示
white-space: nowrap;//强制文本不换行
box-shadow: 5px 10px 10px rgb(218, 216, 216);//控件阴影

jquery进阶---------------分界线-------------------jquery进阶

//获取.b为第几个.b
var index1=$(".b").index($(this));
//单个css
$(this).css("border","1px solid #000");
//多个css
$(this).css({"border":"1px solid #000","opacity":"0.5","cursor":"pointer"});
//多样式操作
$("dd").click(function(){
$(this).toggleClass("current");
});
//删除最后一列
$("tr td:last-child").remove();
//移除第一列
//$("tr td:first-child").remove();
//移除指定的列, 注:这种索引从1开始,不是eq的0开始哦
//$("tr td:nth-child(2)").remove();
//移除第一列之外的列
//$("tr td:not(:nth-child(1))").remove();