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("未删除事件");
});
});


自动触发事件（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--%>

<%--k2--%>
要被添加的链接1
要被添加的链接2

iPhone

Lumia900