zoukankan      html  css  js  c++  java
  • 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>标记子元素:

    <!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》笔记

  • 相关阅读:
    论:CMMI项目监督和控制方法(PMC)
    开发silverlight下的xps浏览器,支持xps printer输出格式
    论:CMMI风险管理方法(RSKM)
    论:CMMI项目集成管理(IPM)
    Visual studio 2010 sp1中文版正式版无法安装Silverlight5_Tools rc1 的解决办法
    混乱的Comcast
    我的幸福呢
    Windows Phone 7芒果更新
    WP7升级
    来个GPS数字统计
  • 原文地址:https://www.cnblogs.com/peida/p/1430106.html
Copyright © 2011-2022 走看看