jQuery学习笔记二："$"
在jQuery中，使用最频繁的就是"$"符号了，他给我们提供了丰富的功能，例如选择页面中的一个和或是一类元素、作为功能函数的前缀、window.onload的完善、创建页面的DOM节点等。
1.选择器：
在CSS中选择器的作用是选择页面中的某一类（类别选择器）元素或者某一个元素（id选择器），而jQuery中的“$”作为选择器，同样是选择某一类或者某一个页面元素，只不过jQuery提供了更多更全面的选择方式，并且为用户处理了浏览器的兼容问题。例如在CSS中可以通过如下代码来选择页面中<h2>标记中包含的所有子标记<a>，然后给添加相应的样式风格：
h2 a
{
font-weight:bold;
line-height:22pt;
}
而在jQuery中，则可以通过：$("h2 a") 来选中<h2>标记下包含的所有子标记<a>,作为一个对象数组，共JavaScript来调用。如下面所示，文档中有两个<h2>标记，分别包含看<a>标记子元素：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
window.onload = function() {
var oElements = $("h2 a");
for (var i = 0; i < oElements.length; i++) {
oElements[i].innerHTML = i.toString();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2><a href="#">正文</a>内容</h2>
<h2>正文<a href="#">内容</a></h2>
</div>
</form>
</body>
</html>
从运行效果可以看到jQuery很轻松地实现了元素的选择。
jQuery中通用的选择器语法如下：
或者
jQuery(selector)
其中selector要符合CSS3标准.在jQuery中，“$”符号其实就等同于 “jQuery” ，为了编写方便，通常采用“$”来替换“jQuery”。
2.作为功能函数前缀
在JavaScript中，我们经常要编写一下小函数来处理一些操作细节，例如在用户提交表单时，需要将文本框中的前端和尾端的空格清理掉。JavaScript中没有提供类似c#中的Trim()的功能方法。在Javascript中我们自己写的例如：
function ltrim(s) {
return s.replace(/^\s*/, "");
}
//去右空格;
function rtrim(s) {
return s.replace(/\s*$/, "");
}
//去左右空格;
function trim(s) {
return rtrim(ltrim(s));
}
而引入jQuery后，我们则可以直接用trim()函数，如下例所示：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var sString = " 1234567890 ";
sString = $.trim(sString);
alert(sString.length);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
3.解决Window.onload()函数的冲突:
由于页面HTML框架需要在页面完全加载后才能使用，因此在DOM编程时window.onload函数频繁被使用，倘若页面中有多处需要使用该函数，或者其他.js文件中也包含window.onload函数，冲突问题是十分复杂的。而jQuery的ready()方法很好的解决了这个问题，他能够自动将其中的函数在页面加载完成后运行，并且同一个页面中可以使用多个ready()方法，而且不相互冲突。例如：
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
</script>
4.创建DOM元素
利用DOM方法创建元素节点，通常需要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦，而jQuery中，使用"$"则可以直接创建DOM元素，例如：var NewP=$("<p>这是一个节点</p>") 这句代码就等同于JavaScript中的如下代码：
var NewText=document.createTextNode(”这是一个节点");
NewP=appendChild(NewText);
另外，jQuery还提供了DOM元素的insertAfter()方法，例如下面：
<html>
<head>
<title>创建DOM元素</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){ //ready()函数
var oNewP = $("<p>这是一个感人肺腑的故事</p>"); //创建DOM元素
oNewP.insertAfter("#myTarget"); //insertAfter()方法
});
</script>
</head>
<body>
<p id="myTarget">插入到这行文字之后</p>
<p>也就是插入到这行文字之前，但这行没有id，也可能不存在</p>
</body>
</html>
读《精通JavaScript+jQuery》笔记
关注 熵减黑客 ，一起学习成长
