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 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
javascript Excel操作知识点
Apr 24 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 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
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
在Django中限制已登录用户的访问的方法
2015/07/23 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
关于Python解包知识点总结
2020/05/05 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
python 基于opencv操作摄像头
2020/12/24 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
css3实现动画的三种方式
2020/08/24 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
教育学专业实习生的自我鉴定
2013/11/26 职场文书
写求职信有什么意义
2014/02/17 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书