运用jQuery时，需要在页面中引入jQuery文件
- jQuery的hello world
<!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>
- jquery 选择器
<!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>
- jquery的DOM操作
<!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>
jquery入门
原文地址：http://www.cnblogs.com/zhouxinfei/p/7858409.html