jQuery-2
// $("li:contains(列表)").css("color","red")//匹配包含给定文本的元素
// $("li:has(.span)").css("color","green")//匹配含有选择器所匹配的元素的元素
// $("li:empty").css("color","blue")//匹配所有不包含子元素或者文本的空元素
// $("li:parent").css("color","#ffff00")//匹配含有子元素或者文本的元素
// $("div:hidden").css("color","red")//匹配所有不可见元素，或者type为hidden的元素
// $("div:visible").css("color","blue")//匹配所有的可见元素
<!--<ul>
<li>列表1</li>
<li>列表2</li>
<li><span class="span">列表3</span></li>
<li>列表4</li>
<li>列表5</li>
<li></li>
</ul>
//0 获取 1 设置
//html() html代码
//text() 文本内容
//val() 交互控件的值
console.log($(".div").html())
console.log($(".div").text())
console.log($(".div").val())
console.log($(":checkbox:eq(0)").val())
$(":checkbox:eq(0)").val("2")
$(".div").html("<h1>1234</h1>")
<div class="div" data-id="1" vale="000">这是一个<span>div</span></div>
<input type="checkbox" checked value="足球"/>
<input type="checkbox" checked="" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="8989" />
</div>
$(function(){
$(".show").click(function(){
$("div").show()
})//如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
$(".hide").click(function(){
$("div").hide()
})//这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。
$(".toggle").click(function(){
$("div").toggle()
})//
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
$(".slideDown").mouseover(function(){
$("div").stop().slideDown(3000)
})
//可以使匹配的元素以“滑动”的方式显示出来。
$(".slideUp").mouseover(function(){
$("div").slideUp()
})
//可以使匹配的元素以“滑动”的方式隐藏起来
$(".slideToggle").mouseover(function(){
$("div").slideToggle()
})
//可以使匹配的元素以“滑动”的方式隐藏或显示
$(".animate").click(function(){
$("div").animate({
width:"500px",
height:"+=50px"
},1000)
})
$(".fadeTo").click(function(){
$("div").fadeTo(1000,0.5)
})
})
<body>
<button class="show">show</button>
<button class="hide">hide</button>
<button class="toggle">toggle</button>
<br />
<button class="slideDown">slideDown</button>
<button class="slideUp">slideUp</button>
<button class="slideToggle">slideToggle</button>
<br />
<button class="fadeIn">fadeIn</button>
<button class="fadeOut">fadeOut</button>
<button class="fadeToggle">fadeToggle</button>
<button class="animate">animate</button>
<button class="fadeTo">fadeTo</button>
<div style="width: 100px;height: 100px;background-color: pink;"></div>
</body>
浙公网安备 33010602011771号