首页 > 代码库 > jquery

jquery

  1.加载DOM
     使用任何框架时,通常都会与文档对象(DOM)交互。但是为了这种交互,必须首先确定整个DOM已经加载。
  (1)在javascript编程中,通常在采取行动之前等待窗口加载:
       window.onload=function(){
    // Do whatever  here.
    }
    或使用匿名函数:
     (
  function(){
        // Do whatever  here.
  }
  )()
  (2)在使用jquery中,等价的做法:
      $(document).ready(
      function(){
         // Do whatever  here. 
      }  
   )
   或简化为:
    $(
       function(){
    //Do  whatever here.
    }
   
    )

2.选择元素(更多内容参考juery手册)
   引用页面元素对于添加事件处理区,操作DOM,读取表单值来说是必需的。
   (1)在javascript中,可以使用document对象的getElementById(),getElementByTagName()及其他技术来完成此工作。
   (2)在jquery中,通过$()函数进行选择。
         ①用css选择符选择其他页面:
    #id  //根据给定的ID匹配一个元素。
    .class  //根据给定的类匹配元素
    element   //根据给定的元素名匹配所有元素
    使用时,将选择符作为$()函数的参数,并加引号,如:
        $(‘#name‘);//选择id值name的元素
   这些规则可以合并使用,如:
        $(‘img.langscpe‘);//选择class为landscape的所有图像
     $(‘#loginForm input‘);//选择在id为longinForm的元素中找到所有输入元素

3.操纵元素(更多内容参考juery手册)
      选择元素后,可以应用许多jquey函数进行其他操作(更多内容参考jquery手册)
         (1)修改选中元素的属性----->>>attr()
         attr(arg0,arg1)//方法修改选中元素的属性,支持“链式”函数
                //第一个参数:是访问的属性,第二个参数:设置的新值。
  如:    ①var  submit=$(‘#submitButtonId‘)
          submit.attr(‘disabled‘,‘disabled‘); 
    ②“链式”方式修改
        $(‘#submitButtonId‘).attr(‘disabled‘,‘disabled‘).attr(‘value‘,‘...progressing...‘);
    (2)修改选中元素的CSS样式---->>>addClass() ,removeClass(),toggleClass(),css()
         $(‘#blockId‘).addClass(‘emphasis‘);//添加class样式
      $(‘#blockId‘).removeClass(‘emphasis‘);//移除class样式
      $(‘#blockId‘).toggleClass(‘emphasis‘);//切换类的应用;如果选中的元素没有应用类则添加,否则删除类。
        $(‘#blockId‘).css(arg0,arg1);//改变单独的样式。第一个参数是样式名称,第二个参数是新值。
    (3)修改选中元素的内容----->>>val();
                var  comments=  $(‘comments‘);
                    var value=http://www.mamicode.com/comments.val();//获取当前值
     if(value.length>100){//如果元素当前内容长度大于100
     comments.val(value.slice(0,100));//设置内容长度为100

4.DOM操作(更多内容参考juery手册)
     使用举例:
       var  submit=   $(‘#submitButtonId‘);//获得表单元素引用
          submit.before(‘<p>new paragraph</p>‘);//在表单之前添加一个新段落

5.事件处理(更多内容参考juery手册)
     (1)jquery事件处理器语法格式:
          selection.eventTyep(function);
  eventType值根据选择的元素不同而不同,常见值有:change,focus,mouseover,click,submit,select等
    如:$(‘img‘).mouseover(function(){
        //Do  something here.
       });
  注意:jquery1.7版本添加了新的on()和off()方法,用于添加或者移除事件处理器
    (2)jquery还定义了些将更复杂的事件处理器与元素关联的方法,
   例如:hover(fn1,fn2)方法,鼠标移过函数作为第一参数,鼠标移出函数作为第二个参数,可以在一步中创建两个事件处理器

6.Ajax操作
   (1) ajax使用举例(验证用户名是否已注册)
 $.ajax({
  url:"/goods/UserServlet",//要请求的servlet
  data:{method:"ajaxValidateLoginname", loginname:value},//给服务器的参数
  type:"POST",
  dataType:"json",
  async:false,//是否异步请求,如果是异步,那么不会等服务器返回,我们这个函数就向下运行了。
  cache:false,
  success:function(result) {
   if(!result) {//如果校验失败
    $("#" + id + "Error").text("用户名已被注册!");
    showError($("#" + id + "Error"));
    return false;
   }
  }
 });

 (2)Ajax请求方法
             $.ajax(options);//参数options代表用于配置的请求选项对象,
                             //使用时,至少应包含一下7个参数
        url:请求的资源
        data:给服务器的数据
        type:请求类型(常见的有POST和GET)
        dataType:请求响应数据类型
        async:是否异步请求,如果是异步,那么不会等待服务器返回,函数会向下运行,true:表示异步
        cache:是否缓存
        succes:fn   指定ajax请求成功成功完成时调用的函数。成功意味着,readyState值为4,并且返回一个正常的状态码,函数fn不需要检查这些状态
               ;该函数至少有一个参数(服务器响应数据);对象的最后一个属性
  7.jquery插件
    框架具备利用插件快速添加复杂功能的能力,这是原生javascript不具备的能力。
 jquery  ui:  http://jqueryui.com  //定义了许多有用途的小部件(Widget),如:折叠控件,自动完成,日期选择,选项卡,以及拖放,改变大小,排序等优秀特性

jquery