jquery技巧总结 学习

<h2>语法总结和注意事项</h2>
 <!--
 1、关于页面元素的引用
    通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。
<span id="msg">SPAN仙鹤信息</span>-->

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

<div id="msg">IDMSG内容</div>

<p>

<table id="table2">
<tr><td>AAA</td></tr>
<tr><td>BBB</td></tr>
<tr><td>CCC</td></tr>
</table>

<div id="mytoggle">MYtoggle and toggle</div>

 <p>
 <div id="p">MyP MyP MyP MyP MyP MyP</div>
<script>
$(function(){
   //val = $("#msg").html();             //第一种方法
   //val = $("#msg")[0].innerHTML;       //第二种方法
   //val = $("#msg").eq(0)[0].innerHTML; //第三种
   //val = $("#msg").get(0).innerHTML;   //第四种方法 
   //alert(val);
   //val = $("#table1").eq(0)[0].innerHTML;
   //alert(val);
   //实丙表格的隔行换色效果
   $("#table1 tr").each(function(i){this.style.backgroundColor=['#ccc', '#ffc'][i%2]})
   //$("p").click(function(){alert($(this).html())})             
   //为每个p元素增加了click事件，单击某个p元素则弹出其内容
   //为每个P元素增加了click事件,单击某个P元素则弹出其内容
   $("#p1").click(function(){alert($(this).html())});
  
    
 //扩展我们需要的功能
 $.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));
  
 
 //支持方法的连写
 //所谓连写,即可以对一个jquery对象连续调用各种不同的方法
 $("p").click(function(){alert($(this).html())})
 //.mouseover(function(){alert('mouse over event')})
 .each(function(i){this.style.color=['#f00', '#0f0', '#00f']}); 
 
 //操作元素的样式 主要包括以下几种方式
 //$("#msg").css("background");
 $("#msg").css("background", "#ccc"); //返回元素的背景颜色
 $("#msg").height(300); $("#msg").width("200"); //设置宽高
 $("#msg").css({color:"red", background: "blue"}); //以名值对的形式设定样式
 $("#msg").addClass("select"); //为元素增加名为select的clsss
 $("#msg").removeClass("select"); //删除元素名为select的class
 $("#msg").toggleClass("select");  //如果存在就删除名称为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>