jQuery_方法_事件
方法
<div class="father">
<ul>1
<li>2</li>
<li>3</li>
<li>4</li>
<div>5</div>
<span>6</span>
<p>7</p>
</ul>
<div>鞠婧祎</div>
<ol>1
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
<script src="./jquery-3.1.1.min.js"></script>
<script>
// find()方法
// 获取当前元素集合种的每个元素的后代
$(".father").find("li").css("color","#096");
// 在给定的父元素下匹配所有的子元素
// children()方法
$(".father").children("ul").css("color","#096");
// next()下一个li
// js nextElementSibling
$(".father").children().first().next("div").css({"width":"100px","height":"100px","background-color":"#096"});
//prev 上一个
$(".father").children().last().children().last("li").css("color","#096");
$(".father").children().last().children().last("li").prev().css("color","#096");
// nextAll() 下面的全部
$(".father").children().nextAll().css("color","#096");
$(".father").children().last().children().last().prevAll().css("color","#096");
// siblings() 获取匹配集合种每个元素的同胞,通过选择器进行筛选
$(".father").children().first().css("color","#096");
$(".father").children().first().siblings().css("color","#096");
//siblings() 里面不写东西则取反
$(".father").children().first().children().siblings("li").css("color","#096");
</script>
事件
<button>Game Over</button>
<div style="width: 100px;height: 100px;background-color:#096;"></div>
<script src="./jquery-3.1.1.min.js"></script>
<script>
// 绑定事件
// js内联模式 动态绑定 addEventListener
// 第一种:直接使用事件名
$("button").click(function(){
alert("Game Over");
});
// 第二种方式 on(事件,function)
$("button").on("click",function(){
alert("Game Over");
});
// 第三种方式:bind(事件,function)
$("button").bind("click",function(){
alert("Game Over");
});
// 解绑事件
// off()通常用于移除通过on方法绑定的事件
$("button").off("click");
// unbind()
$("button").unbind();
// 复合事件
$("div").hover(function(){
$("div").css("background-color","#ddd");
},function(){
$("div").css("background-color","#096");
});
</script>