<script src="jquery.js"></script>
文档处理:
-----内部插入
var test=$("<li>test</li>"); 创建
$("ul").append(test); 添加到ul标签中(最后加入)
appendTo()； 同上
prepend(); 插入标签中前面
prependTo(); 同上，反向用
-----外部插入
after(); 往选中的元素外部前面添加
before(); 往选中的元素外部后面进行添加
--
empty() 将元素内部的内容删除
remove() 将元素的标签移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
select{
width:150px;
height:300px;
}
</style>
</head>
<body>
<select name="fruit" id="fruit" multiple></select>
<input type="button" value="<---" onclick="toleft();">
<input type="button" value="<===" onclick="totalleft();">
<input type="button" value="--->" onclick="toright();">
<input type="button" value="===>" onclick="totalright();">
<select name="fish" id="fish" multiple>
<option value="">大鱼</option>
<option value="">小鱼</option>
<option value="">虾米</option>
<option value="">甲鱼</option>
<option value="">咸鱼</option>
<option value="">苹果</option>
<option value="">香蕉</option>
<option value="">菠萝</option>
<option value="">西瓜</option>
</select>
</body>
<script src="jquery.js"></script>
<script>
function toleft(){
// append()
$("#fish option:selected").appendTo("#fruit");
}
function totalleft(){
$("#fish option").appendTo("#fruit");
}
function toright(){
$("#fruit option:selected").appendTo("#fish");
}
function totalright(){
$("#fruit option").appendTo("#fish");
}
</script>
</html>
左右元素选择
事件：
click,ondbclick,onblur,onfocus,onmouseover,onmouserout,onkeyup,onkeydown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="400px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
<script src="jquery.js"></script>
<script>
$("tr").mouseover(function(){
$(this).css("background-color","red");
});
$("tr").mouseout(function(){
$(this).css("background-color","white");
})
</script>
</html>
鼠标移动表格变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" placeholder="qingshu" >
</body>
<script src="jquery.js"></script>
<script>
$("input[type=‘text‘]").focus(function(){
var v = $(this).val();
if(v == "请输入关键字"){
$(this).val("");
}
});
$("input[type=‘text‘]").blur(function(){
var v = $(this).val();
if(v == ""){
$(this).val("请输入关键字");
}
})
</script>
</html>
输入文本框
$("xxx").on("click",function(){})
$("xxx").off("click",function(){})
阻止事件发生
function cc(){alert("xxxx");
return false; //阻止
}
重点：表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" id="info" method="get">
用户名：<input type="text" desc="username"><br>
密码：<input type="password" desc="password"><br>
邮箱：<input type="text" desc="mail"><br>
地址：<input type="text" desc="addr"><br>
<input type="submit" value="提交" >
</form>
</body>
<script src="jquery.js"></script>
<script>
$(":submit").click(function(){
var flag = true;
$(".err").remove();
$("input[type=‘text‘],input[type=‘password‘]").each(function(){
var v = $(this).val();
if(v.length == 0 ){
flag = false;
var desc = $(this).attr("desc");
$(this).after($("<span class=‘err‘>" + desc + "必填</span>"));
// return false;
}
});
return flag;
})
</script>
</html>
页面加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.js"></script>
<script>
$(function(){
$("div").click(function(){
console.log("dsadsadsa");
})
});
$(document).ready(function(){
$("div").click(function(){
console.log("dsadsadsa");
})
});
</script>
</head>
<body>
<div>
dsjandksandksank
</div>
</body>
</html>
xx
时间： 2024-10-03 19:22:10