jquery 学习第二阶段总结

1，调用方法是要注意：

调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合(返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法)。
所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，
其中$(exp).get(0) 等效于$(exp)[0]。
可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;（经常新手会 $("#msg")[0].html() ,当然这是错误的写法。）
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。


2 同一函数实现set和get:

Jquery中的很多方法都是如此，主要包括如下几个：
$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

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

$("#msg").height(); //返回id为msg的元素的高度
$("#msg").height("300"); //将id为msg的元素的高度设为300
$("#msg").width(); //返回id为msg的元素的宽度
$("#msg").width("300"); //将id为msg的元素的宽度设为300

$("input").val("); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test

$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式

$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件


3 集合处理功能

each:
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为三个不同的p元素单击事件分别设定不同的处理

4.数组
eg:

<SCRIPT LANGUAGE="JavaScript">
<!--
$(function(){
$("tr").each(function(i){   this.style.backgroundColor  =  ['#ccc','#fff'][i%2]   })  
//$("tr:not(:first)")
//$("tr:even").each(function(){   this.style.backgroundColor  =  '#ccc' })   //当然even能实现
})
//-->
</SCRIPT>

$(function(){
$("tr").each(function(i){ this.style.backgroundColor = ['#ccc','#fff'][i%2] })
})

['#ccc','#fff'][i%2] //就这里这个。当然可以用tr:even 。

代码的过程是 对i%2取余数，要么为0要么为1，
所以 要么是['#ccc','#fff'][0] 要么是 ['#ccc','#fff'][1] ，
所以要么是#ccc,要么是#fff.

javascript数组可以这么定义 var array =['arr1','arr2'];
['arr1','arr2'][0],['arr1','arr2'][1],这样写也是可以的。
jquery并没有对js的这个封装，也没有必要封装。


5.jQuery 的冲突问题
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
　　使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，
如原来引用对象方法$("#msg")改为jQuery("#msg")。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery("div p").hide();


// 使用其他库的 $()
$("content").style.display = 'none';


reference: google baidu