jquery技巧总结学习

<h2>语法总结和注意事项</h2>

<table >
<tr><td>AAA</td></tr>
<tr><td>BBB</td></tr>
<tr><td>CCC</td></tr>
</table>
<p id='p1'>单击某个P元素则弹出其内容</p>

<div >IDMSG内容</div>

<p>

<div >MYtoggle and toggle</div>

<p>
<div ); //如果存在就删除名称为select的class, 如果不存在就添加名称为select的class

//完善的事件处理功能
//jquery 已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件, 而可以直接通过jquery获取的对象添加事件.
$("#msg").click(function(){alert("good msg")});
$("p").click(function(i){this.style.color=['#f00', '#f0f', '#00f']});
//为三个不同的P元素单击事件分别设置定不同的处理
//jquery中几个自定义的事件
//hover(fn1, fn2): 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个配的元素上面时，会触发指定的第一个函数，当鼠标移出这个元素时，会触发指定的第二个函数
//当鼠标放在表格的某行上时将class置为over, 离开时置为out.
$("#table2 tr").hover(function(){
$(this).addClass('over');
},
function(){
      $(this).addClass('out');
});

//ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
$(document).ready(function(){alert("Load Suceess")});
//页面加载完毕提示"Load Sucess",相当于onload事件,与$(fu)等价

//toggle(evenFn, oddFn): 每次点击时切换要调用的函数，如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一个元素时，则触发指定的第二个函数，随后的每次点击都重复对这两个函灵敏的轮番调用
//每次点击时轮换添加和删除名为seelcted的class
$("#mytoggle").toggle(function(){
       $(this).addClass("over");
},
function(){
        $(this).removeClass("over");
})

//trigger(eventtype): 在每一个匹配的元不上触发某类事件
$("p").trigger("click"); //解发所有P元素的click事件

//bind(eventtype, fn), unbind(eventtype): 事件的绑定与反绑定
//从每一个匹配的元不中（添加）删除绑定的事件
$("#p").bind("click", function(){alert($(this).text())}); //为p元素添加单击事件
$("#p").unbind();        //删除p元素上的所有事件
$("#p").unbind("click"); //删除p元素上的click事件

//几个实用特效功能
//其中toggle()和slidetoggle()方法提供了状态切换功能
//如toggle（）方法包括了hide()和show()方法
//slideToggle()方法包括了slideDown()和slideUp方法

//几个有用的确jquery方法
//$.browser.浏览器类型: 检测浏览器类型. 有效参数: safari, opera, msie, mozilla.
//如检测是否ie: $.browser.isie, 是ie浏览器则返回true;
//val = $.browser;
//alert($.browser);
//val = $.browser.isie;
//alert(val);
//$.each(obj, fn): 通用的迭代函数, 可用于近似地迭代对象和数组(代替循环)
$.each( [0,1,2], function(i, n){ alert("Item #" + i +" : " +n); });
//等价于
var tempArr = [0, 1, 2];
for(var i=0; i<tempArr.length; i++){
     alert("Ltem # " + i + " : " + tempArr);
}
//也可以处理json数据,如
$.each({name:"JOhn", lang: "JS"}, function(i, n){alert("Name: " + i + ", Value: " + n); });

//$.extend(target, prop1, propN): 用一个或多个其它对象来扩展一个对象, 返回这个被扩展的对象.这是jquery实现的继聚承方式
//$.extend(settings, options);
//合并setings和options。并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中
//var settings = $.extend({}, defaults, options);
//合并defaults和optons, 并将合并结果返回到setting中而不覆盖default内容.
//可以有多个参数(合并多项并返回)
//$.map(array, fn): 数组映射，把一个数组中的的项目(处理转换后)保存到另一个数组中，并返加生成的新数组
var tmpArr = $.map([0,1,2], function(i){ return i + 4; });
//tmpArr内容为: [4,5,6]
var tmpArr = $.map([0,1,2], function(i){ return i > 0 ? i+1 : null;});
//tmpArr内容为: [2,3]
//$.merge(arr1, arr2): 合并两个数组并删除其中重复的项目
//如： $.merge([0,1,2], [2,3,4]) //返回[0,1,2,3,4]
//$.trim(str): 删除字符串两端的空白字符
//如: $.trim(" hello, how ary you? "); //返回"hello,how ary you?"

//解决自宝义方法或其它类库与jquery的冲突
//很多时候我们可以自已定义了$(id)方法来获取一个元素，或者其它的一些JS类库如prototype也都定义了$方法, 如果同时把这些内容放在一起就会引起变量方法定义冲突，jquery对此专门提供了方法用于解决此问题
//使用jquery中的jquery.noConflict();方法即可把充量的$的控制权让渡经第一个实现它的那个库或之前自宝义的$方法，之后应用jquery的时候只要将所有的$
//jQuery.noConflict();
//开始使用jQuery
//jQuery("div p").hide();
//使用其他库的$();
//$("content").style.display = 'none';


})
</script>