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


Posted in Javascript onFebruary 27, 2012

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;}
Javascript 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
详解JS ES6编码规范
May 07 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 #Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 #Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 #Javascript
js前台判断开始时间是否小于结束时间
Feb 23 #Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 #Javascript
JavaScript插入动态样式实现代码
Feb 22 #Javascript
javascript插入样式实现代码
Feb 22 #Javascript
You might like
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
NumPy 数组使用大全
2019/04/25 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
python实现微信自动回复机器人功能
2019/07/11 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
Python遍历字典方式就实例详解
2019/12/28 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
工商技校毕业生自荐信
2013/11/15 职场文书