JQuery和CSS文件无法从外部文件工作_Jquery_Html_Css_Jquery Ui

JQuery和CSS文件无法从外部文件工作

jquery html css jquery-ui

JQuery和CSS文件无法从外部文件工作,jquery,html,css,jquery-ui,Jquery,Html,Css,Jquery Ui,我试图从外部文件访问jQuery，但它在我的页面上不起作用。我检查了我的代码，也在网上搜索，但没有找到我的错误 clearableformfield.jsp <html> <head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/java

我试图从外部文件访问jQuery，但它在我的页面上不起作用。我检查了我的代码，也在网上搜索，但没有找到我的错误

clearableformfield.jsp

<html>
<head>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="JQuery/jquery.clearable.js"></script>
<link rel="stylesheet" href="JQuery/jquery.clearable.css" type="text/css" />
</head>
<body>
<div id="dom">
<input type="text"  class="foo"></input>
  </div>
<script>
$(document).ready(function() {
    $('.foo').clearable();
});</script>

</body>
</html>

所有这些文件都在JQuery文件夹的web内容中

您的文件路径应该是这样的

xxx.html
JQuery [folder]
   |
   |---jquery.clearable.js
   |---jquery.clearable.css
   '---close-button.png

<HTML>
<HEAD>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="JQuery/jquery.clearable.js"></script>
    <link rel="stylesheet" href="JQuery/jquery.clearable.css" type="text/css" media="screen"/>

    <TITLE>Clearable Textboxes in jQuery</TITLE>

</HEAD>
<BODY>


<input type="text" class="clearable style1" size="30"></input>
&nbsp;
<input type="text" class="clearable style1"></input>

</BODY>
<SCRIPT>
$(document).ready(function(){
$('.clearable').clearable()
});
</SCRIPT>
</HTML>

jQuery.fn.clearable = function() {
    
    $(this).css({'border-width': '0px', 'outline': 'none'})
        .wrap('<div id="sq" class="divclearable"></div>')
        .parent()
        .attr('class', $(this).attr('class') + ' divclearable')
        .append('<a class="clearlink" href="javascript:"></a>');

    $('.clearlink')
        .attr('title', 'Click to clear this textbox')
        .click(function() {
            
            $(this).prev().val('').focus();

    });
}

.divclearable {
    border: 1px solid #888;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;    
    padding-right:5px;
    vertical-align:middle;
}

a.clearlink {
    background: url("close-button.png") no-repeat scroll 0 0 transparent;
    background-position: center center;
    cursor: pointer;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;    
    height: 12px;
    width: 12px;
    z-index: 2000;
    border: 0px solid;
}

已更新

你的HTML文件应该是这样的

xxx.html
JQuery [folder]
   |
   |---jquery.clearable.js
   |---jquery.clearable.css
   '---close-button.png

<HTML>
<HEAD>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="JQuery/jquery.clearable.js"></script>
    <link rel="stylesheet" href="JQuery/jquery.clearable.css" type="text/css" media="screen"/>

    <TITLE>Clearable Textboxes in jQuery</TITLE>

</HEAD>
<BODY>


<input type="text" class="clearable style1" size="30"></input>
&nbsp;
<input type="text" class="clearable style1"></input>

</BODY>
<SCRIPT>
$(document).ready(function(){
$('.clearable').clearable()
});
</SCRIPT>
</HTML>

jQuery.fn.clearable = function() {
    
    $(this).css({'border-width': '0px', 'outline': 'none'})
        .wrap('<div id="sq" class="divclearable"></div>')
        .parent()
        .attr('class', $(this).attr('class') + ' divclearable')
        .append('<a class="clearlink" href="javascript:"></a>');

    $('.clearlink')
        .attr('title', 'Click to clear this textbox')
        .click(function() {
            
            $(this).prev().val('').focus();

    });
}

.divclearable {
    border: 1px solid #888;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;    
    padding-right:5px;
    vertical-align:middle;
}

a.clearlink {
    background: url("close-button.png") no-repeat scroll 0 0 transparent;
    background-position: center center;
    cursor: pointer;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;    
    height: 12px;
    width: 12px;
    z-index: 2000;
    border: 0px solid;
}

并添加到JQuery文件夹。

您需要在html文件的最顶端包含这样的DOCTYPE：

<!DOCTYPE html>

这可能会导致旧版本的Internet Explorer出现问题，并可能导致您的问题

如果没有更多的信息，很难判断问题出在哪里，您使用的是什么浏览器？控制台中抛出了哪些错误（firebug/IE开发者工具/Chrome开发者工具），是404错误还是其他JavaScript错误

您的目录结构是什么样子的？你确定东西放在正确的地方，而且你没有错命名吗？我注意到您将文件夹名称设置为

JQerey

这是故意拼写还是错误

也可能是文件返回时使用了错误的Mime类型，尽管我对此表示怀疑。

您的html文件也在JQerey文件夹中吗？请仔细检查您的文件路径。是否可以显示文件的目录结构？因为html文件的根必须有jquery文件夹，并且这个jquery文件夹必须包含jquery.clearable.js和jquery.clearable.css文件，所以您的

jquery.clearable.js

文件不能工作，因为：（1）您不必等待文档准备就绪（2）

$（这）

是没有意义的，您必须编写一个选择器。当我在同一个页面中使用jquery时，这不是一个问题，但在外部文件中它不工作。您的邮件id是什么。？我会把那个验证过的文件发给你们。我检查了你们的代码，jquerey正在工作，但使用它我想让clearable form字段仍然不工作。我正在使用这个示例，我为您更新了代码。从这里复制代码，并将其复制到相应的文件中。然后将图像添加到“JQerey”文件夹中。您是否在系统中检查了此代码，因为它在这里不起作用，谢谢您的帮助