JQuery笔记

JQuery笔记：
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>加载JQuery库
<script type="text/javascript">
 
</script>
学什么：选择器（寻找）、常用方法（实现）、JQuery插件（没有的用插件）
//窗体全部加载完成以后执行（比ready慢） 等号赋值只能注册一次
 window.οnlοad=function(){
  alert("hello");
 }
//窗体加载完成后执行 dom创建完成，并且图片/css/js加载完成触发
$(document)ready(function(){
 alert("hello world!");
});
->简写:$(function(){
 alert("hello");
});
$是jQuery缩写
window.$=window.JQuery=JQuery
 
 简单模拟一个$方法
 (function(){
  var $ =function(id){
   return document.getElementById(id);
  }
  window.$=window.jquery=$;
 })();
 调用上面方法：
 window.onload = function () {
            var div = $("d1");
            div.innerHTML = "aaa";
        }
 
 
 //$.map 对数组进行处理 数组[]中有多少数就多长没有就为0
 var arr = [100, 200, 300, 400];
   arr = $.map(arr, function (item) {
  return item + 2;
 });
 数组的遍历
 for(var i=0,length=elems.length;i<length;i++)
 {
  alert(elems[i]);
 }
 
 //$.each   对字典遍历
 var dic = { "name": "zs", "age": 18, "sex": "男" };
 $.each(dic, function (key, value) {
  alert(key + ":"+value);
 });
 $.each(dic, function () {
  //在each的 第二个参数中 this是字典的值  callback.call()
  alert(this//输出zs 18 男
 })
 
选择器：用于查找满足条件的元素，
id选择器：相当于document.getElementById() 在哪找?document
类选择器
标签选择器
$(function () {
 //当窗体加载完成之后
 $("#d1").text("123");//id选择器
 $(".cls").text("abc");//类选择器
 //隐士迭代
 $("div").text("xyz");//标签选择器
 //JQuery中注册事件规则：$(who)when(what); 
 $("div").click(function () {
  alert("我们都是p民");
 });

 $("#d1,.cls,p").text("aaaa");//复合选择器
})

 层次选择器：
  $(function () {
 //wrap 中的所有p  子p  子子p
  $("#wrap p").css("background-color", "red");
 //直接子元素
 $("#wrap > p").css("background-color", "red");
 //之后的紧邻的第一个div
 $("#wrap + div").css("background-color", "red");
 //之后所有div
 $("#wrap ~ div").css("background-color", "red");
})
 
常用方法：
1.使用html()方法读取或设置元素的innerHTML  $("#btn1").html("hello");
2.使用text()方法读取或设置元素的innertext  $("#btn2").text("hello");
3.使用attr()读取或设置元素的属性，对JQuery没有封装的属性用这个进行操作
 $("#btn").click(function () {
 $("#link").attr("href", "http://www.baidu.com");

 $("#link").css({"color":"red","background-color":"blue"});

 //$("#link").attr("style","color:red");

 //$("#link").attr("class", "cls");
})

$("#btn1").click(function () {
 //获取属性的值
 //alert($("#link").attr("href"));

 //$("#link").attr("href","");并没有移除，而是变成空字符串，会跳转根目录主页面
 //
 $("#link").removeAttr("href");//移除href属性
})
 
  $(function () {
            $("#imgs a").click(function () {
                //this  触发事件的当前的a标签 dom对象
    //$(this)这样就编程JQuery对象 常用的$(document)
                //$(this).attr("href");
                $("#i1").attr("src", this.href);

                //错误 ！！jQuery对象不能访问dom对象的属性
                //$("#i1").src = this.href;
    //JQuery对象访问DOM对象的属性 错误！！
    //JQuery对象=包装集（包装的DOM对象的集合）
    $("#i1")[0]//通过JQuery对象集合索引下标找到DOM对象，这样就可以使用DOM对象的属性方法
                return false;
            })
        })
 
节点遍历：
 $(function () {
//之后紧邻的第一个兄弟节点
//$("#d4").next().css("background-color", "red");

//之后的所有的p标签
//$("#d4").nextAll("p").css("background-color", "red");

//之前紧邻的第一个兄弟节点
//$("#d4").prev().css("background-color", "red");

//之前所有
//$("#d4").prevAll().css("background-color", "red");

//所有的同辈div元素（兄弟节点，不包含自己）
//$("#d4").siblings("div").css("background-color", "red");

//我和我之后的所有元素（方式1）
//            $("#d4").css("background-color", "red");
//            $("#d4").nextAll().css("background-color", "red");

//end 返回上一次包装集被破坏之前的状态 我和我之后的所有元素（方式2）
//$("#d4").nextAll().css("background-color", "red").end().css("background-color", "red");
//andSelf 加入自己 还是：我和我之后的所有元素（方式3）
$("#d4").nextAll().andSelf().css("background-color", "red")

})
 横向菜单：
$(function () {
 $("#menu li").click(function () {
  //链式编程  点击当前的高亮显示，其他的恢复原样
  //this.css()错误！找错对象,this是DOM对象，不能用JQuery对象的方法
  $(this).css("background-color", "red").siblings().css("background-color", "gray")
 })
})
 
 控件评分：
 $(function () {
 $("#rating li").mouseover(function () {
  $(this).prevAll().andSelf().text("★").end().end().nextAll().text("☆");
  //$(this).nextAll().text("☆");
 });
})

光棒：
 $(function () {
            $("#ul li").mouseover(function () {
                $(this).css("background-color", "red")
            }).mouseout(function () {
                $(this).css("background-color", "white");
            })
   
   //运行效率低
   //$$("#ul li").mouseover(function () {
                //$(this).css("background-color", "red").siblings().css("background-color", "white")});
 })
 
 $(function () {//点击事件-类样式-实现行高亮
 $("#tb tr").click(function () {
  $(this).addClass("red").siblings().removeClass("red");
 })
})

简单选择器：
$(function () {
 //第一个input标签
 $("input:first").css("background-color","red");
 //最后一个
 $("input:last").css("background-color", "red");
 //找input标签排除掉类是.myClass和id是t1的（只要类或者id在排除之外都排除）
 $("input:not(.myClass):not(#t1)").css("background-color", "red");

 //even（单词 偶数）(效果 奇数项)  应为按照索引寻找第一个为0是偶数
 $("input:even").css("background-color", "red");
 //odd（单词 奇数）(效果 是偶数项)
 $("input:odd").css("background-color", "red");

 //第三项 索引从0开始
 $("input:eq(2)").css("background-color", "red");
 //前三项 索引：0,1,2
 $("input:lt(3)").css("background-color", "red");

 //后三项$(input).length=8
 //倒数第四项的索引
 var num = $("input").length - 4;
 $("input:gt(" + num + ")").css("background-color", "red");
 //后三项 从索引4开始后面所有
 $("input:eq(" + num + ")").nextAll().css("background-color", "red");
})
 
对table进行操作：
 //隔行变色
 $(str + ":even").css("background-color", "yellow");
 //数据行 鼠标变小手
 var str = "#salary tr:not(:first):not(:last)";
$(str).css("cursor", "pointer");

 //获取所有工资（未完待续）
            var $arr = $("#salary tr:not(:first):not(:last)");//JQuery对象，数据行
            var num = $arr.length;//多少个人
   var sum =0;
            for (var i = 0; i < num; i++) {
                //$arr[i]  dom 对象  tr 要想把DOM对象变成JQuery对象就用$砸他$($arr[i]))

                //在当前的tr中找td 找第三个td获取工资
                var t = $("td", $($arr[i])).eq(2).text();
                sum+=parseFloat(t);//算总工资
            }
   $("#salary tr:last td:eq(1)").text(sum);//写入最后一行最后一个td

相对定位：
$(function () {
 $("#tb tr").click(function () {
  //$("td").text("aaaaaa")这样会在这个表格中所有td
  //在当前点击的tr中找所有td
  $("td", $(this)).text("aaaa");//这个是这一行td
  $("td", $(this)).eq(1).css("background-color","red") ;//这个是此行第二个td
 })
})
 
 使用类样式：
  $(function () {
 $("#btn").click(function () {
  //会把原来的样式覆盖  class = "m"
  //$(".my").attr("class","m");
  //                var c = $(".my").attr("class");
  //                $(".my").attr("class",c+ " m");

  //追加样式
  $(".my").addClass("m");
  //移除样式
  $(".my").removeClass("my");
 })

 //开灯关灯 切换样式
 $("#btn1").click(function () {
  $("body").toggleClass("dark");
 })
})
 焦点文本框：
  $(function () {
 $("input").focus(function () {
  $(this).addClass("red");
 }).blur(function () {
  $(this).removeClass("red");
 })
})
 
 选择器：
  $(function () {
 //具有id属性的控件
 $("input[id]").css("background-color","red");
 //所有文本框赋值admin
 $("input[type=text]").val("admin");
 //找所有文本框但是id不能为t1
 $("input[type=text][id!=t1]").css("background-color","red");
 //找到所有id属性包含btn控件
 $("input[id*=btn]").css("background-color", "red");
 //找到所有被禁用的文本框//：endabled启用的
 $("input[type=text]:disabled").css("background-color", "red");
 
 //获取选中的radio的值 单选 :checked选中的
 $("input[value=checked]").click(function () {
  var v = $("input[name=sex]:checked").val();
  alert(v);
 })
  //获取选中的checkbox的值 多选
 $("input[value=checked1]").click(function () {
  //each()循环
  $("input[type=checkbox]:checked").each(function () {
   //this  是包装集中的每一项  dom对象
   alert($(this).val());
  });
 })
 //表单选择器 找所有文本框
    $(":text").val("admin");
  })
 
//全选
$("#chkAll").click(function () {
 //让子的checkbox和父的checkbox的状态一致
 $(":checkbox[id*=chkChild]").attr("checked", $(this).attr("checked"));
})
//给子的checkbox注册事件
 $(":checkbox[id*=chkChild]").click(singleCheck)
 //反选
$("input[value=反选]").click(function () {
 $(":checkbox[id*=chkChild]").each(function () {
  //找到每一个子的checkbox，状态取反
  $(this).attr("checked", !$(this).attr("checked"));
 })
 //
 singleCheck();
})
function singleCheck() {
 //假设所有子的checkbox都选中了
 var isCheckAll = true;

 $(":checkbox[id*=chkChild]").each(function () {
  //判断每一个checkbox的状态
  //this  包装集中的每一个元素 dom对象 checkbox
  if (!$(this).attr("checked")) {
   isCheckAll = false;
   //在each中 return false 相当于break
   //return true 相当于 continue
   return false;
  }
 })
 //设置全选的状态
 $("#chkAll").attr("checked", isCheckAll);
}

动态创建控件：
 $(function () {
 $("input[value=click]").click(function () {

  //
  var $link = $("<a id='l1' href='http://www.baidu.com'>baidu</a>");

  $link.css("color", "red");
  $link.click(function () {
   alert("我是动态创建的");
   return false;
  })

  //错误！！！！！！！对象还没有添加到窗体中
  //$("#l1").click(function () {
  // alert("adf");
  // return false;
  //})

  //追加到d1中
  //div的结束标签之前  把$link追加到#d1中
  //$("#d1").append($link);
  $link.appendTo($("#d1"));

  //div开始标签之后
  //$("#d1").prepend($link);

  //div的开始标签之前
  //$("#d1").before($link);

  //div的结束标签之后
  //$("#d1").after($link);
 })
})

 动态生成网站列表
  $(function () {
 var json = [{ "name": "baidu", "site": "http://www.baidu.com" },
 { "name": "cnbeta", "site": "http://www.cnbeta.com" },
 { "name": "qb", "site": "http://www.qiushibaike.com" }
 ];

 $(":button[value=click]").click(function () {

  //判断页面上是否已经有table
  if ($("#tb").length > 0) {
   return;
  }

  //动态创建table，设置table的属性
  var $tb = $("<table id='tb'></table>");
  $tb.attr("border", "1px");//设置下表格html属性
  $tb.attr("width", "400px");

  //把table添加到div中 一定要添加！！！！
  $("#d1").append($tb);

  //遍历json对象
  $.each(json, function () {
   //this  数组中的每一个json对象
   //生成行
   var $tr = $("<tr></tr>");
   $tb.append($tr);
   //生成第一个td
   var $td = $("<td><a href='" + this.site + "'>" + this.name + "</a></td>");

   //给a标签注册事件
   //                var $link = $("a", $td);
   //                $link.click(function () {
   //                    alert("123");
   //                    return false;
   //                })

   $td.children("a:first").click(function () {
    alert("111");
    return false;
   })

   $tr.append($td);

   //第二个td
   $td = $("<td>" + this.site + "</td>");
   $tr.append($td);
  })

 })

})
 删除节点：
 $(function () {
 $(":button[value=delete]").click(function () {

 //var $li = $("#mv li:last").remove();//remove直接把对象<li>删除掉了
 //$("#mv").prepend($li);//再添加

  $("#mv li:last").empty();//只情况最后一个li中的内容
 })
})
 权限选择：
 $(function () {
 $(":button[value=>]").click(function () {
  //var $options = $("#all option:selected").remove().removeAttr("selected");
  //$("#sel").append($options);
  //$("#all option:selected").remove().removeAttr("selected").appendTo($("#sel"));
  //所有选中的option移动到另一个选择对象中1.7js版本有内部循环 1.4版本没有
  $("#all option:selected").removeAttr("selected").appendTo($("#sel"));
 })
})
10s倒计时
 $(function () {
 setCount();
})

var count = 10;
var tmrId =  setInterval("setCount()", 1000);
function setCount() {
 if (count > 0) {
  $("#btn").val("请仔细阅读协议（" + count + "）秒");
  count--;
 } else {
  $("#btn").val("同意").attr("disabled", false);
  clearInterval(tmrId);
 }
}
搜索文本框
$(function () {
 $("#txtSearch").focus(function () {
  if ($(this).val() == "请输入搜索关键字") {

   $(this).val("").attr("class","black");
  }
 }).blur(function () {
  if ($(this).val().length == 0 || $(this).val() == "请输入搜索关键字") {
   $(this).val("请输入搜索关键字").attr("class","gray");
  }
 })
})
无刷新评论（动态生成列表）
$(function () {
 $("#btn").click(function () {
  var name = $("#txtName").val();
  var content = $("#txtContent").val();

  var $tb = $("#tb");
  //判断页面上是否有table对象，如果没有动态创建，如果有了从页面上获取
  if ($tb.length == 0) {
   //动态创建table
   $tb = $("<table id='tb'></table>");
   $tb.attr("border", "1px");
   $tb.attr("width", "400px");
   //
   $("#reply").append($tb);
  }

  //创建行
  var $tr = $("<tr></tr>");
  $tb.prepend($tr);

  //td  创建第一个td
  var $td = $("<td>" + name + "</td>");
  $tr.append($td);

  //第二个td
  $td = $("<td>" + content + "</td>");
  $tr.append($td);
 })
})

$(function () {
 $("#ul1 li").mouseover(function () {
  //光棒效果
  $(this).css("background-color", "red");
 }).mouseout(function () {
  $(this).css("background-color", "white");
 }).click(function () {
  //remove()会移除对象的事件  不会移除样式
  //append() 把对象移动过去
  $(this).css("background-color", "white").remove().appendTo($("#ul2"));
 })
})
 事件:
 $(function () {
 $(":button[value=bind]").click(function () {

  //                $("#test").bind({ "click": function () {
  //                    alert("click");
  //                }, "mouseover": function () {
  //                    alert("mouseover");
  //                }, "mouseout": function () {
  //                    alert("mouseout");
  //                }
  //                })
  var json = { "name": "zs", "age": 18 };
  $("#test").bind("click", json, function (e) {
   //获取事件传递过来的参数e.data
   alert(e.data.name);

  })
 })

 $(":button[value=unbind]").click(function () {
  //移除事件
  //$("#test").unbind("mouseout");

  //移除所有事件
  $("#test").unbind();
 })

 $(":button[value=one]").click(function () {
  //一次性事件
  $("#test").one("click", function () {
   alert("one");
  });
 })

 $(":button[value=hover]").click(function () {
  //合成事件
  $("#test").hover(function () {
   alert("1");
  }, function () {
   alert("2");
  });
 })

 $(":button[value=toggle]").click(function () {
  //合成事件
  $("#test").toggle(function () {
   alert("1");
  }, function () {
   alert("2");
  }, function () {
   alert("3");
  }, function () {
   alert("4");
  });
 })

 $("table,tr,td").click(function (e) {
                //事件冒泡中this和e.target不同
                //this 监听事件的对象
                //e.target 触发事件的对象   dom对象
                alert($(this).html());
                alert(e.target.innerHTML);
    
    //alert($(this).html());
                //阻止事件冒泡
                //e.stopPropagation();
                //alert(e.target.innerHTML);
    
     //阻止后续内容的执行
                e.preventDefault();

                alert("google");
    
    $("#btn").mousedown(function (e) {
                alert(e.which);//鼠标按键1左键2中键3右键
            })
})
 鼠标在窗体上移动时获取鼠标位置
 $(document).mousemove(function (e) {
 //$("#d1").text(e.pageX + "==" + e.pageY);//鼠标在文档上的位置
 //让一个图片跟着鼠标移动（脱离文档流）
 $("#i1").css({"position":"absolute","left":e.pageX,"top":e.pageY})
});
右下角小广告
 $(function () {
 $("#i1").animate({ "bottom": 0 }, 2000).animate({"opacity":0},5000);
})
 滑动图片
 $(function () {
 $("img").hover(function () {
  $(this).animate({"width":270,"height":180},"slow");
 }, function () {
  $(this).animate({ "width": 150, "height": 100 }, "slow");
 })
})
 利用jqzoom插件（查文档）
<link href="css/jqzoom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>//先
<script src="Scripts/jquery.jqzoom.js" type="text/javascript"></script>//后
<script type="text/javascript">
 $(function () {
  $(".jqzoom").jqueryzoom({xzoom:300,yzoom:300,offset:100});
 })
</script>
 

 JQuery validation插件 
 JQuery cookie插件

插件应用：注意控件摆放位置，css样式，script以及找控件方法