.second‘) 层级选择器 $(‘aside summary‘) // aside的子元素summary $(‘a
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
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32257.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")