(1)jQuery实现全选,反选:
jQuery的each函数遍历DOM元素input,使用prop函数取得当前复选框的状态,由于prop的返回值是bool型 ,通过这个特性可以直接判断,等于false 就重新赋值为true,等于true 就赋值为false;
js代码
<script>
$(document).ready(function(){
$(".check").click(function(){
$("input").each(function(){
$(this).prop("checked",true)
})
})
$(".notcheck").click(function(){
$("input").each(function(){
if($(this).prop("checked") == false) {
$(this).prop("checked",true)
}else{
$(this).prop("checked",false)
}
})
})
}
</script>
html 代码:
<button class="check"> 全选中 </button>
<button class="notcheck"> 反选中 </button><br>
选择1<input type="checkbox" name="select0" value="11"><br>
选择2<input type="checkbox" name="select1" value="12"><br>
选择3<input type="checkbox" name="select2" value="13"><br>
选择4<input type="checkbox" name="select3" value="14"><br>
选择5<input type="checkbox" name="select4" value="15"><br>
选择6<input type="checkbox" name="select5" value="16"><br>
选择7<input type="checkbox" name="select6" value="17"><br>
(2)ajax 检查验证码是否正确:
<script>
$(document).ready(function(){
$("input[name='verif']").blur(function(){
var $verif = $("input[name='verif']").val()
$.ajax({
url: "ajax.php",
type: "post",
data: {verif:$verif},
success:function(data){
if(data == 1){
$("form>span").text("验证码正确").css("color","green")
}else{
$("form>span").text("验证码不正确").css("color","red")
}
}
})
})
});
</script>
php代码:
$p = $_POST;
echo $p["verif"] == 8985 ? 1: 0;
html代码:
<h1>注册</h1>
<form action="">
用户名:<input type="text"><br>
密码:<input type="password"><br>
验证码:<input type="text" name="verif" placeholder="验证码: 8985"> <span class="vef"> </span> <br>
<input type="submit" value="提交 "><br>
</form>
(3)搜索框即时提示
第一步:绑定搜索框的更改事件,每次有改变,ajax就把数据提交给web服务器,在web服务器返回json数据后,将他们遍历添加到li标签中,append到 ul标签内。此时提示文字已经有了,还要加一个鼠标移入事件,但是这个标签是在网页加载完成之后新增的,所以要用到delegate()函数,获取他们的移入、移出动作来改为当前 li 的背景颜色。最后绑定一个点击事件移除这些 li
<script src="./js/jquery-1.12.js"></script>
<script>
$(document).ready(function(){
var sear = $("input[name='search']")
sear.bind('input porpertychange',function(){
$.ajax({
url:"ajax.php",
type:"post",
data:{str:sear.val()},
success:function(data){
$("div ul li").remove()
var res = JSON.parse(data);
if(res.lang){
var len = res.lang.length;
if(len > 0){
for(var i=0;i<res.lang.length;i++){
$("div ul").append("<li>"+res.lang[i]+"</li>")
}
}else{
$("div ul").append("<li> </li>");
}
}
},
error:function(data){
console.log(data);
}
})
});
$("div ul").delegate("li","mouseenter", function(event){
$(this).css("background","#abc8ec");
})
$("div ul").delegate("li","mouseleave", function(event){
$(this).css("background","");
})
});
</script>
第二步:添加一个搜索框一个div 和一个 ul,在ul下面有li,但 li 是通过ajax 新增
html代码:
<body>
搜索 <input type="text" name="search"> <br>
<div><ul></ul></div>
<style>
div{width: 210px;}
div ul li {list-style: none;border-bottom: 1px solid #dcdcdc;}
div ul li:first-child {border-top: 1px solid #dcdcdc}
</style>
</body>
第三步:WEB服务器收到的字符串,是根据用户输入的内容,ajax即时提交过来的。用户输入的与服务器现有的数据进行对比,当找到相同就汇总以 json 格式返回
php代码:
<?php
if ($_POST){
$p = $_POST['str'];
$data = [
"Python","Basic","C语言","Scheme","C shell",
"Java","NXT-G","Fortran","Go","C++","Haskell",
"C#","Scala","PHP","JavaScript","Swift"];
$d = [];
foreach ($data as $key=>$value) {
if( preg_match('/'.strtolower($p).'/', strtolower($value)) ){
$d["lang"][] = $data[$key];
}
}
echo json_encode($d);
}else{
echo json_encode(["lang"=>""]);
}