亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery學(xué)習(xí)筆記之控制頁面實現(xiàn)代碼

 更新時間：2012年02月27日 17:20:05   作者：  
每一段jQuery對應(yīng)一段html代碼，以標(biāo)記為準(zhǔn)則,css為共用代碼，每段代碼需獨立運行。html和css代碼在文章尾部，如下例


each()遍歷元素（k1）

復(fù)制代碼 代碼如下:

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

獲取屬性的值（k1）attr(name)
復(fù)制代碼 代碼如下:

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

設(shè)置屬性的值（k1）attr(name,value)，attr(name,fn)
eg1
復(fù)制代碼 代碼如下:

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

eg2
復(fù)制代碼 代碼如下:

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

刪除屬性（k1）removeAttr(name)

設(shè)置元素樣式
復(fù)制代碼 代碼如下:

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

直接獲取，設(shè)置樣式（k1） css(name)，css(name,value)
復(fù)制代碼 代碼如下:

$(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()獲取純文本內(nèi)容 html()獲取包括innerHTML屬性

移動和復(fù)制元素（k2）append()，appendTo(target) 有復(fù)制和移動兩種形式，單個目標(biāo)移動，多個目標(biāo)復(fù)制
復(fù)制代碼 代碼如下:

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

添加節(jié)點：before()，insertBefore()，after()，insertAfter()
是將元素直接添加到節(jié)點之前或之后，不是以子元素插入 有復(fù)制和移動兩種形式，單個目標(biāo)移動，多個目標(biāo)復(fù)制

刪除元素（k2）
eg1：remove()
復(fù)制代碼 代碼如下:

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

eg2：empty() 注意：empty()與remove()有區(qū)別 其中empty()刪除其所有子元素
復(fù)制代碼 代碼如下:

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

克隆元素，解決復(fù)制和移動的問題（k3）
復(fù)制代碼 代碼如下:

$(function () {
$("#btn-k3").html("clone()克隆自己并克隆事件").click(function () {
//克隆自己并克隆單擊事件(設(shè)為true)
$(this).clone(true).insertAfter(this);
});
});

處理表單元素的值（k4）val()
復(fù)制代碼 代碼如下:

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

處理頁面事件
綁定事件監(jiān)聽（k5）bind(eventType,[data],Listener)，eventTypeName(fn)，one(eventType,Listener)
復(fù)制代碼 代碼如下:

$(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)
復(fù)制代碼 代碼如下:

$(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 鼠標(biāo)指針在客戶端的坐標(biāo)，不包括工具欄和滾動條等
relatedTarget 鼠標(biāo)事件中鼠標(biāo)指針?biāo)M(jìn)入或離開的元素
screenX,screenY 鼠標(biāo)指針相對于整個計算機(jī)屏幕的坐標(biāo)值
shiftKey 按下shift鍵則為true,反之為false
target 引起事件的元素/對象
type 事件的名稱
which 鍵盤事件中為按鍵的Unicode值，鼠標(biāo)事件中代表按鍵的值（1為左鍵，2為中鍵，3為右鍵）
stopPropagation() 阻止事件向上冒泡
preventDefault() 阻止事件的默認(rèn)行為
*/
自動觸發(fā)事件（k5）trigger(eventType)
復(fù)制代碼 代碼如下:

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

實現(xiàn)單擊事件的動態(tài)交替（k6）toggle(fn,fn)
復(fù)制代碼 代碼如下:

$(function () {
$("img").attr("title","toggle()實現(xiàn)單擊事件的動態(tài)交替").toggle(function (event) {
$(event.target).attr("src", "Img/Img2.jpg");
},
function (event) {
$(event.target).attr("src", "Img/Img1.jpg");
});
});

實現(xiàn)感應(yīng)鼠標(biāo)（k6）
復(fù)制代碼 代碼如下:

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

html代碼
復(fù)制代碼 代碼如下:

<%--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代碼
復(fù)制代碼 代碼如下:

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

相關(guān)文章

最新評論