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;}

　　推荐阅读

　　同一页面多个商品倒计时JS 基于面向对象的javascript

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>>>详细阅读

本文标题：jQuery学习笔记之控制页面实现代码

地址：http://www.17bianji.com/kaifa2/JS/23642.html

 1/2    1