首页 > JQuery学习 > Jquery的乱七八糟

Jquery的乱七八糟

2008年7月21日
评论 发表评论

本人暂时只会PHP，C#处于学习阶段
对于PHP而言，JS始终是一个不可少的部分，所以，虽然对JS深恶痛绝，但是却不得不学～～
在这个浏览器标准完全不统一的阶段，要使得JS对于每个浏览器的支持都还不错，那么框架是个很好的选择——在底层帮你把一些需要注意的东西都写好了～
何乐不为？
JQuery，上～
对于JQery，我只想稍微做一个笔记性质的东西，方便自己日后的查阅。
对于Jquery的选择器，我不想多说什么，仅仅是想说一下$(”a”)、$(”.stuff”)和$(”#clickme”)的区别
第一个的选择是对于整个DOM属性的选择，第二个选择是对于class为stuff进行选择，而最后一个是对于id为clickme的元素进行选择～～
就是这样子～
然后来说一个比较cool的应用
见代码

  1. $(document).ready(function() {
  2.     $('#faq').find('dd').hide().end().find('dt').click(function() {
  3.          var answer = $(this).next();
  4.          if (answer.is(':visible')) {
  5.              answer.slideUp();
  6.          } else {
  7.              answer.slideDown();
  8.          }
  9.      });
  10. });

这个里面涉及到了一个高级应用end()的问题。end()这里简化了我们反复选择的痛苦，在第一次find条件之后，我们继续进行查找，从而找到我们需要的东西。next()的出现使得我们find(’dt’)之后接着find(’dd’)从而完成了一个循环的查找。hide()帮助我们查找到我们需要的东西后直接帮我们设置为隐藏状态，或者说折叠起来的状态。或者这么说，end和next形成了一个循环，帮助我们把我们需要的

标签的全部选择出来～这样子的好处就是代码量很少～～answer.is(’:visible’)这句话帮我们判断出answer现在的状态是否是可见。
对于JQuery的Ajax来说也是一个简单的事情，看一个例子

  1. $(document).ready(function() {
  2.     // generate markup
  3.     var ratingMarkup = ["Please rate: "];
  4.     for(var i=1; i <= 5; i++) {
  5.         ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
  6.     }
  7.     // add markup to container and applier click handlers to anchors
  8.     $("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
  9.         e.preventDefault();
  10.         // send requests
  11.         $.post("rate.php", {rating: $(this).html()}, function(xml) {
  12.             // format result
  13.             var result = [
  14.                 "Thanks for rating, current average: ",
  15.                 $("average", xml).text(),
  16.                 ", number of votes: ",
  17.                 $("count", xml).text()
  18.             ];
  19.             // output result
  20.             $("#rating").html(result.join(''));
  21.         } );
  22.     });
  23. });

我们关键看一下对于$.post的处理
三个参数第一个是post提交的地址，第二个是提交的参数，第三个比较特殊，说说。
第三个定义了一个function，这个function以xml作为参数～但是这个xml是怎么来的呢？是我们提交给上述网址之后，那个网址（本例是rate.php）返回回来的（其实就是echo出来的东西啦）的xml格式的文本。在function中还有一个用法是$(”average”,xml).text() 我也来说一下，前面的$(”average”,xml)其实是rate.php返回回来的xml文本中的average节点的数据！！后面的text方法就不说了，将取出来的数据转化为文本格式。

再来说一下使用Jquery来进行表单验证吧（估计这个也是JS最为人知的地方了）
我们需要down一个JQuery的插件下来，jquery.validate.js。将其包含到我们的HTMl文件中去（不要忘记了，这个文件包含位置一定要在JQuery.js下面，怎么说也是靠JQuery吃饭的；）
好了是吧？那我们现在看一下一个简单的例子吧～

  1. $(document).ready(function(){
  2. $("#validateform").validate();
  3. })

JQuery的事情完了
再看看HTML我们要做什么

  1. <form class="cmxform" id="validateform" method="get" action="">
  2.  <fieldset>
  3.    <legend>A simple comment form with submit validation and default messages</legend>
  4.    <p>
  5.      <label for="cname">Name</label>
  6.      <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
  7.    </p>
  8.    <p>
  9.      <label for="cemail">E-Mail</label>
  10.      <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
  11.    </p>
  12.    <p>
  13.      <label for="curl">URL</label>
  14.      <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
  15.    </p>
  16.    <p>
  17.      <label for="ccomment">Your comment</label>
  18.      <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
  19.    </p>
  20.    <p>
  21.      <input class="submit" type="submit" value="Submit"/>
  22.    </p>
  23.  </fieldset>
  24.  </form>

完成
注意看一下input输入框class内容～那个就是对于输入框限定的条件，比如看这个

  1. <input id="cemail" name="email" size="25"  class="required email" />

就给出了限定条件是required和email，需要满足这两个条件～～
是不是很简单？
但是有没有觉得这样子有些不爽？还需要在页面上进行修改？OK！我们看一下别的

  1. // validate signup form on keyup and submit
  2.     $("#signupForm").validate({
  3.         rules: {
  4.             firstname: "required",
  5.             lastname: "required",
  6.             username: {
  7.                 required: true,
  8.                 minlength: 2
  9.             },
  10.             password: {
  11.                 required: true,
  12.                 minLength: 5
  13.             },
  14.             confirm_password: {
  15.                 required: true,
  16.                 minlength: 5,
  17.                 equalTo: "#password"
  18.             },
  19.             email: {
  20.                 required: true,
  21.                 email: true
  22.             },
  23.             topic: {
  24.                 required: "#newsletter:checked",
  25.                 minLength: 2
  26.             },
  27.             agree: "required"
  28.         },
  29.         messages: {
  30.             firstname: "Please enter your firstname",
  31.             lastname: "Please enter your lastname",
  32.             username: {
  33.                 required: "Please enter a username",
  34.                 minLength: "Your username must consist of at least 2 characters"
  35.             },
  36.             password: {
  37.                 required: "Please provide a password",
  38.                 minLength: "Your password must be at least 5 characters long"
  39.             },
  40.             confirm_password: {
  41.                 required: "Please provide a password",
  42.                 minLength: "Your password must be at least 5 characters long",
  43.                 equalTo: "Please enter the same password as above"
  44.             },
  45.             email: "Please enter a valid email address",
  46.             agree: "Please accept our policy"
  47.         }
  48.     });
  49.    
  50.     // propose username by combining first- and lastname
  51.     $("#username").focus(function() {
  52.         var firstname = $("#firstname").val();
  53.         var lastname = $("#lastname").val();
  54.         if(firstname && lastname && !this.value) {
  55.             this.value = firstname + "." + lastname;
  56.         }
  57.     });
  58.    
  59.     //code to hide topic selection, disable for demo
  60.     var newsletter = $("#newsletter");
  61.     // newsletter topics are optional, hide at first
  62.     var inital = newsletter.is(":checked");
  63.     var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
  64.     var topicInputs = topics.find("input").attr("disabled", !inital);
  65.     // show when newsletter is checked
  66.     newsletter.click(function() {
  67.         topics[this.checked ? "removeClass" : "addClass"]("gray");
  68.         topicInputs.attr("disabled", !this.checked);
  69.     });
  70. });

再看HTML代码

  1. <form class="cmxform" id="signupForm" method="get" action="">
  2.     <fieldset>
  3.  
  4.         <legend>Validating a complete form</legend>
  5.         <p>
  6.             <label for="firstname">Firstname</label>
  7.             <input id="firstname" name="firstname" />
  8.         </p>
  9.         <p>
  10.             <label for="lastname">Lastname</label>
  11.  
  12.             <input id="lastname" name="lastname" />
  13.         </p>
  14.         <p>
  15.             <label for="username">Username</label>
  16.             <input id="username" name="username" />
  17.         </p>
  18.         <p>
  19.             <label for="password">Password</label>
  20.  
  21.             <input id="password" name="password" type="password" />
  22.         </p>
  23.         <p>
  24.             <label for="confirm_password">Confirm password</label>
  25.             <input id="confirm_password" name="confirm_password" type="password" />
  26.         </p>
  27.         <p>
  28.             <label for="email">Email</label>
  29.  
  30.             <input id="email" name="email" />
  31.         </p>
  32.         <p>
  33.             <label for="agree">Please agree to our policy</label>
  34.             <input type="checkbox" id="agree" name="agree" />
  35.         </p>
  36.         <p>
  37.             <label for="newsletter">I'd like to receive the newsletter</label>
  38.  
  39.             <input type="checkbox" id="newsletter" name="newsletter" />
  40.         </p>
  41.         <fieldset id="newsletter_topics">
  42.             <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
  43.             <label for="topic_marketflash">
  44.                 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
  45.                 Marketflash
  46.             </label>
  47.             <label for="topic_fuzz">
  48.  
  49.                 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
  50.                 Latest fuzz
  51.             </label>
  52.             <label for="topic_digester">
  53.                 <input type="checkbox" id="topic_digester" value="digester" name="topic" />
  54.                 Mailing list digester
  55.             </label>
  56.             <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
  57.         </fieldset>
  58.  
  59.         <p>
  60.             <input class="submit" type="submit" value="Submit"/>
  61.         </p>
  62.     </fieldset>
  63. </form>

怎么样？是不是JS代码和HTML完全分开了？不需要对HTML进行修改，在JS中进行设置就OK啦～
在JQuery中对rules和messages分别进行了定义，这样子就不需要在HTML进行设置了（个人比较推崇后一种，JS和HTML分离）

JQuery学习

  1. 目前还没有任何评论.
  1. 目前还没有任何 trackbacks 和 pingbacks.