jquery技巧总结学习简单

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

<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>

<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>

jquery技巧总结 学习 简单

jquery技巧总结学习简单