开始学习jQuery。
以前没学习过js，大多都是改，现在感觉不够了，需要系统的了解一下。
昨天去图书馆借了《锋利的jQuery》开始自学jQuery顺便学习下JS。
开始讲了一些基础的东西，感觉就是在用$(“”)选择html里面的内容对其进行操作。想法比较简单，毕竟刚刚看嘛，做了第一个
jQuery的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-1</title>
<script src="js/jquery-1.3.1.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello World!");
});
</script>
</head>
<body>
</body>
</html>
知道了格式，alert方法输出”里面的值”。
基本选择器：
1．$(“#one”).css(“background”,”#bbffaa”);//改变id为one元素的背景颜色
2．$('.mini’).css(“background”,”#bbffaa”);//改变class为mini元素的背景颜色
3．$('div’).css(“background”,”#bbffaa”);//改变所有元素为<div>的背景颜色
4．$('*').css(“background”,”#bbffaa”);//改变所有元素的背景颜色
5．$(“span,#two”).css(“background”,”#bbffaa”);//改变所有<span>和id为two的元素
层次选择器：
1.$("ancestor descendant")//选取ancestor元素中所有的descendant元素
2.$("parent>child")//选取parent元素下child元素
3.$("prev+next")//选取紧挨着prev的next元素
4.$("prev~siblings")//选取prev之后所有siblings元素
后俩种层选择器与方法的等价关系
1.$(".one+div");等价于$(".one").next("div");
2.$(".one~div");等价于$(".one").nextAll("div");
结束练习
1.用toggle()。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.promoted a { color:#F50;}
</style>
<script src="js/jquery-1.3.1.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function(){
var $needhide = $('ul li:gt(5):not(:last)');//选择从第七个开始除去最后一个的所有li
$needhide.hide();//设置为不可见
var $needbtn = $('div.showmore > a');//匹配showmore元素下的所有a（显示品牌链接）
$needbtn.click(function(){
$needhide.toggle();
return false;
})
})
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href=""><span>显示全部</span></a>
</div>
</div>
</body>
</html>
2.用hide()和show()。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.promoted a { color:#F50;}
</style>
<script src="js/jquery-1.3.1.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function(){
var $needhide = $('ul li:gt(5):not(:last)');
$needhide.hide();
var $needbtn = $('div.showmore > a');
$needbtn.click(function(){
if($needhide.is(':visible')){
$needhide.hide();
$('.showmore a span').text('显示全部');
}
else{
$needhide.show();
$('.showmore a span').text('显示精简');
}
return false;
})
})
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href=""><span>显示全部</span></a>
</div>
</div>
</body>
</html>
递归做的动作效果
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
转义字符
<div id="id#b">bb</div>
<div id="id[1]">cc</div>
$("#id\\#b")
$("#id\\[1\\]")
手动重置页面元素
$("#reset").click(function(){
$("*").removeAttr("style");
$("div[class=none]").css({"display":"none"});
});
分享到：
相关推荐
学习jQuery解决选择器和事件方法 jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 函数库。 1.2.jQuery的优势 可以简化JavaScript代码 可以像css那样获取元素 可以修改css来控制页面效果 ...
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
jquery 学习笔记源码 3jquery常规选择器
该学习笔记带有很不错的DEMO，而且笔记中有比较详细的总结，对于初学者来说，可以根据笔记中的实例训练，达到理解jQuery核心——选择器的目的。
jquery 选择器 jquery 是一个快速简单的javascript library 简化了html文件 ，动画，ajax 。方便了网页技术的快速发展
jQuery笔记，包含了jQuery基本介绍、选择器、jQuery操作样式，还有一些小demo
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配，是学习熟悉jQuery的好资料！
第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择器 4 3. 层次选择器 4 4. 过滤选择器 5 5. 内容过滤选择器 5 6. 可见性过滤选择器 5 7. 属性过滤选择器 6 8. 子元素过滤选择器 6 9. 表单对象属性过滤选择器 7 10...
1.jQuery选择器 1.1jQuery基础选择器 原生js获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。 $(‘选择器’) //里面选择器直接写css选择器即可，但是要加引号 原创...
Jquery选择器分类整理,基本都包含到了，学习笔记。
jQuery常用一些内容，内容包括jQuery选择器、动画、HTML、事件、数据缓存等内容。可以通过浏览器直接打开
《jQuery权威指南》学习笔记之第2章 jQuery选择器
从jQuery的概述开始，包含jQuery选择器，包装集操作，DOM编程，事件编程，jQuery与ajax集成，常用的工具API，jQuery插件开发，内核研究以及常用插件知识。
2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 2.2.1 常见的JQuery事件 9 2.2.2 淡入淡出效果 12 2.2.3 滑动效果 15 2.2.4 动画效果 18 2.2.5 终止动画 20 2.2.6 回调函数 20 2.2.7 方法链 22 2.3 HTML操作 ...
jQuery基础 隔行变色的表格 window.onload=function(){ var otable = document.getElementById('oTable');...属性选择器 $("ul li ul li:has(a)").addClass("myClass"); 位置选择器 $("p:lt(2)").addClass("myClass");
jQuery的定义/特点: jQ的语法结构; 选择器: jQuery事件 jQuery方法 正则表达式 RegExp对象 validity属性
去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记。 这几天拿出来看了一下，发现很多都忘记了。所以，我决定把它们贴在这里，方便以后查看。这对其他朋友应该也是有用的，毕竟选择器是制作网页效果的第...