jQuery语法小结(超实用)

时间: 作者:准每

  

[jquery语法,语法小结]jQuery语法小结(超实用)

  

1、关于页面元素的引用  

  

  通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

  

  

2、jQuery对象与dom对象的转换  

  

  只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。

  
  

  

  普通的dom对象一般可以通过$()转换成jquery对象。

  
  

  

  如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。

  
  

  

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。

  
  

  

如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。

  
  

  

以下几种写法都是正确的:  
  

  

程序代码  
  

  
  
  $("#msg").html();  $("#msg")[0].innerHTML;  $("#msg").eq(0)[0].innerHTML;  $("#msg").get(0).innerHTML;
  
  

3、如何获取jQuery集合的某一项  

  

  对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个

元素的内容。有如下两种方法:  
  

  

程序代码  
  

  
  
  $("div").eq(2).html(); //调用jquery对象的方法  $("div").get(2).innerHTML; //调用dom的方法属性
  
  

4、同一函数实现set和get  

  

Jquery中的很多方法都是如此,主要包括如下几个:  
  

  

$("#msg").html(); //返回id为msg的元素节点的html内容。

  
  $("#msg").html("new content");  
  //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content  
  $("#msg").text(); //返回id为msg的元素节点的文本内容。

  
  $("#msg").text("new content");  
  //将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content  
  $("#msg").height(); //返回id为msg的元素的高度  
  $("#msg").height(""); //将id为msg的元素的高度设为  
  $("#msg").width(); //返回id为msg的元素的宽度  
  $("#msg").width(""); //将id为msg的元素的宽度设为  
  $("input").val("); //返回表单输入框的value值  
  $("input").val("test"); //将表单输入框的value值设为test  
  $("#msg").click(); //触发id为msg的元素的单击事件  
  $("#msg").click(fn); //为id为msg的元素单击事件添加函数  

  

同样blur,focus,select,submit事件都可以有着两种调用方法  

  

5、集合处理功能  

  

  对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。

  
  

  

包括两种形式:  
  

  

程序代码  
  

  
  
  $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})  //为索引分别为0,1,2的p元素分别设定不同的字体颜色。

  $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})  //实现表格的隔行换色效果  $("p").click(function(){alert($(this).html())})  //为每个p元素增加了click事件,单击某个p元素则弹出其内容

  
  

6、扩展我们需要的功能  
  
  

  

程序代码  
  

  
  
  $.extend({  min: function(a, b){return a < b?a:b; },  max: function(a, b){return a > b?a:b; }  }); //为jquery扩展了min,max两个方法  
  
  

使用扩展的方法(通过“$.方法名”调用):  

  

alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));   (责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

Copyright © 2010-2019 菲娱国际平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 菲娱国际平台