jQuery 绝对入门第1/2页

1.jQuery GO
jQuery 提供了功能强大的读取和处理文档DOM的方式,为动态操作文档DOM提供了方便。


代码如下:

$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

单击文档中任一个连接都会触发alert() 事件
$号是 jQuery类的一个别称,因此$()构造了一个新的jQuery 对象。函数 click() 是这个jQuery对象的一个方法,它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法. 这样的使用编码更有结构与行为分开的感觉。
2.选择器和事件
jQuery提供两种方式来选择html的elements,第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a"));第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用


代码如下:

<ul id=”orderedlist”>
<li>食品</li>
<li>服装</li>
<li>电子</li>
</ul>

使用jQuery 查找文档中的ul如下:取代js document.getElementById(‘orderlist');


代码如下:

$(document).ready(function() {
$("#orderedlist").addClass("red");
});

$(“#..”)的方式可以找到指定ID的元素。
为其子节点添加样式,如下:


代码如下:

$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});

在鼠标移到或移开<li>项时样式切换,如下:


代码如下:

$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});

$(#orderedlist li) 与 $(“#orderedlist > li”) 的区别,前者是父元素下所有匹配的子元素,后都仅是其子元素中匹配的元素。


代码如下:

$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});

find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一样。each()方法迭代了所有的li,并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字,并将之设置为li的html文本
一个ajax 方式提交后的重置表单的操作,如下:


代码如下:

$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});

当然可以重置个表单


代码如下:

$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});

过滤选择器
还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list,你想要选择所有的没有ul子元素的li元素。


代码如下:

$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});

上面代码中的[expression] 语法是从XPath而来,可以在子元素和属性(elements and attributes)上用作过滤器,比如你可能想选择所有的带有name属性的链接:


代码如下:

$(document).ready(function() {
$("a[name]").background("#eee"); //原文为“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符号应该去除
});

更常见的情况是以name来选择链接,你可能需要选择一个有特点href属性的链接,这在不同的浏览器下对href的理解可能会不一致,所以我们的部分匹配("*=")[包含]的方式来代替完全匹配("="):


代码如下:

$(document).ready(function() {
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});

到现在为止,选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素,比如一个FAQ的页面,答案首先会隐藏,当问题点击时,答案显示出来,jQuery代码如下:

代码如下:

$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});

这里我们用了一些链式表达法来减少代码量,而且看上去更直观更容易理解。像'#faq' 只选择了一次,利用end()方法,第一次find()方法会结束(undone),所以我们可以接着在后面继续find('dt'),而不需要再写$('#faq').find('dt')。

当前1/2页 12下一页阅读全文

(0)

相关推荐

  • jQuery 绝对入门第1/2页

    1.jQuery GO jQuery 提供了功能强大的读取和处理文档DOM的方式,为动态操作文档DOM提供了方便. 复制代码 代码如下: $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); 单击文档中任一个连接都会触发alert() 事件 $号是 jQuery类的一个别称,因此$()构造了一个新的jQuery 对象.函数 click() 是这个

  • ADODB 入门第1/2页

    1. 前言 ADODB 是 Active Data Objects Data Base 的简称,它是一种 PHP 存取数据库的函式组件.现在 SFS3 系统 (校园自由软件交流网学务系统) 计划的主持人陈莹光老师,决定采用此一组件,为了让更多有心参与该项目的伙伴们能够顺利加入发展的行列,小弟认为有必要把 ADODB 的中文入门介绍写出来,以方便伙伴们参考备查. 虽然 PHP 是建构 Web 系统强有力的工具,但是 PHP 存取数据库的功能,一直未能标准化,每一种数据库,都使用另一种不同且不兼容的

  • Python入门第1/10页

    第一章 介绍 脚本语言是类似DOS批处理.UNIX shell程序的语言.脚本语言不需要每次编译再执行,并且在执行中可以很容易地访问正在运行的程序,甚至可以动态地修改正在运行的程序,适用于快速地开发以及完成一些简单的任务.在使用脚本语言时常常需要增的新的功能,但有时因为脚本语言本来就已经很慢.很大.很复杂了而不能实现:或者,所需的功能涉及只能用C语言提供的系统调用或其他函数--通常所要解决的问题没有重要到必须用C语言重写的程度:或者,解决问题需要诸如可变长度字符串等数据类型(如文件名的有序列表)

  • 推荐学习php sesson的朋友必看PHP会话(Session)使用入门第1/2页

    由于 Session 是以文本文件形式存储在服务器端的,所以不怕客户端修改 Session 内容.实际上在服务器端的 Session 文件,PHP 自动修改 Session 文件的权限,只保留了系统读和写权限,而且不能通过 ftp 修改,所以安全得多. 对于 Cookie 来说,假设我们要验证用户是否登陆,就必须在 Cookie 中保存用户名和密码(可能是 md5 加密后字符串),并在每次请求页面的时候进行验证.如果用户名和密码存储在数据库,每次都要执行一次数据库查询,给数据库造成多余的负担.因

  • JQuery Mobile实现导航栏和页脚

    导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). 导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a&g

  • jQuery实现手机版页面翻页效果的简单实例

    如下所示: var page = 1; var size = 6; var mark = 0; var url = "{pigcms{:U('Order/index', array('page'=>'d%'))}"; var commentTpl = '<div style="margin-top: 10px">\ <button data-oid="<order_id>" style="width:

  • jQuery实现简单的tab标签页效果

    本文实例讲述了jQuery实现简单的tab标签页效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab1</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ l

  • jQuery实现鼠标经过像翻页和描点链接效果

    在百度地图api首页经常见到当鼠标经过像翻页和描点链接效果,基于jquery和js代码是如何实现的呢?下面小编给大家分享关键代码,一起看下吧! var timer; $("li").on("mouseover",function(){ clearTimeout(timer); timer=null; $(this).addClass("active"); $(this).siblings().removeClass("active&qu

  • jQuery实现点击图片翻页展示效果的方法

    本文实例讲述了jQuery实现点击图片翻页展示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>基于jQuery实现的点击图片翻页展示效果</title> <meta http-equiv="content-type&q

  • GO语言基础入门第一个go程序解读

    目录 1. 编写HelloWorld 2. 执行go程序 3. 代码解读 4.总结 1. 编写HelloWorld //filename: hello.go package main import "fmt" func main(){ fmt.Println("hello world!") } 2. 执行go程序 执行go程序由几种方式 方式一:使用go run命令 step1:打开终端: step2:进入hello.go所在的目录 step3:输入go run h

随机推荐