jquery中的链式编程
$(function () {
//需求:鼠标点击span,让他下面的div显示出来。让其他的div隐藏。
$(".parentWrap span").click(function () {
// $(this).next().show();
// //让其他的隐藏
// //点击的span的父亲li,的所有的兄弟元素li,的孩子元素div全部隐藏。
// $(this).parent("li").siblings("li").children("div").hide();
//链式编程
$(this).next().show().parent("li").siblings("li").find("div").hide();
});
})
$(window).ready(function () {
//需求:鼠标放入li中,其他的li半透明,当前盒子,opacity值为1;离开wrap的时候所有的li全部opacity值为1;
$(".wrap").find("li").mouseenter(function () {
//链式编程
$(this).css("opacity",1).siblings("li").css("opacity",0.4);
});//这段代码的意思是除了访问元素为透明,其他元素都是半透明(不透明opacity 最大值为1)
//离开wrap的时候所有的li全部opacity值为1;
$(".wrap").mouseleave(function () {
$(this).children().children("li").css("opacity",1);
// $(".wrap li").css("opacity",1);
});
});
jquery中的隐式迭代
隐式 对应的是 显示,隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用
DOM对象转换成jQuery对象:
var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1
// $(document).ready(function(){}); // 调用入口函数
// 此处是将document这个js的DOM对象,转换成了jQuery对象,然后才能调用jQuery提供的方法:ready
jQuery对象转换成DOM对象:
// 第一种方式
var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 (推荐使用此方式)
// 第二种方式
var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2
$(function () {
//需求:隔行变色:鼠标放进去还要变色
var jqli1=$("li:odd");
var jqli2=$("li:even");
jqli1.css("background","pink");
jqli2.css("background","yellow");
//鼠标放进去变色 移开恢复
//计数器
var color="";
$("li").mouseenter(function () {
color=$(this).css("background");
$(this).css("background","blue");
});
//移开恢复
$("li").mouseleave(function () {
$(this).css("background",color);
});
});