Net学习日记_jQuery
复习：
1.onload 当界面所有的资源加载完毕后 浏览器自动执行
2.(1)dom属性之一：字符串类型属性
gel("divMsg").name
(2)dom属性之二：函数类型属性 - 只能设置 方法给它，如果没有设置，则默认为null
gel("divMsg").onclick = function () { var a = 0; };
(3)dom属性之三：样式属性，通过样式属性 可以 访问和设置 元素的各种 样式项
alert(gel("divMsg").style);
JQuery
1.函数的自执行，用小括号抱起来
(function selfRun() {
alert("自执行～～"+name);
})("james");
自执行函数不能再小括号外部调用。
2.Jquery就是通过以下这种机制，为Window里面添加$的方法。
(function selfRun() {
window.$$ = function (id)
{
alert(id);
}
})();
$$(123);
3.方法的三种写法：
1.1声明式的写法
function JJ(id) {
alert(id);
}
1.2声明 匿名方法变量
var J2 = function (a, b) { alert(a + "" + b); };
1.3实例化 方法对象
var J3 = new Function("a", "b", "alert(a+' '+b);");
JQuery对象与Dom对象
map作用
1.遍历 数组
map(eles=被循环的数组，callback=每次循环一个数组元素要调用的代码)；
$.map(arr,function(ele,index){alert(index+“:”+ele)});
index:下标
ele：元素
2.遍历数组，返回新数组
var newArr = $.map(arr,function(ele,index){return ele*2;});
3.遍历对象的属性
var obj={id:1,name:"james"};
$.map(obj,function(value,key)
{
alert(key+":"+value);
})
each方法
$.each(obj,function(key,value)
{
alert(key+":"+value+":"+this);
})
其中，调用callback（key,value）;
调用callback方法，传递两个参数的同时，还未callback里的this赋值。
applay和call方法的第一个参数，就是为callback方法里的this赋值
通俗：就是通过apply或call方法，调用callback方法，同时为this赋值。
凡是Function的实例，都有call、apply等函数对象特有的成员
方法2.遍历 数组
var arr =[17,20,3,64];
$.each(arr,function(index,value)
{
alert(index+":"+value+",this="+this);
})
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> p { display:inline; border:1px solid #0094ff; padding:2px 10px; background-color:#fff; margin:5px; } </style> <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> <script type="text/javascript"> $(function () { $("p").click(function () { //end()方法：回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。 $(this).css("backgroundColor", "red").prevAll().css("backgroundColor", "red").end().nextAll().css("backgroundColor", "#fff"); //所谓 破坏性 的操作，是指 在调用一系列Jquery方法的过程中，某个方法返回的Jquery对象内部的dom数组和前面方法返回的Jq对象里的dom数组不一样 的时候，那么这个方法，就 叫做 “破坏性” 方法。 //如 $(this)返回的Jq中包含被点击的dom，css()返回的Jq中也包含被点击的dom；但prevAll返回的Jq中包含的是 被点击p标签的 前面所有的元素。 //$(this).css().prevAll() }); }) </script> </head> <body> <p></p> <p></p> <p></p> <p></p> <p></p> </body> </html>
dom0级事件和2级事件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="JS/jquery-1.9.0.min.js"></script> <style type="text/css"> div{ border:1px solid #0094ff; width:50%; padding:50px; } </style> <script type="text/javascript"> $(function () { //alert(document.documentElement); //1.dom0级事件特点： //1.1 相同dom元素的相同事件属性 只能 注册一个方法，如果注册多个，则会被后面的覆盖 // 本质原因：onclick等0级事件 本质就是 dom对象上的一个 属性(方法类型) 而已，如果多次赋值，后面的值会覆盖前面的值 document.getElementById("btn0").onclick = function () { alert("我是0级事件方法 000"); }; document.getElementById("btn0").onclick = function () { alert("我是0级事件方法 111"); }; //1.2使用的是事件冒泡：由 内 往 外 document.getElementById("divFather").onclick = function () { alert("divFather"); }; document.getElementById("divSon").onclick = function () { alert("divSon"); }; //2.dom2级事件特点： //2.1 注册的方式 不一样 //2.2 注册 事件方法时 可以选择 捕获阶段事件(true)，也可以选择 冒泡阶段事件(false) document.getElementById("btn2").addEventListener("click", function () { alert("btn02"); }, false); //*****果是老式IE(IE9之前)则使用 attachEvent 方法，注意：事件名必须加 on*********** //document.getElementById("btn2").attachEvent("onclick", function () { alert("btn02"); }); //document.getElementById("btn2").detachEvent("onclick",..... //1.2使用的是事件冒泡：由 内 往 外 document.getElementById("div1").addEventListener("click", function () { alert("div1"); }, false); document.getElementById("div2").addEventListener("click", function () { alert("div2"); }, false); //1.3相同元素的 相同事件 可以注册 多个方法，而且可以动态移除指定的方法 document.getElementById("btn2").addEventListener("click", test2, false); //1.4移除方法 document.getElementById("btn2").removeEventListener("click", test2); }) function test2() { alert("btn02 又来了"); } </script> </head> <body> 0级事件 会将 方法 直接 设置给 dom对象对应的事件属性（如：onclick） <div id="divFather"> <div id="divSon"> <input type="button" id="btn0" value="dom0级事件" /> </div> </div> <br /> 2级事件 不会将方法 设置个dom对象的事件属性，而是使用了另外一套机制 来保存 事件方法。 <div id="div1"> <div id="div2"> <input type="button" id="btn2" value="dom2级事件" /> </div> </div> </body> </html>
要么用冒泡阶段，要么用捕获阶段。
一般都用dom2级方法。
链式编程最重要一点：返回自身。 return this.
1.使用非破坏性操作的时候，方法返回的jq对象，相同
2.使用破坏性操作的时候，犯法返回一个新的jq对象。
3.一些非链式编程操作
返回的是字符串，无法在调用jq方法，所以不能jq链式编程。
如果是设置操作，一般都会返回之前的jq对象，所以可以jq链式编程。
jQ浅克隆与Jq深克隆
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> div{ border:1px solid #000; padding:50px; margin:10px 10px; width:200px; } </style> <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> <script type="text/javascript"> $(function () { $("#msgDiv").click(function () { alert("我是div"); }); document.getElementById("msgDiv").onclick = function () { alert("0级dom事件"); } document.getElementById("msgDiv").addEventListener("click", function () { alert("2级dom事件"); }); //00.不管深克隆还是浅克隆，都会复制元素和其子元素 //01.浅克隆 不会复制事件 //注意：0级/2级dom事件 和 jq事件 都不会被复制 $("#clone01").click(function () { var $newDiv = $("#msgDiv").clone(); $newDiv.insertAfter($("#msgDiv")); }); //02.深克隆 会复制事件 //注意：jq事件 会复制，0级/2级dom事件 不会复制 $("#clone02").click(function () { var $newDiv = $("#msgDiv").clone(true); $newDiv.insertAfter($("#msgDiv")); }); }) </script> </head> <body> <input type="button" value="JQ浅克隆" id="clone01" /> <input type="button" value="JQ深克隆" id="clone02" /> <div id="msgDiv"> <span>用户名：</span><input type="text" /> </div> </body> </html>
mouseenter 不会触发事件冒泡
mouseoover 会触发事件冒泡
1.事件参数对象里面常用属性
target:事件源（事件的触发元素）
currentTarget:就是this
type：事件名
2.在老式IE中，不会将时间参数对象作为参数传递进来，而是使用window.event
动态Tab框
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> * { font-family:微软雅黑; } #leftMenu { border:1px solid #000; width:260px; } #leftMenu .menu { padding:0px; margin:0px; border:1px solid red; } #leftMenu .menu .tit { background-color:#0094ff; color:#fff; padding:5px 20px; } #leftMenu .menu .content { } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(".content").hide(); $(".tit").click(function () { $(this).next().slideDown() .parent().siblings().children(".content").slideUp(); }).first().next().show(); }); </script> </head> <body> <div id="leftMenu"> <ul class="menu"> <li class="tit">系统管理</li> <li class="content"> <ul> <li content="哇哈哈哈哈~~~~~~~~！我来了1！">广州小蛮腰1~~</li> <li content="哇哈哈哈哈~~~~~~~~！我来了2！">广州小蛮腰2~~</li> <li content="哇哈哈哈哈~~~~~~~~！我来了3！">广州小蛮腰3~~</li> <li content="哇哈哈哈哈~~~~~~~~！我来了4！">广州小蛮腰4~~</li> </ul> </li> </ul> <ul class="menu"> <li class="tit">用户管理</li> <li class="content"> <ul> <li content="哇哈哈哈哈~~~~~~~~！我来了1！">广州小蛮腰1~~</li> <li content="哇哈哈哈哈~~~~~~~~！我来了2！">广州小蛮腰2~~</li> <li content="哇哈哈哈哈~~~~~~~~！我来了3！">广州小蛮腰3~~</li> <li content="哇哈哈哈哈~~~~~~~~！我来了4！">广州小蛮腰4~~</li> </ul> </li> </ul> <ul class="menu"> <li class="tit">权限管理</li> <li class="content"> <ul> <li content="哇哈哈哈哈~~~~~~~~！我来了1！">广州小蛮腰1~~</li> <li content="哇哈哈哈哈~~~~~~~~！我来了2！">广州小蛮腰2~~</li> <li content="哇哈哈哈哈~~~~~~~~！我来了3！">广州小蛮腰3~~</li> <li content="哇哈哈哈哈~~~~~~~~！我来了4！">广州小蛮腰4~~</li> </ul> </li> </ul> </div> </body> </html>
cookie是浏览器的技术。将少量的文本保存在电脑上。
