第八节 特效、选择器、过滤器
2018-06-13 本文已影响5人
最美下雨天
1、特效
image.png
image.png
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<style type="text/css">
div{
border: 1px solid #000000;
height: 200px;
width: 200px;
text-align: center;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("#showId").click(function(){
$("#divtag").show();
});
$("#hideId").click(function(){
$("#divtag").hide();
});
$("#toggleId").click(function(){
$("#divtag").toggle();
});
})
</script>
</head>
<body>
<div id="divtag">div标签</div>
</br>
<input type="button" value="hide" id="hideId"/>
<input type="button" value="show" id="showId"/>
<input type="button" value="toggle" id="toggleId"/>
</body>
</html>
网页显示：
image.png
2 、基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="div1">DIV</div>
<span class="span1">SPAN</span>
<p class="span1">P <button>Button</button></p>
<script type="text/javascript">
//全局选择器
//选取body下面所有的标签
var arr=$("body *");
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//类选择器
var arr1=$(".span1");
for (var i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
}
//标签选择器
var arr2=$("span");
for (var i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
}
//id选择器
var arr3=$("#div1");
for (var i = 0; i < arr3.length; i++) {
console.log(arr3[i]);
}
//群组选择器
$("#div1,.span1").css("color","red");
</script>
</body>
</html>
3、层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<ul class="topnav">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Nested item 1</li>
<li>Nested item 2</li>
<li>Nested item 3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<li>Item 4</li>
<li>Item 5</li>
<script type="text/javascript">
//层级选择器
//查找<ul class="topnav">下面所有的li
var arr1=$(".topnav li");
for (var i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
}
console.log("---------------分割线----------------");
//查找ul下面所有的li，不包括孙子节点
var arr2=$(".topnav> li");
for (var i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
}
console.log("---------------分割线----------------");
//查找ul后的第一个li元素
var arr3=$(".topnav+ li");
for (var i = 0; i < arr3.length; i++) {
console.log(arr3[i]);
}
console.log("---------------分割线----------------");
//查找ul下的所有的li元素
var arr4=$(".topnav~ li");
for (var i = 0; i < arr4.length; i++) {
console.log(arr4[i]);
}
console.log("---------------分割线----------------");
</script>
</body>
</html>
网页显示：
image.png
4、筛选器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>东莞</li>
</ul>
<script type="text/javascript">
//筛选器
//获取第一个li元素
var arr1=$("li:first");
for (var i = 0; i < arr1.length; i++) {
console.log(arr1[i].innerHTML);
}
console.log("---------分割线----------");
//获取最后一个li元素
var arr2=$("li:last");
for (var i = 0; i < arr2.length; i++) {
console.log(arr2[i].innerHTML);
}
console.log("---------分割线----------");
//获取下标为奇数的li元素
var arr3=$("li:odd");
for (var i = 0; i < arr3.length; i++) {
console.log(arr3[i].innerHTML);
}
console.log("---------分割线----------");
//获取下标为偶数的li元素
var arr4=$("li:even");
for (var i = 0; i < arr4.length; i++) {
console.log(arr4[i].innerHTML);
}
console.log("---------分割线----------");
//获取下标为2的li元素
var arr5=$("li:eq(2)");
for (var i = 0; i < arr5.length; i++) {
console.log(arr5[i].innerHTML);
}
console.log("---------分割线----------");
//获取下标大于2的li元素
var arr6=$("li:gt(2)");
for (var i = 0; i < arr6.length; i++) {
console.log(arr6[i].innerHTML);
}
console.log("---------分割线----------");
//获取下标小于2的li元素
var arr7=$("li:lt(2)");
for (var i = 0; i < arr7.length; i++) {
console.log(arr7[i].innerHTML);
}
console.log("---------分割线----------");
</script>
</body>
</html>
网页显示：
image.png
5、筛选器（contains、has）
网页显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>东莞<span>小城市</span></li>
</ul>
<script type="text/javascript">
//筛选器
//获取li中文本是“上海”的元素
var arr1=$("li:contains('上海')");
for (var i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
}
console.log("-----------分割线-----------");
//获取li中包含span标签的元素
var arr2=$("li").has("span");
for (var i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
}
</script>
</body>
</html>
image.png
6、筛选器(hidden、visible)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<div style="display:none;">Hider!</div>
<div>Hider!</div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<input type="hidden" value="隐藏域" />
<script type="text/javascript">
// :hidden 主要用来过滤隐藏域和display设置为none的元素
//:visible 过滤页面上可见的元素
var arr=$("body *:visible");
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
console.log("--------分割线-------");
var arr=$("body *:hidden");
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
console.log("--------分割线-------");
</script>
</body>
</html>
网页显示：
image.png
