最简单的jQuery程序入门者学习
2023-06-13 09:14:11 时间
<HTML>
<HEAD>
<STYLEtype="text/css">
.css1{
display:block;
width:100px;
height:100px;
background-color:blue;
}
.css2{
display:block;
width:100px;
height:100px;
background-color:red;
}
</STYLE>
</HEAD>
<BODY>
<ahref="#"class="css1"id=freee>tt</a>
<scriptsrc="jquery-1.3.2.js">
</script>
<script>
$(document).ready(function(){
$("#freee").hover(function(){
$(this).addClass("css2");
},function(){
$(this).removeClass("css2");
});
});
</script>
</BODY>
</HTML>
Findme:使用选择器和事件
jQuery提供两种方式来选择html的elements,第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div>ula"));第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。
为了测试一下这些选择器,我们来试着在我们starterkit.html中选择并修改第一个orderedlist.
一开始,我们需要选择这个list本身,这个list有一个ID叫“orderedlist”,通常的javascript写法是document.getElementById("orderedlist").在jQuery中,我们这样做:
$(document).ready(function(){
$("#orderedlist").addClass("red");
});这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注:参考测试包中的css目录下的core.css,其中定义了red样式)。因此,在你刷新了starterkit.html后,你将会看到第一个有序列表(orderedlist)背景色变成了红色,而第二个有序列表没有变化.
现在,让我们添加一些新的样式到list的子节点.
$(document).ready(function(){
$("#orderedlist>li").addClass("blue");
});这样,所有orderedlist中的li都附加了样式"blue"。
现在我们再做个复杂一点的,当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效。
$(document).ready(function(){
$("#orderedlistli:last").hover(function(){
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});还有大量的类似的CSS和XPath例子,更多的例子和列表可以在这里找到。(译者Keel注:入门看此文,修行在个人,要想在入门之后懂更多,所以这段话的几个链接迟早是要必看的!不会又要翻译吧...^_^!)
每一个onXXX事件都有效,如onclick,onchange,onsubmit等,都有jQuery等价表示方法(译者Keel注:jQuery不喜欢onXXX,所以都改成了XXX,去掉了on)。
相关文章
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- jQuery图片切换插件jquery.cycle.js详解编程语言
- jquery之Document元素选择器篇
- Jquery实战_读书笔记1—选择jQuery
- jQuery学习2选择器的使用说明
- jQuery方法大全方便学习参考
- jquery关键字“拖曳搜索”之“拖曳”以及图片“提示自适应放大”效果的实现
- jquery学习之二属性(html()与html(val))
- jquery学习之二属性文本与值(text,val)
- 很棒的学习jQuery的12个网站推荐
- 基于jQuery替换table中的内容并显示进度条的代码
- jquery学习笔记用jquery实现无刷新登录
- jquery中ajax学习笔记4
- jquery中dom操作和事件的实例学习-表单验证
- TimergliderJS一个基于jQuery的时间轴插件
- jquery插件学习(一)
- jQuery学习笔记更改jQuery对象
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- jquery属性过滤选择器使用示例
- jquery实现metro效果示例代码
- jquery实现简单易懂的图片展示小例子
- Jquery中children与find之间的区别详细解析
- 使用jquery写个更改表格行顺序的小功能
- 点击表单提交时出现jQuery没有权限的解决方法
- jquery、js调用iframe父窗口与子窗口元素的方法整理
- jquery隔行换色效果实现方法