jQuery 文档准备的三种写法:
- $(document).ready(function() {
- });
- $().ready(function() {
- });
- $(function() {
- });
jQuery 选择器
基本选择器
$('*') / $('.div') / $('div') / $('#first') /
多项选择器
$('#first, div, .second')
层级选择器
- $('aside summary') //aside 的子元素 summary
- $('aside> details') //aside 的直接子元素 details
- $('summary + ul') //summary 相邻的下一个兄弟元素 ul
- $('summary ~ ul') //summary 之后的所有兄弟元素 ul
属性选择器
- $('[class]')
- $('[class=tool]')
- $('[class!=tool]') //class 不是 tool
- $('[class^=tool_]') //tool_开头
- $('[class$=vs]') // vs 结束
- $('[class*=vs]') // 含有 vs
- $('[type][src]')
- $('[class][class*=lang][class$=y]')
过滤器
- $('details> p:first-child')
- $('details> p:last-child')
- $('details> p:nth-child(2)')
- $('details> p:nth-last-child(2)')
- $('details> p:only-child')
限定 type 的:
- $('details> p:first-of-type')
- $('details> p:last-of-type')
- $('details> p:nth-of-type(2)')
- $('details> p:nth-last-of-type(2)')
- $('details> p:only-of-type')
- $('p:nth-of-type(3n)')
表单相关:
- var inputs = $(':input');
- var texts = $(':text');
- var enabled = $(':enabled');
- var disabled = $(':disabled');
- var checked = $(':checked');
- var selected = $(':selected');
查找和过滤
- var JS = $('aside').find('.javascript');
- var details = $('aside').children('details');
- var js_parent = JS.parent();
- var Sass = Less.next();
- var CSS = Less.prev();
- var li = $('li').eq(8);
- var lis = PHP.siblings();
- var python = allLis.filter('.python'); // 返回带有类名 "python'"
- var noPython= allLis.not(".python'") // 返回不带有类名 "python" 的
jqeury 事件
实现全屏的云南旅游相册 (带动画效果)
index.html
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 全屏的云南旅游相册
- </title>
- <link rel="stylesheet" type="text/css" href="css/style.css">
- <script type="text/javascript" src="js/jquery.js">
- </script>
- <script type="text/javascript" src="js/script.js">
- </script>
- </head>
- <body>
- <span>
- </span>
- <nav>
- <a href="#">
- 泸沽湖
- </a>
- <a href="#">
- 丽江古城
- </a>
- <a href="#">
- 茶马古道
- </a>
- <a href="#">
- 就这家. 云逸客栈
- </a>
- <a href="#">
- 西双版纳
- </a>
- <a href="#">
- 云南红酒庄
- </a>
- <a href="#">
- 轿子雪山
- </a>
- <a href="#">
- 普者黑
- </a>
- <a href="#">
- 海埂大坝
- </a>
- <a href="#">
- 玉龙湾
- </a>
- <a href="#">
- 昆明郊野公园
- </a>
- <a href="#">
- 欧洲风琴小镇
- </a>
- </nav>
- <div>
- <img src="images/1.jpg">
- <img src="images/2.jpg">
- <img src="images/3.jpg">
- <img src="images/4.jpg">
- <img src="images/5.jpg">
- <img src="images/6.jpg">
- <img src="images/7.jpg">
- <img src="images/8.jpg">
- <img src="images/9.jpg">
- <img src="images/10.jpg">
- <img src="images/11.jpg">
- <img src="images/12.jpg">
- </div>
- </body>
- </HTML>
style.CSS
- * {
- margin: 0; padding: 0; border: none;
- }
- HTML,
- body {
- overflow: hidden; height: 100%; background: #93b3c6;
- }
- span {
- display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background: #fff;
- }
- nav {
- position: relative; display: flex; width: 78.125vw; margin: 0 auto 45px; justify-content: space-between;
- }
- nav:before {
- position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: ""; background: #fff;
- }
- nav> a {
- font-size: 20px; position: relative; padding: 10px; text-decoration: none; color: #255d7e; border: 2px solid #5395b4; background: #fff;
- }
- div {
- position: relative; overflow: hidden; width: 78.125vw; height: 75vh; margin: 0 auto; background: #fff; box-shadow: 0 0 30px 0 rgba(8, 1, 3, .3);
- }
- div> img {
- position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 98%; height: 96%; margin: auto;
- }
script.JS
- $(document).ready(function() {
- var index = 0;
- // 鼠标事件
- var mouseEvent = function(event) {
- event.stopPropagation();// 阻止冒泡
- // 如果是 a 元素 (点击或者 hover 都可以)
- if ($(this)[0].nodeName == 'A') {
- // 索引就是 a 元素的索引
- index = $(this).index();
- } else {
- return true;
- };
- swiper();
- };
- // 键盘事件
- var keyEvent = function(event) {
- event.stopPropagation();
- if (event.keyCode == 37) {
- // 向左箭头
- index = index> 0 ? --index : $('a').length - 1;
- } else if (event.keyCode == 39) {
- // 向右箭头
- index = index < $('a').length - 1 ? ++index : 0;
- } else {
- return true;
- }
- swiper();
- }
- // 定义鼠标事件和键盘事件
- var events = {
- mouseenter: mouseEvent,
- keydown: keyEvent
- };
- // 给 a 元素添加鼠标事件和键盘事件
- $('a').add(document).on(events);
- var swiper = function() {
- $('img').eq(index)
- .stop().fadeIn('slow')
- .siblings()
- .stop().fadeOut('slow');
- }
- // 初始化默认显示第一张图
- var init = function() {
- index = 0;
- swiper();
- }
- init();
- });
来源: http://www.bubuko.com/infodetail-3372564.html