基本筛选器
1.
jq代码
（1）eq匹配一个给定索引值的元素 是从0开始的 查询第2条信息
$("tr:eq(1)").css("color","red")
结果
（2）gt;匹配所有大于给定索引值的元素 查询索引大于1的
$("tr:gt(1)").css("color","green")
结果
（3). lt: 匹配所有小于给定索引值的元素 查询索引小于1的
$("tr:lt(1)").css("color","blue")
结果
HTML代码（1，2，3的HTML代码都是这一个）
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
2.内容
jq代码
（1）显示内容
$("li:contains(列表1)").css("color","red")
结果
（2）显示内容为空的
$("li:empty()").css("color","green")
（3）显示里面的标签
$("li:has(span)").css("color","yellow")
结果
（4）显示里面所有带内容的 li
$("li:parent()").css("color","red")
结果
HTML代码
<ul>
<li>列表1</li>
<li>列表2</li>
<li><span>列表3</span></li>
<li>列表4</li>
<li></li>
</ul>
3、可见性
hidden <!-- visibility:hidden 占位置 可见-->
（2）display :none 不占位置 不可见
<div style="width: 100px;height: 100px;background: aqua;display: none;"></div>
4.属性
jq代码
（1）attr 一个代表获取 两个代表设置
var id=$(".div").attr("data-id")
console.log(id) 选中checkbox 都被选中为checked
$(".div").attr("data-id","2") 将data-id =1 变成2
var u = $(":checkbox:eq(0)").attr("checked")查询checkbox 为索引0 的内容
console.log(u)
if(u === "checked") {
// }
结果、
(2) prop
prop 选中复选框为true，没选中为false
var u2 = $(":checkbox:eq(0)").prop("checked")
console.log(u)
if(u2 === true) {
}
$(":checkbox:eq(3)").prop("checked", false)
结果
$(":checkbox:eq(3)").prop("checked", false)
5.
HTML代码/文本/值
// 0 获取 1设置
（1）html html代码
（2） text() 文本内容
(3) val() 交互控件的值 比如checkbox 、select就可以显示
// console.log($(".div").html())
结果
// console.log($(".div").text())
// console.log($(".div").val())
j结果 没有任何显示
显示value值
// console.log($(":checkbox:eq(0)").val())
val 这就是交互的值 设定一个select的值 然后就可以显示了
// $("#single").val("Single2");
HTML代码
<select id="single">
<option>Single2</option>
</select>
// $(".div").html("<h1>123</h1>")
HTML代码
<div class="div" data-id="1" value="11">这是一个<span>div111</span></div>
<input type="checkbox" checked value="zuqiu"/>
<input type="checkbox" checked="" />
<input type="checkbox" checked="2345" />
<input type="checkbox" checked="checked" />
6.动画效果
js代码
（1）基础
$(".show").click(function() {
$("div").show()
})
$(".hide").click(function() {
$("div").hide()
})
$(".toggle").click(function() {
$("div").toggle()
})
HTML代码
<!--display:none-->
<button class="show">show</button>
<button class="hide">hide</button>
<!-- toggle：如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。-->
<button class="toggle">toggle</button>
<div style="width: 100px; height: 100px;">
</div>
（2） 滑动
JS代码
// stop() 方法停止当前正在运行的动画。
$(".slideDown").mouseover(function() {
$("div").stop().slideDown(3000)
})
$(".slideUp").mouseover(function() {
$("div").slideUp(3000)
})
$(".slideToggle").mouseover(function() {
$("div").slideToggle()
})
HTML代码
<!--滑动-->
<!-- height 是变化的-->
<button class="slideDown">slideDown</button>
<button class="slideUp">slideUp</button>
<button class="slideToggle">slideToggle</button>
<div style="width: 100px; height: 100px;">
</div>
（3） 淡入淡出
JS代码
$(".fadeIn").click(function() {
$("div").fadeIn()
})
$(".fadeOut").click(function() {
$("div").fadeOut()
})
$(".fadeToggle").click(function() {
$("div").fadeToggle()
})
<!--opacity 是变化的-->
<!--opacity rgba-->
<!-- 淡入淡出-->
<button class="fadeIn">fadeIn</button>
<button class="fadeOut">fadeOut</button>
<button class="fadeToggle">fadeToggle</button>
<button class="fadeTo">fadeTo</button>
<!--<br> 用于创建自定义动画的函数。-->
<button class="animate">animate</button>
<div style="width: 100px; height: 100px;background-color: pink;">
</div>
（4）自定义动画
JS代码
$(".fadeTo").click(function() {
//时间 ：1000 透明度：0.5
$("div").fadeTo(1000, 0.5)
})
HTML代码
<!--<br> 用于创建自定义动画的函数。-->
<button class="animate">animate</button>
<div style="width: 100px; height: 100px;">
</div>