当前位置：首页 → 问答吧 → Jquery 学习笔记

Jquery 学习笔记

时间：2010-09-18

来源：互联网

Jquery 学习笔记和部分实例代码，教程是《Jquery基础教程》，在VeryCD下的PDF版本。比较乱，大家将就一下
------------------------------------------------------------------------------
筛选出可见的元素，.filter(":visible").这个选择器在hide()和show()时常用
$("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
------------------------------------------------------------------------------
定时与取消定时
t = setInterval("showAuto()", 2000);
clearInterval(t)},
jquery在图片联播时的
t = setInterval("showAuto()", 2000);
    $("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});
------------------------------------------------------------------------------
表单的确认提交
  $("input[name='submit']").click(
   function(){
        //这里可先插入检查内容的代码
    sure=window.confirm('你确定要提交吗');
    if(sure){
     $(this).parent().submit();
    }else
    {return false;}
    });
------------------------------------------------------------------------------
//DOM加载完后执行
$(document).ready( )
------------------------------------------------------------------------------
//ID下的某个子元素
$('#selected-play > li')
选择ID为selected-play 子元素(>)中所有的列表项(li)
没有>则选取了所有的后代元素li
------------------------------------------------------------------------------
//ID为#zhu下的后代li元素中不属于test类的li 注意引号的位置
$('#zhu li:not(.test)').addClass('test2');
------------------------------------------------------------------------------
XPath选择符 //严重怀疑教程使用的Jquery版本过低或者错误使用方法
这个主要是针对元素的子元素或属性来筛选元素。
属性选择符   元素[@属性]         //选到的元素为要操作的对象
选择所有带title属性的链接,个人怀疑不用@才是正确的。
$('a[@title]')
选择包含一个ol的所有div元素 //貌似也不灵。
$('div[ol]')

//这个很值得怀疑。@根本不用使用。使用了反而行不通
$('a[@href^="').addClass('mailto');
//可以使用正则表达式对属性元素筛选
    $('a[href^=mailto]').addClass('mailto');
    $('a[href$=".pdf"]').addClass('pdf');
    $('a[href*="52mtk"]').addClass('inlink');
------------------------------------------------------------------------------
自定义选择符
$('div.horizontal:eq(1)') /*类名为horizontal的第二个div元素*/
$('a.inlink:eq(0)').addClass('new').removeClass('inlink');
$('li:eq(1)').addClass('new'); /*所有匹配li的元素的第二项   js索引从0开始自定义选择符*/
$('div:nth-child(1)').addClass('newer'); //第一个div.   CSS索引从1开始。CSS选择符
------------------------------------------------------------------------------
:odd 奇数
:even偶数
第一个元素从0开始，其中0是偶数

$('li:odd').addClass('odd');
$("li:even").addClass('even'); //第一个li (以0开始)应用了偶数的样式。
------------------------------------------------------------------------------
:contains("..") 包含某内容
如
<li>dream</li>
//可这样得到
$('li:contains("dream")').addClass('highlight');
------------------------------------------------------------------------------
//注意：相同属性的最终选择与样式表中定义的顺序有关
------------------------------------------------------------------------------
$('tr').filter(':odd').addClass('odd'); ==$('tr:odd).addClass('odd');
------------------------------------------------------------------------------
parent() 选择父结点。即使有多个th，但JQ不会重复给同一个父结点增加相同的类。
$('th').parent().addClass('class') ;
$('tr:not([th]):odd).addClass('class') ;结合Xpath。注意:not([th])这个写法。
------------------------------------------------------------------------------
next() 下一项
$('td:contains("2")').parent().next().addClass('hl2');
------------------------------------------------------------------------------
兄弟元素,有点问题的。。。
sibling()
------------------------------------------------------------------------------
查找 .find('element') 排除条件.not(":contains('XXX')")
$('td:contains("4")').parent().find('td').not(":contains('4')").addClass('hl2');
------------------------------------------------------------------------------
get 返回一个DOM对象
$('#my-element').get(0) 可简写成$('#my-element')[0]
如下取得DOM对象标签名
var myTag=$('#my-element').get(0).tagName;
******************************************************************************
事件
$(document).ready() 一般比onload事件优越。
但是有时可能由于支持文件未下载完，所以类似图像的宽度和高度这样的属性未必有效，这时可以利用jQuery 的load()来处理
------------------------------------------------------------------------------
$(document).ready(function(){...});
另一写法
$().ready(function() { ...});
再一写法
$(function(){...});
但第一种最常用。
------------------------------------------------------------------------------
样式切换
绑定元素到点击事件在 $().ready()中
$('#id').bind('click',function(){...}); 等价于$('#id').click(function(){...});
$(this).addClass('myclass');
这里的this是一个DOM对象
可以这样判断
if(this.id=='large')
$(this).addClass('large');
------------------------------------------------------------------------------
toggle点击元素时交替执行两个函数 /接受两个参数是函数
$('#hid').toggle(function(){
  $('#switcher').addClass('hidden');
  this.value='显示';},
  function(){
   $('#switcher').removeClass('hidden');
   this.value='隐藏';
   }
  )
也可以用toggleClass来交替使用类
$().ready(function() {
$('#hid').click(function(){$('#hid').toggleClass('hidden');})
});
------------------------------------------------------------------------------
hover 放在元素上面的时候执行一个函数，离开时执行另一个操作，参数同toggle
$('#hov').hover(
  function() {$(this).addClass('hover');
  $('.normal').addClass('hidden')
   },
  function(){ $(this).removeClass('hover');
   $('.normal').removeClass('hidden');}
  );

------------------------------------------------------------------------------
事件捕获（从一般到具体）与事件冒泡（从具体到一般）
DOM的标准是先从一般到具体，再通过事件冒泡返回DOM树的顶层
事件处理程序可以注册到这个过程的任何一部分

/*演示事件冒泡 ,点击div的后代元素也会触发该事件*/
$('#switcher').click(function(){
  $('p').toggleClass('hidden');
  });
------------------------------------------------------------------------------
解决方法：加入JS的event.target与this的DOM目标元素比较
$('#switcher').click(function(event){
  if(event.target==this){
   $('p').toggleClass('hidden');
  }
  });
------------------------------------------------------------------------------
方法二：event.stopPropagation();
但还是会冒泡，无论是火狐还是IE！奇怪了。
------------------------------------------------------------------------------
阻止默认动作
  $("a:contains('link')").click(function(){
   return false;//相当于同时调用了.stopPropagation()和.preventDefault()
  }); //如此，点击<a href="Xpath1.htm">it's a link</a><br />并不跳转了。
------------------------------------------------------------------------------
.unbind 注意函数不加引号
$('#switch').unbind('click',somefunction);
.one方法   切换操作只会发生一次。
toggleStylesSwitcher是事先定义的。
$().ready(function(){
$('#switcher').one('click',toggleStylesSwitcher);
});
------------------------------------------------------------------------------
hide方法
$('#switcher').hide();
------------------------------------------------------------------------------
.trigger()模拟事件操作
$().ready(function(){
$('#switcher').trigger('click'); //模拟点击了。触发对象的click事件
});
******************************************************************************
操作CSS
------------------------------------------------------------------------------
.css方法两种参数
.css('property','value') //属性值对
.css({property1: 'value1', 'property2:'value2'}) //对象字面量

------------------------------------------------------------------------------
改变字号
$(document).ready(function() {
  $('#larger').hover(function(){
   $(this).css({"cursor":"pointer"});
  });



  $('#larger').click(function(){
   var $speech=$('div.speech');
   var currentSize=$speech.css('fontSize');
   var num=parseFloat(currentSize); 字符串转浮点数，开头为数字，后面字符忽略
   var unit=currentSize.slice(-2); //相当于PHP的substr
   num*=1.5;
   $speech.css('fontSize',num + unit);

   console.log(num);


  });
------------------------------------------------------------------------------
一般都是通过取得一组jquery对象，通过this.id筛选
$(document).ready(function() {
  $('div.button').hover(function(){
   $(this).css({"cursor":"pointer"});
  });



  $('div.button').click(function(){
   var $speech=$('div.speech');
   var currentSize=$speech.css('fontSize');
   var num=parseFloat(currentSize);
   var unit=currentSize.slice(-2);
   if(this.id=='larger'){
    num*=1.5;}
    else if(this.id=='smaller')
    {num/=1.5;}else {
    num=12;
    }

   $speech.css('fontSize',num + unit);

   console.log(num);


  });

  })
隐藏显示与动画效果：

  $('p:eq(1)').hide();


  $('span.more').click(function(){
    $('p:eq(1)').fadeIn('slow'); //渐显效果

    $(this).hide();
   });

   $('span.less').click(
   function(){
    //$('p:eq(1)').fadeTo('slow');
    $('p:eq(1)').hide('fast'); //收缩时动画效果，不加参数则无

    $('span.more').show();
   }
  );
------------------------------------------------------------------------------
动画参数：第一个类似.css方法,第二个速度，第三个可选的缓动类型，最后一个是回调函数（可选）
.animate({param1:'value1',param2:'value2'}, speed,[easing] ,function(){alert('...')});
/*动画效果*/
$('#moveText').toggle(function(){

  $('span#animate').animate({left:800},'slow');
  },function(){
  $('span#animate').animate({left:0},'slow');
  });
------------------------------------------------------------------------------
.css('属性') 取得对象的CSS属性，
$('div.button:eq(1)').css('width') 带有单位px
$('div.button:eq(1)').width() 这个不带px
$('div.button:eq(1)').css('backgroundColor'); 属性骆驼命名法，跟JS是一样的
------------------------------------------------------------------------------
连缀的写法
$('span#animate').animate({left:0},'slow').animate({top:0},'slow');
------------------------------------------------------------------------------
   //$('span#animate').slideUp('slow');//幻灯片式向上折叠消失
------------------------------------------------------------------------------
   $(this).slideUp('slow').next().slideDown('slow');          //对一组元素，(这里是$(this)和$(this).next() )如果不使用回调函数，这两个效果是同时发生的。。。。

------------------------------------------------------------------------------
使用回调函数安排多个元素的顺序
var $thisPara=$(this);
$thisPara.next().slideDown('slow',function(){$thisPara.slideUp('slow')});
//第二个元素先从下切入，第一个元素再向上切出
------------------------------------------------------------------------------
对同一个元素的不动方法如.animate后使用.css 也可以使用回调函数的做法。
$(this).next() 这样使用后$(this)已经改变了。。。。
为了安全使用可以var $thisPara=$(this)先
------------------------------------------------------------------------------
DOM操作
******************************************************************************
属性工具
$('div.article a').attr({'rel':'external'})
------------------------------------------------------------------------------
.each的循环遍历，index是计数器，text()是链接的文本
  $('div.article a').each(function(index){
   var $thisLink=$(this);
   $thisLink.attr({'title':'点击了解更多关于:'+$thisLink.text(),'id':'article_'+parseInt(index+1)});
  });
------------------------------------------------------------------------------
创建节点与加入到元素
//before与insertBefore
//after与insertAfter
//append与appendTo
//prepend...
//区别在于连缀的元素不同。
$("<a href='#top'>回到顶部</a>").insertAfter('div.article p');
另一写法
$('div.article p').after("<a href='#top'>回到顶部</a>")
------------------------------------------------------------------------------
在其他元素中插入元素
prependTo
------------------------------------------------------------------------------
从第二个段落开始添加一个链接到页面顶部
//gt ==greater than 索引从0开始。
//lt /less than
//eq /equal
$("<a class='goTop' href='#top' >回到顶部</a>").insertAfter('div.article p:gt(1)');
  $("<a id='top'></a>").prependTo('body');
------------------------------------------------------------------------------
添加到子节点
//append与appendTo
添加子节点/依附到某母节点，顺序是按after
//prepend与prependTo
添加子节点/依附到某母节点 , 顺序是before
------------------------------------------------------------------------------
这段代码表现注释的链接和反链接回去
  $('span.footNote').each(function(index){
   $(this).before('<a href=#foot-'+parseInt(index+1)+ ' id=content-'+parseInt(index+1)+'><sup>'+parseInt(index+1)+'</sup></a>')
   .appendTo('#notes')
   .append('<a href=#content-'+parseInt(index+1)+' id=foot-'+(index+1)+'><sup>'+'返回</sup></a>');
  });

  $('a[id*="foot"]').each(function(index){
     $(this).click(function(){
      $('a#content-'+parseInt(index+1)).css('backgroundColor','blue');
     });
   });
------------------------------------------------------------------------------
wrap
包装，创建一个新元素并把自己作该元素的子节点
.wrap('<li id="foot-note-'+(index+1)+'"></li>');
------------------------------------------------------------------------------
克隆
.clone()
如果只不克隆子节点，如Text Node 可加入参数false
$('p:eq(0)').clone(false);
------------------------------------------------------------------------------
$(this).clone()
此时操作的是clone后的结点
------------------------------------------------------------------------------
  /*引言设置*/
  $('span.pull-quote').each(function(index){
   var $parentPara=$(this).parent('p');
   $parentPara.css('position','relative');
   var $clonePara=$(this).clone(false);
   $clonePara.addClass('pulled').prependTo($parentPara);
   $clonePara[0].id='quote_'+(index+1);


  });
------------------------------------------------------------------------------
find查找后返回原对象
$clonePara.find('span').html('&hellip').end()
------------------------------------------------------------------------------
.html / .text() 修改对象的文本节点
要移除每个匹配元素中的元素
.empty()
要从文档中移除每个匹配的元素及其后代元素，但并不实际删除它们
使用
.remove()
******************************************************************************
Ajax
------------------------------------------------------------------------------
$('div#test').load() 将取得的内容直接放入元素内
  $('div#test').load('http://localhost/11/joinarray.php',function(){alert('finished');});
------------------------------------------------------------------------------
Json
全局函数
$.getJSON(json文件，回调函数）
$.getJSON('../11/json.php',function(data){
   $('div#test').empty();
      $('div#test').text(data.name);
      });
------------------------------------------------------------------------------
用for ...in遍历
  $.getJSON('../11/json.php',function(data){
   $('div#test').empty();
   var key;
   for(key in data) {
    for(key2 in data[key]){
     console.log(data[key][key2]);
    }
   }

------------------------------------------------------------------------------
用全局函数each遍历
$.each(data,function(entryIndex,entry){ //索引与条目，映射或数组

    var html ='<div class="entry">';
    html+='<div class="id">'+entry.num+'</div>';
    html+='<div class="name">'+entry.name+'</div>';
    html+='</div>';
    //$('div.entry').appendTo('#test');
    $('#test').append(html); //新创建的节点貌似多用原有节点append,用appendTo主动依附好像不行。appendTo应该多用于移动复制节点的操作
  }
或者可以这样,用this关键字
$each (data,function(){
alert (this.num);
...
});
------------------------------------------------------------------------------
全局函数$.getScript('a.js');
立即加载并执行一个脚本！
------------------------------------------------------------------------------
加载XML $.get('d.xml')
用find操作子节点
用attr操作子节点属性
用text()取得节点的文本
用原有元素.append加入新元素

/*取得XML数据*/
$('#getXml').click(function(){

  $('div#test').empty();
  $.get('d.xml',function(data){
   //console.log(data);
   $(data).find('entry').each(function(){
    var $entry=$(this);
    var html='<div class="entry">';
    html+='<h3 class="term">'+$entry.attr('term')+'</h3>';//取得属性值
    html+='<h3 class="part">'+$entry.attr('part')+'</h3>';
    html+='<div class="definition">';
    html+=$entry.find('definition').text(); //取得节点的文本
    var $quote=$entry.find('quote');
    if($quote.length) { //判断是否存在
    html+='<div class="quote">';
    $quote.find('line').each(function(){
     html+='<div class="quote-line">'+$(this).text()+'</div>';


    })
    }
    if ($quote.attr('author')) {
     html+='<div class="quote-author">'+$quote.attr('author')
     +'</div>';


    }

    html +='</div>';
    html +='</div>';
    $('#test').append(html);


   });
  });
   /*遍历DOM*/



}) ;
------------------------------------------------------------------------------
我的实验全局变量与未定义变量的判断和使用

  var queryId=$(this).attr("value");
  /*定义只有两次输入不同数字时才会进行提交*/
  if(typeof(oldId)!="undefined" && oldId==queryId) {return false;} //其中typeof(oldId)!="undefined"相当于php的!isset
  oldId=queryId;              //这里调用了全局变量

------------------------------------------------------------------------------
POST与GET //为了对付IE的缓存：多使用了一个随机参数
  gt=new Date();
  sgt=gt.getTime();
GET：
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
$('a.link#get').click(function(){
  gt=new Date();
  sgt=gt.getTime();
  $.get('../11/testBrowser.php',{'phrase':$(this).text(),'rbs':sgt},
  function(data){
   $('#test').empty();
   $('#test').html(data);
  });
  return false;
});

POST：LOAD方法实际使用的是POST，但更简洁
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
$('a.link#post').click(function(){
/*  $.post('../11/testBrowser.php',{'phrase':$(this).text()},
  function(data){
   $('#test').empty();
   $('#test').html(data);
  });*/
  /*这里的POST等价于LOAD*/
  $('#test').load('../11/testBrowser.php',{'phrase':$(this).text()});

  return false;

});
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
每隔一秒取得服务器时间，这里也要加参数，否则在IE有缓存问题
但这个参数不必可变，因为是POST的
setInterval(myTime,1000);
function myTime(){
/*
$.get('../11/getTime.php',function(data){
   $('#time').text(data);

  });*/
  $('#time').load('../11/getTime.php',{'id':'ii'});
  //alert('hello');
  return false;
}
------------------------------------------------------------------------------
$('form').submit 方法与提交按钮的click方法效果是一样的。
------------------------------------------------------------------------------
$(this).find('input').serialize() ;注意这个序列化语句

------------------------------------------------------------------------------
完整的序列化操作
//序列化，但在处理多选项目时有些问题。
$("form").submit(function(){

  if($('#sendMe').val()=='' || $('#sendPassword').val()=='') {
   $("#state").html('<b>字段不能为空</b>');
  // console.log($('input[@value=""]').attr('id'));//.focus();
   return false;
   }
  $.post("../11/testAjax.php",$(this).find('input').serialize(),function(data){
   //判断登录是否成功
   if(data=='0') { var html='登陆失败,请重试';}
   if(data=='1') {
    var html='登录成功,欢迎你,'+$('#sendMe').val();
    //后台写入session，前台隐藏登录框
    $('#login').hide();

   }





   $('#state').html(html);

  });
  return false;
});
------------------------------------------------------------------------------
/*ajax状态控制*/
//以下两个方法是全局的，只要页面有ajax触发，就会执行这些动作
$('#state').ajaxStart(function(){
  var loading="<img src='images/loading.gif' />";

  $('#state').html(loading);


}).ajaxStop(function(){
  var finish=' <font color="red">done!</font>'

  var ok=$('#state').html()+finish;
  $('#state').html(ok);
  //$('#state').append(finish);
});
------------------------------------------------------------------------------
用load处理Ajax时
load是这样一个玩意：根据提交的内容要决定提交的方法，之前认为默认是POST的理解是错误的。
对于json方式的数据，使用POST来提交，对于字符串或者序列化以后的数据，一般也就是采用serialize()方法处理过的输入内容，使用的是GET方法提交.
手册上是这样说的：
载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。请查看示例。
------------------------------------------------------------------------------
用.post()提交数据，并处理返回的json格式字符串，一个重要的JS函数 eval()
eval()：把字符串语句当JS执行。。。
注意，返回的json格式字符串并非json对象。
$data=$(this).find('input').serialize();
$.post('../11/arrayPost.php',$data,function(result){
eval('var myjson=' + result + ';'); //这里是关键，作用是把result从字符串转化为对象。
console.log(myjson);//firebug测试,显示是对象
$('div#result').html(myjson.name);
});
------------------------------------------------------------------------------
渐显，要先使用hide方法。。
  $('#submit').click(function(){
   $data=$('input').serialize();
   $('div#feedback').hide().load("../11/arrayPost.php",$data,function(){
    $(this).fadeIn(2000); //渐显，要先使用hide方法。。。

                      });
   return false;
  });
------------------------------------------------------------------------------
双触发与作用域
$()函数的第二个参数
$('h3',scope)
//第一个bindBehaviors绑定到document对象作用域，第二个绑定到feedback的div。
作用域不同，如果不设定这个参数，则同为document作用域，提交表单操作后再操作先前的h3，则为执行了两次bindBehaviors，所以样式不会改变。
$(document).ready(function() {
  var bindBehaviors=function(scope){
   $('h3',scope).click(function(){$(this).hide().fadeIn(1000).toggleClass('customh3');});
  }
  bindBehaviors(this);
  $('#submit').click(function(){
   $data=$('input').serialize();
   $('div#feedback').hide().load("../11/returnHtml.php",$data,function(){
    $(this).fadeIn(1000); //渐显，要先使用hide方法。。。
    bindBehaviors(this);
                    });
   return false;
  });

     });
------------------------------------------------------------------------------
使用事件冒泡解决双触发       event.target
is(expr)用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
绑定到一个公共父元素。通过对事件目标的判断进行动作，效果同上
$('body').click(function(event){
if ($(event.target).is('h3') ) {
    $(event.target).toggleClass('customh3');
}
});
------------------------------------------------------------------------------
AJAX取得外部域数据：不使用服务器代理
1.动态加载第三方脚本。
$(document.createElement('script'))
.attr('src','http://外部域/XXX.js).appendTo('head');
2.使用<iframe>加载第三方服务器的数据，
这些iframe的脚本需要向文档的父对象提供数据。

******************************************************************************
第七章：表格操作
******************************************************************************

jQuery 写一个插件方法

.blur()方法
    $('form > input[name="blur"]').css('color','#999999').val('请输入内容').click(function(){
     if($(this).val()=='请输入内容')
     $(this).val('');
    }).blur(function(){

     if($(this).val()=='') {$(this).val('请输入内容');}
     //else $(this).unbind("click");
     });

---------------------------------------------------------------------------
未试验
因为IE6不支持  list-style-type:upper-alpha;
所以用JS和jquery做以下事件：
1.浏览器/能力检测
2.加上标志
$('ul.questions').each({ function(){
var chars=array('A','B','C','D','E','F');
var $qs=$(this);
count=$qs.find('li').size();
for(i=0;i<count;i++){
    var newText=chars+'.'+$qs.find('li').eq(i).text();
    $qs.find('li').eq(i).text(newText);
}
);

作者: falcon 发布时间: 2010-09-18

其中夹杂了很多个人的想法和理解，不当之处还望各位指正。。。

作者: falcon 发布时间: 2010-09-18