jQuery学习笔记之控制页面实现代码

each()遍历元素（k1）

 
$(document).ready(function () { 
$("#btn").html("each()遍历元素").click(function (event) { 
$("div").each(function (index) { 
$(this).html("这是第" + index + "个div"); 
}); 
event.preventDefault(); 
}); 
}); 

获取属性的值（k1）attr(name)

 
$(document).ready(function () { 
$("#btn").html("获取属性值").click(function (event) { 
$("div").each(function () { 
alert("title属性的值是:"+$(this).attr("title")); 
}); 
event.preventDefault(); 
}); 
}); 

设置属性的值（k1）attr(name,value)，attr(name,fn)
eg1

 
$(document).ready(function () { 
$("div").each(function () { 
$(this).html(this.title); 
}); 
$("#btn").html("设置属性值").click(function (event) { 
$("div").each(function () { 
$(this).attr("style", "color:Red"); 
}); 
event.preventDefault(); 
}); 
}); 

eg2

 
$(document).ready(function () { 
$("div").each(function () { 
$(this).html(this.title); 
}); 
$("#btn").html("设置属性值").click(function (event) { 
$("div").each(function (index) { 
$(this).attr("id", function () { 
return "div-id" + index; 
}).html($(this).attr("id")); 
}); 
event.preventDefault(); 
}); 
}); 

删除属性（k1）removeAttr(name)

设置元素样式

 
addClass(names)，removeClass(names)，toggleClass(names) 
$(document).ready(function () { 
$("div").each(function () { 
$(this).html(this.title).addClass("myClass1").mouseover(function () { 
$(this).toggleClass("myClass2"); 
}); 
}); 
}); 

直接获取，设置样式（k1） css(name)，css(name,value)

 
$(document).ready(function () { 
$("div").each(function () { 
$(this).html(this.title).css({ color: "Red", opacity: "0.5" }).mouseover(function () { 
$(this).css("opacity", "1.0"); 
}).mouseout(function () { 
$(this).css("opacity", "0.5"); 
}); 
}); 
}); 

判断css类型 hasClass(name) is(name)


处理页面的元素
text()获取纯文本内容 html()获取包括innerHTML属性

移动和复制元素（k2）append()，appendTo(target) 有复制和移动两种形式，单个目标移动，多个目标复制

 
$(document).ready(function () { 
$("p").append($("a:eq(0)")); 
$("p:eq(1)").append($("a:eq(1)")); 
}); 

添加节点：before()，insertBefore()，after()，insertAfter()
是将元素直接添加到节点之前或之后，不是以子元素插入 有复制和移动两种形式，单个目标移动，多个目标复制

删除元素（k2）
eg1：remove()

 
$(function () { 
$("p").remove(":contains(P)");// 等同于$("p:contains("P")").remove(); 
}); 

eg2：empty() 注意：empty()与remove()有区别 其中empty()删除其所有子元素

 
$(function () { 
$("p").css({border:"1px solid #FF0000",height:"20px"}).empty(); 
}); 

克隆元素，解决复制和移动的问题（k3）

 
$(function () { 
$("#btn-k3").html("clone()克隆自己并克隆事件").click(function () { 
//克隆自己并克隆单击事件(设为true) 
$(this).clone(true).insertAfter(this); 
}); 
}); 

处理表单元素的值（k4）val()

 
$(function () { 
$("input[type=button]").click(function () { 
var sValue = $(this).val(); 
$("input[type=text]").val(sValue); 
}); 
}); 

处理页面事件
绑定事件监听（k5）bind(eventType,[data],Listener)，eventTypeName(fn)，one(eventType,Listener)

 
$(function () { 
for (var i = 0; i < 10; i++) { 
$("div:last").clone(true).insertAfter($("div:last")); 
}; 
$("div").one("click", function () { 
$(this).addClass("myClass1").html("只能点一次"); 
}); 
}); 

删除事件（k5）unbind()，unbind("click")，unbind("click",myFunc)

 
$(function () { 
$("div").clone().html("unbind()删除事件").click(function () { 
$("div").unbind(); 
}).insertAfter($("div")); 
$("div:first").click(function () { 
alert("未删除事件"); 
}); 
}); 

/*jQuery事件对象的属性和方法
altKey 按下Alt键则为true,反之为false
ctrlKey 按下Ctrl则为true,反之为false
keyCode 对于keyup和keydown事件，返回按键的值("A"和"a"得值一样，为65)
page.X,page.Y 鼠标指针在客户端的坐标，不包括工具栏和滚动条等
relatedTarget 鼠标事件中鼠标指针所进入或离开的元素
screenX,screenY 鼠标指针相对于整个计算机屏幕的坐标值
shiftKey 按下shift键则为true,反之为false
target 引起事件的元素/对象
type 事件的名称
which 键盘事件中为按键的Unicode值，鼠标事件中代表按键的值（1为左键，2为中键，3为右键）
stopPropagation() 阻止事件向上冒泡
preventDefault() 阻止事件的默认行为
*/
自动触发事件（k5）trigger(eventType)

 
$(function () { 
$("div").click(function () { 
alert("单击事件"); 
}); 
$(".myClass3").trigger("click"); 
}); 

实现单击事件的动态交替（k6）toggle(fn,fn)

 
$(function () { 
$("img").attr("title","toggle()实现单击事件的动态交替").toggle(function (event) { 
$(event.target).attr("src", "Img/Img2.jpg"); 
}, 
function (event) { 
$(event.target).attr("src", "Img/Img1.jpg"); 
}); 
}); 

实现感应鼠标（k6）

 
$(function () { 
$("img").hover(function (event) { 
$(event.target).css("opacity", "1.0"); 
}, 
function (event) { 
$(event.target).css("opacity", "0.5"); 
} 
); 
}); 

html代码

 
<%--k1--%> 
<form id="form1" runat="server"> 
<div id="1" title="iPhone"></div> 
<div id="2" title="Lumia900"></div> 
<div id="3" title="HTC"></div> 
<button id="btn"></button> 
</form> 
<%--k2--%> 
<a href="#">要被添加的链接1</a> 
<a href="#">要被添加的链接2</a> 
<p>iPhone</p> 
<p>Lumia900</p> 
<%--k3--%> 
<button id="btn-k3"></button> 
<%--k4--%> 
<input type="button" value="iPhone5" /> 
<input type="button" value="Lumia900" /> 
<input type="button" value="HTC" /> 
<input type="text" /> 
<%--k5--%> 
<div class="myClass3">点击我</div> 
<%--k6--%> 
<img alt="美图" src="Img/Img1.jpg"/> 

css代码

 
.myClass1{ color:Blue; background:#e58302;} 
.myClass2{ color:Red;} 
.myClass3{ border:1px solid #FF0000; height:50px; width:80px; float:left;}