标签：动态 fadeout ext stop ide use 数据 color 筛选
运用jQuery时，需要在页面中引入jQuery文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>helloworld</title>
<!-- 1. 在页面中引入jQuery支持 -->
<script src="js/jquery-1.12.4.js"></script>
<style>
#box{width: 200px;height: 200px;background: red;}
</style>
</head>
<body>
<button id="btn">点击我试试</button>
<div id="box"></div>
<script>
// jQuery代码，写在一对script标签中
// 可以使用最简洁的代码，完成JS中复杂的功能！
// $是jQuery的一个函数，表示 : jQuery() == $()
// $("")是jQuery选择器，参考了CSS选择器 #btn->id选择器
// $("#btn").click(fn)表示添加一个单击事件处理函数
$("#btn").click(function() {
// toggle()/slideToggle() jQuery内置动画效果
$("#box").slideToggle();
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
HTML中的代码是同步执行的：按照从上到下的顺序解释执行的
为了保证页面中的标签加载完成之后执行JQuery代码
使用$(function() { ...代码：就是页面标签加载完成执行的代码.. })
*/
$(function() {
// 这里写的代码，就是当页面中的标签全部加载完成执行的代码；类似于window.onload
// 标签选择器:$("标签名称")
$("#btn_tag_selector").click(function() {
// 标签选择器：选择所有的div标签，添加边框
$("div").css({
"border":"solid 1px orange"
})
});
$("#btn_id_selector").click(function() {
// ID选择器：语法$("#id值")
$("#box").css({
"border":"solid 1px red"
})
});
$("#btn_class_selector").click(function() {
// class选择器：语法：$(".class名称")
$(".item").css({
"border":"solid 1px blue",
"background":"#ccc"
})
});
$("#btn_child_selector").click(function() {
// 层级选择器，可以类似css语法一样，使用样式嵌套
// 子元素选择器
$("#container > li").css({
"border":"solid 2px pink",
"background":"#dfdfdf"
})
});
$("#btn_contain_selector").click(function() {
// 层级选择器：包含选择器
$("#container li").css({
"border":"solid 2px pink",
"background":"#006699",
"color":"#fff"
})
});
$("#test").click(function() {
$("#container a").css({
"color":"red",
"text-decoration":"none"
})
});
$("#btn_odd_selector").click(function() {
$("li:odd").css({
"background":"orange"
})
})
})
</script>
</head>
<body>
<button id="btn_tag_selector">标签选择器</button>
<button id="btn_id_selector">id选择器</button>
<button id="btn_class_selector">class选择器</button>
<button id="btn_child_selector">层级选择器：子元素选择器</button>
<button id="btn_contain_selector">层级选择器：包含选择器</button>
<button id="test">测试获取标签中包含的一个深层标签超链接</button>
<button id="btn_odd_selector">:odd</button>
<hr>
<div>这是一个单纯的div标签，没有id和class属性</div>
<div id="box">这是一个div标签，id属性值为box</div>
<div class="item">这是一个div标签1，class属性值为item</div>
<div class="item">这是一个div标签2，class属性值为item</div>
<ul id="container">
<li>这是一个ul中的li标签</li>
<li>这是一个ul中的li标签</li>
<li>这是一个ul中的li标签</li>
<li>这是一个ul中的li标签</li>
<ul>
<li>这是ul中的ul里面的li标签</li>
<li>这是ul中的ul里面的li标签</li>
<li>这是ul中的ul里面的li标签<span>这是span标签</span></li>
<li>这是ul中的ul里面的li标签<a href="#">超链接</a></li>
</ul>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
#box{width: 200px;height: 200px;background: orange;position:absolute;top:50px;left:0px;}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
$("#btn_show").click(function() {
$("#box").show(1000);
})
$("#btn_hide").click(function() {
$("#box").hide(1000);
})
$("#btn_toggle").click(function() {
$("#box").toggle(1000);
})
$("#btn_slideDown").click(function() {
$("#box").slideDown(1000);
})
$("#btn_slideUp").click(function() {
$("#box").slideUp(1000);
})
$("#btn_slideToggle").click(function() {
$("#box").slideToggle(1000);
})
$("#btn_fadeIn").click(function() {
$("#box").fadeIn(1000);
})
$("#btn_fadeOut").click(function() {
$("#box").fadeOut(1000);
})
$("#btn_fadeToggle").click(function() {
$("#box").fadeToggle(1000);
})
$("#btn_fadeTo").click(function() {
$("#box").fadeTo(1000, 0.5);
});
$("#btn_animate").click(function() {
$("#box").animate({left:"500px",top:"100px",width:"100px", height:"50px"},1000)
.animate({top:"400px",left:"300px"}, 500)
.animate({top:"200px", left:"100px"}, 1000)
.animate({width:"200px",height:"100px"}, 400)
.animate({width:"50px",height:"10px"}, 200)
.animate({width:"300px",height:"200px"}, 500);
})
})
</script>
</head>
<body>
<button id="btn_show">显示</button>
<button id="btn_hide">隐藏</button>
<button id="btn_toggle">显示/隐藏 状态切换</button>
<button id="btn_slideDown">卷帘显示</button>
<button id="btn_slideUp">卷帘隐藏</button>
<button id="btn_slideToggle">卷帘显示/隐藏 状态切换</button>
<button id="btn_fadeIn">透明度显示</button>
<button id="btn_fadeOut">透明度隐藏</button>
<button id="btn_fadeToggle">透明度显示/隐藏 状态切换</button>
<button id="btn_fadeTo">切换到指定的透明度</button>
<button id="btn_animate">自定义动画</button>
<div id="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0px;padding:0px;}
#bannel_box{margin:10px auto;padding:5px;border:solid 1px #8f8f8f;border-radius:8px;position:relative;width:800px;height:450px;}
#bannel_box img{position:absolute;width:800px;vertical-align: bottom;border:none;border-radius:8px;display:none;}
#bannel_box img:nth-child(1){display:block;}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
var $index = 0;// 当前正在展示的图片的下标
// 计时函数， 3S更换一次图片
setInterval(function() {
var $next = $index + 1;// 下一张要展示的图片的下标
if($next >= 5) {
$next = 0;
}
$("img").eq($index).fadeOut(1000);//隐藏当前图片
$("img").eq($next).fadeIn(1000);// 显示下一张图片
$index ++;
if($index >= 5) {
$index = 0;
}
}, 3000);
})
</script>
</head>
<body>
<div id="bannel_box">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0;padding:0;}
.nav{list-style:none;height:50px;background-color:#069;}
.nav > li{float:left;height:50px;font-size:20px;color:#fff;width:100px;text-align:center;line-height:50px;}
.nav > li > ul{list-style:none;width:120px;background:pink;display:none;}
.nav > li > ul >li{height:50px;line-height:50px;color:#333;font-size:18px;width:120px;}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 这里面的代码，是当页面中的标签加载完成后执行的
$("li").mouseenter(function() {
// 在事件操作中，可以通过this来标签当前事件触发的元素
// console.log($(this).children());
// console.log($(this).children().last());
$(this).children().last().stop(true).slideDown("slow");
});
$("li").mouseleave(function() {
$(this).children().last().stop(true).slideUp("slow");
})
})
</script>
</head>
<body>
<ul class="nav">
<li><span>首页</span>
<ul>
<li>首页二级菜单</li>
<li>首页二级菜单</li>
<li>首页二级菜单</li>
<li>首页二级菜单</li>
<li>首页二级菜单</li>
</ul>
</li>
<li><span>新闻</span>
<ul>
<li>新闻二级菜单</li>
<li>新闻二级菜单</li>
<li>新闻二级菜单</li>
<li>新闻二级菜单</li>
<li>新闻二级菜单</li>
</ul>
</li>
<li><span>影视</span>
<ul>
<li>影视二级菜单</li>
<li>影视二级菜单</li>
<li>影视二级菜单</li>
<li>影视二级菜单</li>
<li>影视二级菜单</li>
</ul>
</li>
<li><span>音乐</span>
<ul>
<li>音乐二级菜单</li>
<li>音乐二级菜单</li>
<li>音乐二级菜单</li>
<li>音乐二级菜单</li>
<li>音乐二级菜单</li>
</ul>
</li>
<li><span>体育</span>
<ul></ul>
</li>
<li><span>财经</span>
<ul></ul>
</li>
<li><span>八卦</span>
<ul></ul>
</li>
<li><span>美食</span>
<ul></ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0;padding:0;}
#box{margin:50px auto;width:400px;height: 226px;padding:5px;border:solid 1px #cdcdcd;position:relative;}
#box img{width: 400px;border-radius:8px;position:absolute;}
#box img:nth-child(2){height:0;}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 当页面中所有标签全部加载完成的时候，执行的代码
$("#box").mouseenter(function() {
var $that = $(this);
// 隐藏第一张图片
$that.children().first().animate({top:"113px", height:"0px"}, 1000, function() {
// 显示第二章图片
$that.children().last().css({top:"113px"}).animate({top:"5px", height:"226px"}, 1000);
});
});
$("#box").mouseleave(function() {
var $that = $(this);
// 隐藏第二张图片
$that.children().last().animate({top:"113px", height:"0px"}, 1000, function() {
// 显示第一章图片
$that.children().first().css({top:"113px"}).animate({top:"5px", height:"226px"}, 1000);
});
});
})
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DOM操作</title>
<!--
使用JQuery改造瀑布流！
-->
</head>
<body>
<p>
JQuery 的DOM操作
<ul>
<li>1. DOM操作选择标签</li>
<li>2. DOM操作处理标签数据</li>
</ul>
</p>
<p>
JavaScript对象：就是标签本身，也称为DOM对象<br />
var _box = document.getElementById("box")
_box >>>> <div id="box"></div>
jQuery对象：是DOM对象的数组
var $box = $("#box")
$box >>>> [<div id="box"></div>]
</p>
<p>
JQuery DOM操作选择标签
通过函数操作，替代了选择器操作来选中标签
> 选择器：括号中是字符串
> 函数：括号中可以有变量
<ul>
<li>选择器.eq(num)：用于选中指定下标的jQuery对象</li>
<li>选择器.gt(num)：用于选中下标大于指定下标的所有jQuery对象</li>
<li>选择器.lt(num)：用于选中下标小于指定下标的所有jQuery对象</li>
<li>选择所有的子元素: 选择器.children()</li>
<li>选择所有的指定的子元素: 选择器.children("ul")</li>
<li>选择第一个子元素：选择器.first()</li>
<li>选择最后一个子元素：选择器.last()</li>
<li>判断标签是否包含某个class名称：选择器.hasClass("box")</li>
<li>二次筛选：选择器.filter(选择器)；从第一个选择器选中的标签中继续选择满足第二个选择器的标签</li>
<li>二次筛选：选择器.has(子标签选择器)，选择所有包含指定子元素的父标签</li>
<li>二次筛选：父选择器.find(子选择器)，从父选择器选中的标签中的子元素里面，查询符合子选择器的标签元素</li>
<li>next:选择下一个同级元素</li>
<li>prev:选择上一个同级元素</li>
<li>sibings:选择所有的同级元素</li>
</ul>
</p>
<p>
jQuery DOM操作，操作标签数据
内容
属性
样式
标签
</p>
<p>
内容
常规开始标签和结束标签中间的内容操作
var $boxValue = $("#box").text();
$("#box").text("添加的内容")
表单元素的数据
var $name = $("#username").val();
</p>
<p>
属性操作：
var $id = $("#box").attr("id")
$("#box").attr("id", "container")
</p>
<p>
样式操作：
简洁操作
$("#box").css("border", "solid 1px red");
标准操作
$("#box").css({
"border":"solid 1px red",
"background":"#efefef"
})
注意：样式尽量写在css中，通过标签的class属性来控制使用不同的样式
如果是动态递增变化的样式，可以通过JS代码进行处理。
</p>
<p>
标签的操作：
代码中创建一个标签
var $div = $("<div>");
常见操作函数：
append();
appendTo();
prepend();
prependTo();
</p>
<div id="box"></div>
<input type="text" id="username">
</body>
</html>
标签：动态 fadeout ext stop ide use 数据 color 筛选
原文地址：http://www.cnblogs.com/zhouxinfei/p/7858409.html
