jQuery学习笔记二:"$"

长平狐 发布于 2013/06/17 12:54
阅读 33
收藏 0

     在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>标记子元素:

<! 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  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 >< href ="#" > 正文 </ a > 内容 </ h2 >
< h2 > 正文 < href ="#" > 内容 </ a ></ h2 >
    
</ div >
    
</ form >
</ body >
</ html >

    从运行效果可以看到jQuery很轻松地实现了元素的选择。

    jQuery中通用的选择器语法如下:

$(selector)
或者
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()函数,如下例所示:

<! 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  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()方法,而且不相互冲突。例如:

< script language = " javascript " >
$(
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  NewP = document.createElement( " P " );
var  NewText = document.createTextNode(”这是一个节点 " );
NewP=appendChild(NewText);

      另外,jQuery还提供了DOM元素的insertAfter()方法,例如下面:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< 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 >
    
< id ="myTarget" > 插入到这行文字之后 </ p >
    
< p > 也就是插入到这行文字之前,但这行没有id,也可能不存在 </ p >
</ body >
</ html >

     读《精通JavaScript+jQuery》笔记


原文链接:http://www.cnblogs.com/peida/archive/2009/04/09/1430106.html
加载中
返回顶部
顶部