jquery和css的一些学习心得（一）

 

最近由于项目开发需要，学习一些jquery的东东，有一些小东西总结一下，也算是一个小笔记。

 

1）. 在js对象中灵活添加css样式有两种方式，一种在在css中写一个样式对象，然后在js的对象方法中通过addClass（..）的方式把这个样式添加进来，另一种方式是直接在js的function中调用函数 .css（..）的方式添加样式。

例如：

 index.html文件：

 

...	
<div id="container">
		<div id="header">
			<h1>StarTrackr!</h1>
    </div>
		<div id="content">
			<h2>
				Image Gallery
			</h2>
      <div id="ajaxInProgress"></div>
      <div id="gallery">
        <img src="../../images/beau_200.jpg" alt="" />
        <img src="../../images/fader_200.jpg" alt="" />
        <img src="../../images/kellie_200.jpg" alt="" />
        <img src="../../images/mofat_200.jpg" alt="" />
        <img src="../../images/johnny_200.jpg" alt="" />
        <img src="../../images/glenda_200.jpg" alt="" />
      </div>
</div>
</div>
....

     

 

 gallery.css文件：

 

#gallery {
  background-color:#94C5EB;
  border:1px solid #015287;
  height:103px;
  text-align:center;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

#gallery img { 
  width: 97px; 
  height: 97px; 
  float:left; 
  border:1px 
  solid #fff; 
  padding:2px;
}


h2 {
  clear: both;
}

#ajaxInProgress{
	width:610px;
	height:13px;
	margin-top:-5px;
	padding: 2px 0;
}
.progress {
  background: #fff url(progress.gif) no-repeat center right;
}

   

 js文件：

 

$(document).ready(function(){
  $('#ajaxInProgress')
    .ajaxStart(function() { 
      $(this).addClass('progress'); 
    })
    .ajaxStop( function(){ 
      $(this).removeClass('progress'); 
    });
  GALLERY.load();
});

var GALLERY = {
  container: '#gallery',
  url: 'getImages',
  delay: 5000,
  
  load: function() {
    var _gallery = this;

    $.ajax({ 
      type:"get", 
      url: this.url, 
      beforeSend: function() {
        // fade out and remove the old images
        $(_gallery.container)
          .find('img')
          .fadeOut('slow', function() {
            $(this).remove();
          });
      },
      success: function(data){ 
        var images = data.split('|');
        $.each(images, function() {  
          _gallery.display(this);
        });
      },
      complete: function() {
        setTimeout(function() {
          _gallery.load();
        }, _gallery.delay);
      }
    });
  },
  display: function(image_url) {
    $('<img></img>')
      .attr('src', '../../images/' + image_url)
      .hide()
      .load(function() { 
        $(this).fadeIn();
      })
      .appendTo('#gallery');
  }
}

 注： 也可以直接通过调用js函数 .css(...);直接设置js对象的样式：

 

$(document).ready(function(){
  $('#ajaxInProgress')
    .ajaxStart(function() { 
      $(this).css( background: #fff url(progress.gif) no-repeat center right;); 
    })
    .ajaxStop( function(){ 
      $(this).css( background: inherit;); 

    });
  GALLERY.load();
});

二：js中对html中标签属性进行对象化操作，采用$(':标签属性名')的方式：

...     
   <form action="">
          <div>
            <label for="name">Name:</label>
            <input name="name" id="name" type="text"/>
          </div>
          <div>
            <label for="email">Email:</label>
            <input name="email" id="email" type="text"/>
          </div>
          <div>
            <label for="website">Web site:</label>
            <input name="website" id="website" type="text"/>
          </div>   
          <div>
            <input type="radio" name="sex" value="male">Male</input>
            <input type="radio" name="sex" value="female">Female</input> 
          </div>
          <div>
            <label for="comment-text">Comment:</label>
            <textarea rows="10" cols="50" name="comment-text" id="comment-text"></textarea>
          </div>    
          <div>
          	<input type="submit" value="Submit" />
        	</div>
        </form>
...

 $(document).ready(function(){

  $(':submit').click(function(e) {
    $(':text').each(function() {
      if($(this).val().length == 0) {
        $(this).css('border', '2px solid red');
      }
    });
    e.preventDefault();
  });
});

 

form div {

margin: 0 0 10px 160px;
}


form div label {
	width: 140px;
	float: left;
	text-align: right;
	margin: 5px 20px 0 -160px;
}

 

 

三：

     js中的 .blur(  function(){

    ...});  这个是鼠标移开标签对象时触发事件函数。

    .foucs( function(){

      ...});  这个是鼠标点击标签对象（焦点事件）时的事件函数。比如：

 

 

$(document).ready(function(){
  $(':input').blur(function() {
    if($(this).val().length == 0) {
      $(this)
        .addClass('error')
        .after('<span class="error">This field must be filled in!</span>');
    }
  });
  $(':input').focus(function() {
    $(this)
      .removeClass('error')
      .next('span')
      .remove();
  });
});

 其中的 ' :input ' 是input属性标签对象。  

 

四：form表单提交和输入框是否为空验证： $("form").submit( function(){....});

   $(...).find('标签属性名')可能找到同类属性的很多标签对象，然后通过.each( function(){...});    对遍历到的各个对象进行循环逻辑处理。

   当然还可以利用jquery官网提供的验证插件进行表单验证：jquery.validate.min.js

 

 

(document).ready(function(){
  $("form").submit(

      function(){
  	var error = false;
  	$(this).find(":text").each(function(){
  		if ($(this).val().length == 0) {
  			alert("Textboxes must have a value!");
  			$(this).focus();
  			error = true;
  			return false; // Only exits the “each” loop
  		}
  	});
  	if (error) {
  		return false;
  	}
  	return true;
   }
   );

});

 

五： textarea标签中对输入字数的限制显示和字数自动递减显示（触发按键事件）：

 

       <form action="">
          <div>
            <label for="name">Name:</label>
            <input name="name" id="name" type="text"/>
          </div>
          <div>
            <label for="comment-text">Comment:</label>
            <textarea rows="7" cols="30" name="comment-text" class="maxlength" id="comment-text"></textarea>
          </div>    
          <div>
          	<input type="submit" value="Submit" />
        	</div>
        </form>

 

 

$(document).ready(function(){
 
 $('.maxlength')
    .after("<span></span>")
    .next()
    .hide()
    .end()
    .keypress(function(e) {
      var current = $(this).val().length;
      if(current >= 130) {
        if(e.which != 0 && e.which != 8) {
          e.preventDefault();
        }
      }
      $(this).next().show().text(130 - current);
    });
});

   效果如下：

 

 

六：获取标签的value值得方法：

   比如：

 $('input').each( function(){

  $(this).val();

});

 

七：

  1）.contents() 没有参数， 返回每一个元素的子元素的内容，包括text和comment。

  2） .replaceWith(“。。”); 用新的标签元素内容或者函数取代老的content或者函数。可能是an HTML string, DOM element, or jQuery object.

  3） .toggleClass('标签样式');增加或者取消css样式对象。 

  4） DOM：文档对象模型 。它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。

 

八：

   js中对函数的调用入口可以写成：$(doucument).ready(function(){

                         .....//直接调用别的js函数

                  });

  也可以直接：

    $().ready( function(){

           ....//直接调用别的js函数

});

 

这些函数就是在加载html页面时就会执行的脚本函数。