首页 > 编程技术 > html

jquery 动态加载js三种方法

发布时间:2016-9-20 18:58

这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(test.js);就OK了。

<!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>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />

 代码如下 复制代码
<title>jquery 动态加载js三种方法</title>
<script language="网页特效">
$.getscript("test.js");

//方法二

 代码如下 复制代码
function loadjs(file){
     var head = $('head').remove('#loadscript');
    $("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:'text/javascript',id:'load'}).appendto(head);
}

//够简单把!如果在浓缩以下你甚至可以用一行代码全部搞定:
//方法三

 代码如下 复制代码

$("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:'text/javascript',id:'load'}).appendto($('head').remove('#loadscript'));

</script>

</head>

<body>
</body>
</html>

 

 

这是一款利用jquery 做的 点击input输入框点击就弹出日历日期选择器,点击日期后就隐藏框了,日期就显示在输入框。

 

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="zh-cn" />
<meta content="all" name="robots" />
<meta name="author" content="bujichong" />
<meta name="copyright" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>jquery 日历选择器效果代码</title>
<link rel="stylesheet" type="text/css教程" href="demo/css/datepicker.css" />
<script" width=100% src="demo/js/jquery-1.3.2.min.js" type="text/网页特效"></script>
<script" width=100% src="demo/js/jquery.datepicker-min.js" type="text/javascript"></script>
<!--[if ie]><script type="text/javascript"" width=100% src="demo/js/jquery.bgiframe.min.js"></script><![endif]-->

<script type="text/javascript">
$(window).ready(function(){
$('.date-pick').datepicker({clickinput:true});
});
</script>


</head>
<body>
<p><label>起订时间:</label><input type="text" name="it" class="it date-pick" /></p>
<p><label>订购方式:</label><input type="radio" name="ir2" class="ir"/>全年&nbsp; <input type="radio" name="ir2" class="ir "/><select name="so" class="so">
<option value="0" selected="selected">1</option>
<option value="1">2</option><option value="1">3</option>
<option value="1">4</option><option value="1">5</option>
<option value="1">6</option><option value="1">7</option>
<option value="1">8</option><option value="1">9</option>
<option value="1">10</option><option value="1">11</option>
</select> 期</p>

 

</body>
</html>

下载地址
http://down.111cn.net/down/code/jquery/2010/0830/20522.html

本文章从网上收藏了一个利用jquery来验证邮箱地址合法性,手机号码验证包括所有手机号码都可以验证哦,最的验证用户名只允许是字符数字下划线以及@符号。
 var name = $('#regemail').val();
 var search_str = /^[w-.]+@[w-.]+(.w+)+$/;
 if(!search_str.test(name)){
  alert("邮箱不合法!");
  $("#regemail").val('');
  $("#regemail").focus();
  return false;
 }


 

 var mob=$.trim($("#mobile").val());
 
 if($.trim($("#mobile").val())=="")
 {
  alert("手机号码不能为空!");
  return false;
 }
 if($.trim($("#mobile").val())!="")
 {
  var reg = /^(?:13d|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|4|5|6|7|8|9])-?d{5}(d{3}|*{3})$/;
  if(!reg.test($.trim($('#mobile').val())))
  {
   alert("手机号码格式不对!");
   return false;
  }
 }
提供一款精美的星级打分评分效果jQuery 代码哦,以前全是利用js来实例星星评分效果,今天我们利用了jquery插件来实例打分评分的代码哦。

<!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>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<title>jquery 星级评测效果代码-download by http://www.111cn.net</title>
<script" width=100% src="images/jquery-latest.js"></script>
<script type="text/网页特效">
$(function(){
 $("ul li").each(function(i){         
     $(this).click(function(){
         $("li").removeclass("back");             
         $("li:gt("+i+")").addclass("back"); 
          })
        })
           
     });

</script>
<style  type="text/css教程">
.front {
 background:url(images/star_03.jpg);
}
.back {
 background:url(images/star_hover.jpg);
}
ul {
 list-style:none;
 width:300px;
}
ul li {
 display:block;
 float:left;
 border:1px solid #ccc;
 width:31px;
 height:30px;
 background:url(images/star_03.jpg);
 margin:0px 5px 0px;
}
</style>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>

实例下载地址
http://down.111cn.net/down/code/jquery/2010/0830/20530.html 

jquery select 插件 支持汉字、拼音、英文快速定位查询的超级select插件,支持可方向键、tab 键快速选择。

 

<!doctype >
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery 超级select 插件 v3.0.0.0插件</title>
</head>
<script type="text/网页特效"" width=100% src="js/jquery1.4.2.js"></script>
<script type="text/javascript"" width=100% src="js/jquery.selectseach.min.js"></script>
<!--<script type="text/javascript"" width=100% src="js/jquery.selectseach.js"></script>-->
<script>

function getmydata(){
 alert($('#sssss').val());
 }

 

$(document).ready(function(){
   $('select').selectseach();
 // $('#sssss2').selectseach();
 // $('#sssss').selectseach();
 // $('#sssss1').selectseach();
 
/*  $('select').focus(
     function(){
     
     $('#msg').html($(this).text());
    }  );*/
});

</script>
<body style="height:">
<p>潇湘博客</p>
<p><a href="http://blog.111cn.net/fkedwgwy">http://blog.111cn.net/fkedwgwy</a></p>
<p>php教程 技术群:37304662</p>
<p>jquery 超级select 插件 v3.0.0.0插件 支持汉字、拼音、英文快速定位查询的超级select插件。可方向键、tab 键快速选择。</p>
<table width="805" border="0">
  <tr>
    <td><p>传统select</p>
    <p>&nbsp;</p></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><select name="sssss5" id="sssss5" onchange="return getmydata()"  >
      <option value="-1">所有学校</option>
      <option value="139" selected="selected"> a english book </option>
      <option value="140">浏阳市浏阳河小学</option>
      <option value="141">浏阳市人民路小学</option>
      <option value="142">浏阳市嗣同路小学</option>
      <option value="143">浏阳市集里街道长南路小学</option>
      <option value="144">浏阳市集里街道平水桥小学</option>
      <option value="145">浏阳市集里街道禧和岭小学</option>
      <option value="146">浏阳市集里龚家桥小学</option>
      <option value="147" >浏阳市集里街道百宜小学</option>
      <option value="148">浏阳市荷花街道杨家小学</option>
      <option value="149">浏阳市荷花街道净溪小学</option>
      <option value="150">浏阳市荷花街道牛石小学</option>
      <option value="151">浏阳市荷花街道云桥小学</option>
      <option value="152">浏阳市荷花街道早禾小学</option>
      <option value="153">浏阳市荷花街道光彩小学</option>
      <option value="154">浏阳市荷花街道小水小学</option>
      <option value="155">浏阳市荷花街道建新小学</option>
      <option value="156">a chinese man 胡</option>
      <option value="157">浏阳市荷花街道胡坪小学</option>
      <option value="158">liuyan</option>
      <option value="159">changsha</option>
    </select></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><p>超级select插件</p>
    <p>&nbsp;</p></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><select name="sssss1" id="sssss1" m='search'>
      <option value="-1">所有学校</option>
      <option value="139">浏阳市黄泥湾小学</option>
      <option value="140">浏阳市浏阳河小学</option>
      <option value="141">浏阳市人民路小学</option>
      <option value="142">浏阳市嗣同路小学</option>
      <option value="143">浏阳市集里街道长南路小学</option>
      <option value="144">浏阳市集里街道平水桥小学</option>
      <option value="145">浏阳市集里街道禧和岭小学</option>
      <option value="146">浏阳市集里龚家桥小学</option>
      <option value="147" selected="selected">浏阳市集里街道百宜小学</option>
      <option value="148">浏阳市荷花街道杨家小学</option>
      <option value="149">浏阳市荷花街道净溪小学</option>
      <option value="150">浏阳市荷花街道牛石小学</option>
      <option value="151">浏阳市荷花街道云桥小学</option>
      <option value="152">浏阳市荷花街道早禾小学</option>
      <option value="153">浏阳市荷花街道光彩小学</option>
      <option value="154">浏阳市荷花街道小水小学</option>
      <option value="155">浏阳市荷花街道建新小学</option>
      <option value="156">浏阳市荷花街道罗直小学</option>
      <option value="157">浏阳市荷花街道胡坪小学</option>
      <option value="158">浏阳市荷花街道唐洲小学</option>
      <option value="159">浏阳市荷花街道金沙路小学</option>
    </select></td>
    <td><select name="sssss2" id="sssss2" m='search'>
      <option value="-1">所有学校</option>
      <option value="139">湾小学</option>
      <option value="140">阳河小学</option>
      <option value="141">浏阳市</option>
    </select></td>
    <td><select name="sssss3" id="sssss3" m='search'>
      <option value="154">街道小水小学</option>
      <option value="155">建新小学</option>
      <option value="156">直小学</option>
      <option value="157">胡坪小学</option>
      <option value="158">唐洲小学</option>
      <option value="159">沙路小学</option>
    </select></td>
    <td><select name="sssss4" id="sssss4" m='search'>
      <option value="-1">所有学校</option>
      <option value="141">浏</option>
      <option value="142">浏阳</option>
    </select></td>
    <td><select name="sssss" id="sssss" onchange="return getmydata()"  m='search'>
      <option value="-1">所有学校</option>
      <option value="139" selected="selected"> a english book </option>
      <option value="140">浏阳市浏阳河小学</option>
      <option value="141">浏阳市人民路小学</option>
      <option value="142">浏阳市嗣同路小学</option>
      <option value="143">浏阳市集里街道长南路小学</option>
      <option value="144">浏阳市集里街道平水桥小学</option>
      <option value="145">浏阳市集里街道禧和岭小学</option>
      <option value="146">浏阳市集里龚家桥小学</option>
      <option value="147" >浏阳市集里街道百宜小学</option>
      <option value="148">浏阳市荷花街道杨家小学</option>
      <option value="149">浏阳市荷花街道净溪小学</option>
      <option value="150">浏阳市荷花街道牛石小学</option>
      <option value="151">浏阳市荷花街道云桥小学</option>
      <option value="152">浏阳市荷花街道早禾小学</option>
      <option value="153">浏阳市荷花街道光彩小学</option>
      <option value="154">浏阳市荷花街道小水小学</option>
      <option value="155">浏阳市荷花街道建新小学</option>
      <option value="156">a chinese man 胡</option>
      <option value="157">浏阳市荷花街道胡坪小学</option>
      <option value="158">liuyan</option>
      <option value="159">changsha</option>
    </select></td>
  </tr>
</table>
<p>js code:</p>
<p> $(document).ready(function(){<br>
  $('#sssss').selectseach(); <br>
  }); </p>
<p>html:</p>
<p>&lt;select name=&quot;sssss2&quot; id=&quot;sssss2&quot; <font style="color:red " >m='search'</font>&gt;<br>
&lt;option value=&quot;-1&quot;&gt;所有学校&lt;/option&gt;<br>
&lt;option value=&quot;139&quot;&gt;湾小学&lt;/option&gt;<br>
&lt;option value=&quot;140&quot;&gt;阳河小学&lt;/option&gt;<br>
&lt;option value=&quot;141&quot;&gt;浏阳市&lt;/option&gt;<br>
&lt;/select&gt;</p>
<p>&nbsp;</p>
<div id="msg"></div>
<div id="msg1" style="color:red"></div>

下载地址:
http://down.111cn.net/down/code/jquery/2010/0830/20523.html

标签:[!--infotagslink--]

您可能感兴趣的文章: