jQuery实现全选，反选
jQuery的each函数遍历DOM元素input，使用prop函数取得当前复选框的状态，由于prop的返回值是bool型 ，通过这个特性可以直接判断，等于false 就重新赋值为true，等于true 就赋值为false;
js代码
$(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)
}
})
})
}
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>
ajax 检查验证码是否正确
通过光标离开输入框触发函数 blur()，发送验证码给web服务器，web服务器返回1或者 0，执行成功后 success 函数根据返回值提示验证码正确或者 不正确
js代码
$(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")
}
}
})
})
});
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>
搜索框即时提示
绑定搜索框的更改事件，每次有改变，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"=>""]);
}
637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
