jQuery wont load | 易学教程

问题

jQuery wont load. I'm a noob. Tried many things, various syntax tweaks. heres how it stands...

Using jQuery on my hard drive, current version jquery-1.7.1 (also tried v1.7.1.min).

have tried to use the following plugins

1) .scrollTo-1.4.2-min
2) .jqDock.min & jquery.jqDock
3) .jtruncate(current) & jquery.jtruncate.pack
Am using IE8 and Chrome to check on local.

Debugging says...

(jquery-1.7.1.js) invalid character Line 1 (NB: line 1 is just the beginning of the credit info greyed out text /*! )
(jquery.jtruncate.js) jQuery is undefined Line 1 (NB: line 1 is (function(jQuery){ ) (my page name) Object doesnt support this property or method Code 0 Line 17 Char 5 (NB: line 17 is $('').jTruncate({ )

My head code...

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cressida Haughton - Artist Statement and Biography</title>
    <meta name="description" content="Cressida Haughton - Artist Statement and Biography">

    <meta name="keywords" content="Cressida Haughton,Lab Rat Orchestra,installation,contemporary artist,Coventry,Midlands,Cressida,">

<link href="_css/maintest2.css" rel="stylesheet" type="text/css" />

<script src="/_js/jquery-1.7.1.js" type="text/javascript" ></script>

<script src="_js/jquery.jtruncate.js" type="text/javascript" ></script>

<script>window.jQuery || document.write("<script src='_js/jquery-1.7.1.min.js'>\x3C/script>")</script> 

<script type="text/javascript">


$(document).ready(function(){
        $('<div id="statement" />').jTruncate({
            length: 200,
            minTrail: 0,
            moreText: "[more]",
            lessText: "[less]",
            ellipsisText: "(truncated)",
            moreAni: "fast",
            lessAni: 2000
        });
    });

Then theres some java generated by Dreamweaver, (Rollover image/swap image guff), then page specific CSS (see below) i also have site wide external css sheet.

    #statement {
        position:absolute;
        left:285px;
        right: 190px;
        top:130px;
        width: 607px;
        height: 321px;
    }

Then html body.

Can anyone help?

回答1:

Have just tried the following and it appears to work ok (Chrome), I am by no means an expert in jQuery but this line

$('<div id="statement"/>')

does not look write to me, I have commented where I have changed it, look at http://www.w3schools.com/jquery/jquery_ref_selectors.asp or more info.

<body>
  <head>
   <title>test</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
   </script>
   <script type="text/javascript">
     /* jtruncate - should be external js file */
     (function($){$.fn.jTruncate=function(h){var i={length:300,minTrail:20,moreText:"more",lessText:"less",ellipsisText:"...",moreAni:"",lessAni:""};var h=$.extend(i,h);return this.each(function(){obj=$(this);var a=obj.html();if(a.length>h.length+h.minTrail){var b=a.indexOf(' ',h.length);if(b!=-1){var b=a.indexOf(' ',h.length);var c=a.substring(0,b);var d=a.substring(b,a.length-1);obj.html(c+'<span class="truncate_ellipsis">'+h.ellipsisText+'</span>'+'<span class="truncate_more">'+d+'</span>');obj.find('.truncate_more').css("display","none");obj.append('<div class="clearboth">'+'<a href="#" class="truncate_more_link">'+h.moreText+'</a>'+'</div>');var e=$('.truncate_more_link',obj);var f=$('.truncate_more',obj);var g=$('.truncate_ellipsis',obj);e.click(function(){if(e.text()==h.moreText){f.show(h.moreAni);e.text(h.lessText);g.css("display","none")}else{f.hide(h.lessAni);e.text(h.moreText);g.css("display","inline")}return false})}}})}})(jQuery);
    </script>
  </head>
  <body>
    <!-- truncatable div element -->
    <div id="statement">
      <p>This is a statement</p>
    </div>  
    <script type="text/javascript">
       $(document).ready(function(){
          /* changed from $('<div id="statement" />') */
          $('#statement').jTruncate({
              length: 5,
              minTrail: 0,
              moreText: "[more]",
              lessText: "[less]",
              ellipsisText: "(truncated)",
              moreAni: "fast",
              lessAni: 2000
          });
      });
    </script>
  </body>
</html>

Hope this helps, merry christmas :-)

回答2:

Try the following

Refer or place the jquery sript tag above all the jquery plugin references.
Check if jQuery file reference is actually getting loaded in the browser,you can use fiddler or firebug
Also refer the javascript file in the order of their dependencies.
Place the document.ready script in body tag instead head section.

来源：https://stackoverflow.com/questions/8625415/jquery-wont-load

标签

jquery-plugins