jquery笔记1

一，jquery使用

  1，下载jquery.js（如附件jquery.zip）。这是一个网上找到的一个google code地址：http://code.google.com/p/jqueryjs/downloads/list 。

 2， 测试页面如附件jqeurytest1.zip

 3， 总结：

    a.  jquery的id选择器 $("#元素id")

    b.  事件绑定函数 bind("事件名称", 事件处理函数)

    c.  显示/隐藏函数  show()/hide()

    d.  修改元素html内容函数 html("新内容");

 

二，jquery选择器

   1，dom对象和jquery包装集：

      a. dom对象：var domObj = document.getElementById("eleid")

      b. jquery包装集：var jquerySet = $("#eleid")

      c. dom对象转jquery包装集：

          var domObj = document.getElementById("eleid");

          var jquerySet = $(domObj);

       d. jquery包装集转dom对象（通过索引访问器实现）：

          var jquerySet = $("#eleid");

          var domObj = jquerySet[0];

       e.  //each中的this是dom对象
           var jquerySet = $("#msg_div");
           jquerySet.each(function(){
                  alert($(this).html());
           });

    2, jquery选择器（详情请看附件的png图片）：

       a. $是jQuery的缩写，jQuery是jquery库中的核心对象：$("#eleid")等同于jQuery("eleid")

       b. 基础选择器basic（5类）："#id",".class","*","#id,.class","element"

       c. 层次选择器hierarchy（4类）："pre+next"如"#eleid+img"选择id是eleid后面的img标签元素；"pre~sibling"如"#eleid~[class]"选择id是eleid后面的带class属性的元素。

 

三， jquery动画实例：如附件jquerytest4.zip和附件jQuery系列教程代码\chapter7\lab.effects.html所示.

 

四， jquery异步（post方式）：

$(document).ready(
  function(){
      //$("#msg_div").load("test/hello.action",{"resultType":"html"});
   $("#msg_div").load("test/hello.action",{"resultType":"html"}, function(responsText, status, xmlhtttpRequest){
     responsText = "ajax 回调内容:" + responsText +
          "<br/>status:" + status +
          "<br/>xmlhtttpRequest:" + xmlhtttpRequest;
     $(this).html(responsText);
    });
  }
 ); 

 

五，jquery的json插件，见附件jquery.json-2.2.zip。 实例代码如下：

var thing = {plugin: 'jquery-json' , version: 1.3};
var encoded = $.toJSON(thing);              //'{"plugin": "jquery-json", "version": 1.3}'
var name = $.evalJSON(encoded).plugin;      //"jquery-json"
var version = $.evalJSON(encoded).version;  // 1.3     

 

 

六.全局Ajax事件

 

名称	说明
ajaxComplete( callback )	AJAX 请求完成时执行函数
ajaxError( callback )	AJAX 请求发生错误时执行函数
ajaxSend( callback )	AJAX 请求发送前执行函数
ajaxStart( callback )	AJAX 请求开始时执行函数
ajaxStop( callback )	AJAX 请求结束时执行函数
ajaxSuccess( callback )	AJAX 请求成功时执行函数

名称	说明
ajaxComplete( callback )	AJAX 请求完成时执行函数
ajaxError( callback )	AJAX 请求发生错误时执行函数
ajaxSend( callback )	AJAX 请求发送前执行函数
ajaxStart( callback )	AJAX 请求开始时执行函数
ajaxStop( callback )	AJAX 请求结束时执行函数
ajaxSuccess( callback )	AJAX 请求成功时执行函数

名称 说明
ajaxComplete( callback ) AJAX 请求完成时执行函数
ajaxError( callback ) AJAX 请求发生错误时执行函数
ajaxSend( callback ) AJAX 请求发送前执行函数
ajaxStart( callback ) AJAX 请求开始时执行函数
ajaxStop( callback ) AJAX 请求结束时执行函数
ajaxSuccess( callback ) AJAX 请求成功时执行函数

实例如附件jqueryajaxevent.zip所示。

 

七，jqueryui示例（提示框，弹出窗口，tab，according菜单），如附件jqueryui-test.zip和jqueryui-tab&according.zip所示。

 

八，表单认证和自动补全

   1， 表单验证包见附件jquery.validate.zip。

   2，自动补全，见附件jquery.autocomplete.zip和validate&smart.zip。

 

 

 

九. 单选框操作

$(document).ready(
  function(){
       $('input[name=radioname]').each(function(){
           var id = $(this).attr('id');
           var trId = '#'+id+'_tr';
           $(trId).hide();
       });
     var item = $('input[name=radioname][checked]');
     var itemId = item.attr('id');
     var itenTrId = '#'+itemId+'_tr';
     $(itenTrId).show();
  }
 );

选中radio

$('#eleid').attr('checked','checked');

 

radio选中的另一个表达

$('input:radio[name="radioid"]:checked').attr('id')

 

//获取Select选择的Text

$("#myid").find("option:selected").text();

 

十. jquery 对象不为空

如$('#hidden_id')如果不存在id为hidden_id的元素，此对象$('#hidden_id')也不为null，不为undefine，而是空数组"[]"

 

十一 元素定位

fn = function(){
    var gameName = $("#searchByGameName").val();

    var gameList = $(".games-list");
    var len = gameList.length;
    for (var i=0; i<len; i++){
        var gName = $(gameList[i]).find("h5").html();
        if (gName == gameName){
            var top = $(gameList[i]).offset().top;
            $('html,body').animate({'scrollTop': top}, 150)
            return ;
        }
    }
   
}