开始学习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提供了丰富的选择器用于选取DOM元素，以下是部分选择器的详细介绍： 1. **所有元素选择器**：`$("*")` —— 选取页面上的所有元素。 2. **多个选择器**：`$("选择器,选择器,选择器")`...
二、jQuery选择器 jQuery提供了丰富的选择器用于选取DOM元素，包括层次选择器： 1. ID选择器：$("#id")，选取具有特定ID的元素。 2. 标签选择器：$("标签名")，选取所有指定标签的元素。 3. 类选择器：$(".class")，...
此外，jQuery还提供了许多其他选择器和方法，如属性选择器、内容过滤选择器、可见性过滤选择器等，以及各种DOM操作、事件处理和动画方法，如`.append()`、`.click()`、`.slideUp()`等，使得JavaScript编程更为便捷和...
本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在实际项目中的应用。 ### 1. 选择器 选择器是 jQuery 的精髓，它们允许我们高效地选取页面上的 HTML 元素。jQuery 支持多种 CSS 选择器，如 ID ...
通过jQuery选择器，你可以轻松地找到页面上的元素，并进行添加、删除或修改。"韩顺平AJAX和jQuery笔记整理.doc"可能详细介绍了$(selector).html(), $(selector).append(), $(selector).remove()等方法的用法，以及...
jQuery 提供了丰富的选择器，如 ID 选择器 (`#id`)，类选择器 (`.class`)，元素选择器 (`element`) 等，可以快速选取DOM元素。复合选择器如 `$('div.class1, div.class2')` 可以同时选取多个元素。 3. **DOM 操作...
jQuery的选择器强大而灵活，支持各种复杂的元素选取方式。基本的选择器如`#myDiv`可选取具有特定ID的元素，`$(".red")`可选取所有具有指定类名的元素。更进一步，jQuery支持CSS样式的子元素选择，如`$(".reddiv")`...
在本笔记中，我们将深入探讨 JQuery 的核心部分——选择器，这是理解和高效使用 JQuery 的关键。 首先，JQuery 的选择器分为几大类，包括基本选择器、层次选择器、过滤选择器和表单选择器。基本选择器是最基础的，...
本学习笔记将聚焦于jQuery的核心功能之一：常规选择器。通过理解并熟练运用这些选择器，你可以更加高效地定位和操纵网页中的元素，提升开发效率。 1. 元素选择器： jQuery的元素选择器允许我们根据HTML标签名来...
在选择器方面，笔记详细介绍了jQuery选择器的分类，包括基本选择器、过滤选择器、层次选择器和表单选择器。基本选择器用于选取具有特定属性的元素，而过滤选择器则提供了基于元素的位置、可见性、内容和属性等不同...
在本笔记中，我们将学习Jquery-1.2的基本用法，包括如何将Jquery库文件引入到项目中、如何使用Jquery选择器来获取节点对象、如何使用Jquery来实现Ajax异步交互。 二、Jquery选择器 Jquery选择器是Jquery框架中最...
本文将深入讲解jQuery的核心概念，包括入口函数的使用、jQuery对象与DOM对象的区别以及jQuery选择器的运用。 首先，我们关注jQuery的入口函数。在网页加载过程中，JavaScript的入口函数通常是在`window.onload`事件...
《jQuery学习笔记源码——初识与实践》 在当今的Web开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将基于“jQuery学习笔记源码 1第一个...
### jQuery选择器学习笔记 #### 一、引言 jQuery 是一个快速、小巧且功能丰富的库，极大地简化了 JavaScript 编程。其中的核心之一就是它的选择器系统，它基于 CSS 选择器，并提供了更多的灵活性和功能。本篇笔记...
jQuery的核心特性是其选择器，它允许开发者通过CSS样式的语法轻松选取HTML元素。 1. **元素引用**： jQuery通过`$()`函数来选取元素，支持多种方式，包括id、class、元素名以及层级关系和DOM或XPath条件。返回的...
2. 选择器：jQuery支持CSS选择器，如类选择器(".myClass")、ID选择器("#myID")和属性选择器("[attr=value]")。同时，jQuery还提供了更高级的选择器，如`:first`、`:last`、`:even`等。 3. 链式调用：jQuery对象的...
本资源"jQuery基于citypicker四级联动菜单选择器代码.zip"提供了一个实现城市选择器功能的jQuery插件，适用于网页表单，尤其是需要用户输入详细地址的场景。 首先，我们来理解一下什么是四级联动菜单。在网页设计中...