js基础知识

来源：互联网发布：0基础自学英语软件编辑：程序博客网时间：2024/05/22 06:53

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div {
width: 100px;
height: 100px;
}

.show {
display: block;
}

.hide {
display: none;
}
</style>
</head>

<body>


















<div id="div">

</div>
<input type="text" id="input" />
<input type="text" class="input" />
<input type="text" class="input" />
<input type="text" class="input" />
<input type="text" class="input" />
<input type="text" class="input" />
<font>0</font>

</body>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

$("#div").hover(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","green");
});

/*$("#input").bind("blur",function(){
console.log("事件调用了");
});*/

/*function $(param) {
var obj;
if(typeof param == "string") {
var op = param.substr(0, 1);
var exp=param.substr(1,param.length-1);
if(op == "#") {
obj = document.getElementById(exp);
obj.blur = function(p) {
obj.onblur = p;
}
}else if(op=="."){
obj=document.getElementsByClassName(exp);
obj.blur=function(p){
for(var i in obj){
obj[i].onblur=p;
}
}
}
return obj;
}
}

$(".input").blur(function() {
alert("获取焦点了");
});*/

/*$("#input").focus(function(){
$(this).css("background-color","red");
});

$("#input").blur(function(){
$(this).css("background-color","green");
});*/

/*$(document).keydown(function(){
alert("有按键按下了");
});*/
/*$(document).keyup(function(){
alert("有按键弹起来了");
});*/

/*$(document).keypress(function(){
alert("有按键按下了");//有可打印的按键按下了
});*/

/*$("#div").mouseover(function(){
alert("有鼠标移进来了");
});
$("#div").mouseout(function(){
alert("有鼠标移出去了");
});*/

/*$("#insert").click(function() {
var index = $("#input").val();
$("#ul li").remove("#ul li:eq("+(parseInt(index)-1-n)+")");
n++;*/
//$("#ul>li:first").clone().appendTo($("#ul"));

/*var value = $("#input").val();
var n = $("<li>" + value + "</li>");*/
/*$("#ul>li:eq(0)").after(n);*/
/*n.insertAfter($("#ul>li:eq(0)"));*/
/*$("#ul>li:last").before(n);*/
/*n.insertBefore($("#ul>li:last"));*/
/*});*/

/*$("#insert").click(function() {
var value = $("#input").val();
var n = $("<li>" + value + "</li>");
//$("#ul").append(n);//插入到某个元素的里面,插入到最后面
n.appendTo($("#ul"));
//$("#ul").prepend(n);
n.prependTo($("#ul"));
});*/

/*$("#hide").click(function(){
$("#div").removeClass("show");
$("#div").addClass("hide");
});

$("#show").click(function(){
$("#div").removeClass("hide");
$("#div").addClass("show");
});
$("#showOrHide").click(function(){
$("#div").toggleClass("hide");//如果有,则移除,如果没有,则添加
});*/

/*$("#font").attr("size","7");
$("#font").attr("color","green");
*/

/*$("#div").css("color","red");
$("#div").css("font-size","30px");*/

/*$("#cal").click(function(){
var num1=$("#num1").val();
var num2=$("#num2").val();
var op=$("#opertion").val();
var result=eval(num1+op+num2);
$("#result").html(result);
});*/

/*document.getElementById("cal").onclick=function(){
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
var op=document.getElementById("opertion");
var result=eval(num1+op+num2);
document.getElementById("result").innerHTML=result;
};*/

/*等同于window.onload*/
/*$(function(){*/
/*console.log(document.getElementById("font"));*/
/*});*/
/*会将字符串当成js代码执行*/
/*eval("alert(1+1)");*/

/*1,选择器
2,事件
3,dom操作*/

/*1,id选择器
2,类选择器
3,属性选择器
4,标签选择器*/

/*jquery选择器返回的值通常是jquery对象,不是原生dom对象*/
/*console.log($("#font"));
console.log(document.getElementById("font"));*/

// document.getElementById("font").innerHTML="这是jquery2";
/*$("#font").innerHTML="这是jquery2";*/
//var obj=$("#font")[0];//jquery对象转换成原生dom对象
//var obj=$(document.getElementById("font"));//原生dom对象转换成jquery对象
//debugger;

/*var obj=$(".font");
$.each(obj, function(index,element) {
console.log("第"+index+"个元素为"+element);
});*/

/*var obj=$("div");*/

/*var obj=$(".div > font");*/

/*var obj=$("font:first");*/
/*var obj = $("font:last");*/
// var obj = $("font:eq(2)");
/*var obj = $("font:gt(1)");*/
/*var obj = $("font:lt(2)");*/
/*var obj=$(".font:not(div)");*/

/*父选择器[属性名=属性值]*/
/*var obj=$("input[name=interest]");*/
/*var obj=$("font[size=1]");*/
/*var obj=$("font:odd");*/
/*var obj=$("font:even");*/
/*debugger;*/
</script>

</html>

表单系列化

<body>
<form action="" id="form">
<input type="text" name="productName"> <input type="text"
name="productID"> <input type="text" name="unitPrice">
<input type="text" name="quantityPerUnit"> <input
type="button" id="search">
</form>
</body>
<script type="text/javascript" src="/struts20170918/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("#search").click(function() {
/* 表单序列化 */
var data=$("#form").serialize();
console.log(data);
});
</script>

控制台打印结果：productName=&productID=&unitPrice=&quantityPerUnit=

阅读全文

0 0