要实现的效果，点击一个li标签，当前li标签的下一个li标签内的img弹出来，同时，让其他弹出的img隐藏
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery的链式操作</title>
<link rel="stylesheet" type="text/css" href="css/6.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$("ul").find("li:eq(0)").click(function(){
$(this).addClass("current") //为当前节点添加current类名的样式
.next().fadeIn("slow") //显示下一个元素节点
.parent().siblings().find(".current").removeClass("current")
//找到另一个类名为.current的节点，并删除其类名
.next().hide();
});
/*
current这个类是给li标签添加亮度的
代码思路是，点击第一个li标签时，给当前的li标签添加亮度，让当前所在的ul的第二个li标签慢慢弹出；再去找ul标签里面有弹出的
代码解释
$("ul").find("li:eq(0)");是找ul标签里面的第一个li标签。
点击li标签的时候，
$(this),代表选中的那个li标签。
$(this).addClass("current");给选中的li标签添加一个current类。
next()表示下一个li标签，也就是img外面的li标签
fadeIn("slow"); img慢慢弹出
parent()指的是当前选中的li标签的parent，此时所在的位置就是ul标签了
siblings(),此时指向到了ul标签的姐妹。
find(".current"), 找到另一个类名为.current的节点，
removeClass("current") 找到后移除。此时所在的是li的第一个标签
next().hide(),找到它的下一个标签，隐藏。
*/
});
</script>
</head>
<body>
<div class="containt">
<ul>
<li>萌宠：猫</li>
<li></li>
</ul>
<ul>
<li>萌宠：狗</li>
<li></li>
</ul>
<ul>
<li>萌宠：鼠</li>
<li></li>
</ul>
<ul>
<li>萌宠：兔</li>
<li></li>
</ul>
</div>
</body>
</html>
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery控制页面css</title>
<link rel="stylesheet" type="text/css" href="css/13.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$(".nav li").mouseover(function(){
$(this).addClass("current"); //添加一个类名
}).mouseout(function(){
$(this).removeClass("current"); //删除一个类名
});
})
</script>
</head>
<body>
<div class="nav">
<ul>
<li>兄弟连</li>
<li>兄弟会</li>
<li>猿代码</li>
<li>专家讲师</li>
<li>战地日记</li>
<li>小电影</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery控制页面css</title>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$("div").css("color","red") //颜色
.css("fontSize","30px") //字体大小
.css("fontweight","bold") //字体加粗
.css("textAlign","center") //字体居中
.css("padding","100px"); //内补白
})
</script>
</head>
<body>
<div>让学习成为一种习惯</div>
</body>
</html>
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery对页面的事件处理</title>
<link rel="stylesheet" type="text/css" href="css/15.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
var s = ["大师傅","二师兄","小弟弟"]; //主语数组
var v = ["在冰箱里","梦中女孩","你在梦中"]; //状语数组
var o = ["洗澡","唱歌","说话"]; //动词数组
var snum = 0,vnum = 0,onum = 0; //数组的偏移量
var stime = 0,vtime = 0,otime = 0; //记录定时器的值
$("button").click(function(){
stime = setInterval(function(){ //主语开始随机
snum = ++snum%(s.length);
$("li:eq(0)").html(s[snum]);
},100);
vtime = setInterval(function(){ //状语开始随机
vnum = ++vnum%(v.length);
$("li:eq(1)").html(v[vnum]);
},100);
otime = setInterval(function(){ //动词开始随机
onum = ++onum%(o.length);
$("li:eq(2)").html(o[onum]);
},100);
});
$("li").click(function(){ //jQuery对象集合绑定点击事件
var name = $(this).attr("class");
if(name == "0"){
clearInterval(stime); //主语抽取
}else if(name == "1"){
clearInterval(vtime); //状语抽取
}else if(name == "2"){
clearInterval(otime); //动词抽取
}
});
});
</script>
</head>
<body>
<div>
<h1>点击对应的文字，即停止滚动</h1>
<ul>
<li class="0">123</li>
<li class="1">123</li>
<li class="2">123</li>
</ul>
<button>开 始</button>
</div>
</body>
</html>
- ajax的封装
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 处理页面动画效果</title>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$.ajax({
url: "http://localhost:3000/textajax", //请求地址
type:"get", //请求方式
dataType:"text", //接收数据的格式
success: function(msg){ //执行成功的回调函数
alert(msg);
},
error:function(){ //执行失败的回调函数
alert("ajax请求错误");
}
});
});
</script>
</head>
<body>
</body>
</html>
/**
服务器端代码
*/
app.get("/testajax",function(req,res){
res.send("你已经学会jQuery了ajax文本");
});
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次选择器</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/04.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>编程语言排名</h1>
<ul>
<li id="one">
<ul>
<li>java语言占例:</li>
<li></li>
</ul>
</li>
<li id="two">
<ul>
<li>c语言占例:</li>
<li></li>
</ul>
</li>
<li id="three">
<ul>
<li>c++语言占例:</li>
<li></li>
</ul>
</li>
</ul>
</body>
</html>
<script>
/**
@param
obj： jQuery对象
val： 所占的百分比
color： 进度条填充颜色
return void
*/
var progress = function(obj,val,color){
var i = 0; //计数器
var length = 2000; //进度条最大长度
val *= 10; //为了体验感，内部把val值放大十倍
var flag = setInterval(function(){
i ++;
if(i > val){
clearInterval(flag); //达到指定的值后，就清除计数
}else{
obj.html(i/10+"%").css("background",color).css("width",(i/1000)*length+"px");
}
},10);
};
/**
关于"li:eq(index)"它为jQuery基本过滤选择器（在此提前学习）
含义为：选取索引等于index的元素(index从0开始)
*/
progress($("#one ul li:eq(1)"),20,"red");
progress($("#one+li ul li:eq(1)"),14,"green");
progress($("#two~li ul li:eq(1)"),7,"pink");
</script>
- 注意，这段js代码要放在body体后面才可以生效。因为它是改变的原css
内容过滤选择器 contains(内容)") 感觉这个跟全文索引有点相似
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容过滤选择器</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/06.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>电话号码过滤</h1>
<input type="text" name="search">
<div>
<button>搜索指定号码的人员</button>
<button>查找未录入号码的人员</button>
</div>
<ul>
<li>张三：<span>186123123123</span></li>
<li>李四：<span>186321321321</span></li>
<li>王五：<span>186132132132</span></li>
<li>赵六：<span></span></li>
<li>钱七：<span>186312312312</span></li>
<li>孙八：<span></span></li>
</ul>
</body>
</html>
<script>
//绑定第一个"搜索指定号码的人员"按钮
$("button:contains(搜索)").click(function(){
//使用表单过滤选择器获取
var val = $(":text").val();
//首先让所有待选项全部隐藏
$("li").css("display","none");
//显示被选择的选项
$("li:contains("+val+")").css("display","block");
});
//绑定第二个"查找未录入号码的人员"按钮
$("button:contains(查找)").click(function(){
//同上，让所有待选项全部隐藏
$("li").css("display","none");
/**
parent方法：取得一个包含着所有匹配元素的唯一父元素的元素集合
*/
$("span:empty").parent().css("display","block");;
});
</script>
图片上第一个翻到最后一个，再从最后这一个翻到第一个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可见性过滤选择器</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/07.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>直隐直现的轮播图</h1>
</body>
</html>
<script>
var i = 0; //定义帧数的变量
var len = $("img").length - 1; //判断执行方向
setInterval(function(){
/**
next()方法：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
prev()方法：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
*/
if(i++%(2*len) < len){
$("img:visible").css("display","none").next().css("display","block");
}else{
$("img:visible").css("display","none").prev().css("display","block");
}
},1000);
</script>
表单对象属性过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单对象属性过滤选择器</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/10.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>我的邮箱</h1>
<ul>
<li><input type="checkbox" name="email[]" value="1"> 宝龙来信 内容:xxxxxx</li>
<li><input type="checkbox" name="email[]" value="2"> 万涛来信 内容:请进入</li>
<li><input type="checkbox" name="email[]" value="3"> 明霞来信 内容:请双击</li>
<li><input type="checkbox" name="email[]" value="4"> 滔滔来信 内容:保密</li>
</ul>
<div>
<button>全选</button> <button>反选</button> <button>全不选</button>
</div>
</body>
</html>
<script>
/**
prop()方法和attr()方法的功能和用法一样：
注意：在jQuery1.6以上,若要检索和更改DOM属性时候，使用prop()方法
比如：checked、selected或disabled等
原因：随着一些内置属性，当删除属性时会报错。
*/
$("button:contains(全选)").click(function(){
$("input").prop("checked",true);
});
$("button:contains(反选)").click(function(){
var objchecked = $("input:checked");
$("input:not(:checked)").prop("checked",true);
objchecked.prop("checked",false);
});
$("button:contains(全不选)").click(function(){
$("input").prop("checked",false);
});
</script>
