下面是列出了基本功能的实现

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

<!--选择器-->

  $("p").click(function(){

    $(this).hide();

  });

<!--事件-->

  $("#button1").click(function(){

   window.alert("单击事件");

  })

  $("#button2").dblclick(function(){

   window.alert("双击事件");

  })

  $("#button3").mouseenter(function(){

   window.alert("鼠标移动事件");

  })

  <!--隐藏和显示-->

  $("#hide").click(function(){

    $(".showtext").hide();

  });

  $("#show").click(function(){

    $(".showtext").show();

  });

  $("#toggle").click(function(){

    $(".showtext").toggle();

  });

  <!--动画-->

    $("#animate").click(function(){

		$(".animate").animate({

		  left:'250px',

		  opacity:'0.5',

		  height:'150px',

		  width:'150px'

		});

	});

    <!--操作DOM对象-->

	  $("#btn1").click(function(){

		alert("Text: " + $("#test").text());

	  });

	  $("#btn2").click(function(){

		alert("HTML: " + $("#test").html());

	  });

	  $("#btn3").click(function(){

		alert("Value: " + $("#testvalue").val());

	  });

	  $("#btn4").click(function(){

		alert("id->"+ $("#w3s").attr("id") + "href->" + $("#w3s").attr("href"));

	  });

	  $("#btn5").click(function(){

		alert($("#btn5text").text("<B>你好啊</B>"));

	  });

  <!--添加元素-->

  $("#btnadd1").click(function(){

    $(".btnadd1").append("<p>添加的一个元素</p>");

  });

  <!--操作 CSS-->

    $("#btnaddcss").click(function(){

    $(".btncss").addClass("important");

  });

    $("#btndelcss").click(function(){

    $(".btncss").removeClass("important");

  });

  $("#btntoggleClass").click(function(){

    $(".btncss").toggleClass("important");

  });

  $("#btntsetClass").click(function(){

    $(".btncss").css({"background-color":"yellow","font-size":"200%"});

  });

});

</script>

<style type="text/css">

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

</style>

<title>Jquery用法速用表</title>

</head>

<body>

<div style="background:#abcdef">

选择器

</div><hr>

<p>如果你点我，我就会消失</p>

<p>如果你点我，我就会消失</p>

<p>如果你点我，我就会消失</p>

<div style="background:#abcdef">

事件

</div><hr>

<input type="button" id="button1" value="单击事件"/>

<input type="button" id="button2" value="双击事件"/>

<input type="button" id="button3" value="鼠标移动事件"/>

<div style="background:#abcdef">

隐藏和显示

</div><hr>

<p class="showtext">如果你点击“隐藏” 按钮，我将会消失。</p>

<button id="hide">隐藏</button>

<button id="show">显示</button>

<button id="toggle">显示或者隐藏</button>

<div style="background:#abcdef">

动画

</div><hr>

<div class="animate"style="background:#98bf21;height:100px;width:100px;position:absolute;">

</div>

<button id="animate">开始动画</button><br>

<br><br><br><br><br><br><br><br><br>

<div style="background:#abcdef">

操作DOM对象

</div><hr>

显示文本：<p id="test">This is some <b>bold</b> text in a paragraph.</p>

<button id="btn1">显示文本</button>

<button id="btn2">显示HTML</button><br><hr>

显示value：<p>Name: <input type="text" id="testvalue" value="my name is sun"></p>

<button id="btn3">显示value</button><br>

获得任意属性的值：<p><a href="http://www.yinghy.com" id="w3s">樱花雨</a></p>

<button id="btn4">获得任意属性的值</button><br><hr>

设置文本的属性：<p id="btn5text">This is a paragraph.</p>

<button id="btn5">设置文本属性</button><br><hr>

<div style="background:#abcdef">

添加元素

</div><hr>

<p class="btnadd1">This is a paragraph.</p>

<button id="btnadd1">添加文本</button>

<div style="background:#abcdef">

操作 CSS

</div><hr>

<p class="btncss">This is a paragraph.</p>

<button id="btnaddcss">添加 CSS样式</button>

<button id="btndelcss">删除 CSS样式</button>

<button id="btntoggleClass">自动添加和删除 CSS样式</button>

<button id="btntsetClass">具体设置单个 CSS样式</button>

</body>

</html>

jQuery 基本实现功能模板的更多相关文章

  1. 基于jQuery带备忘录功能的日期选择器

    今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...

  2. 自己使用Jquery封装各种功能分享

    自己使用Jquery封装各种功能分享: 左右滚动图片 瀑布流 流动显示列表 广告切换 头像切换And广告切换 获取搜索引擎的来源关键字 上面列表中展示的功能都是使用jquery进行封装实现的,希望大家 ...

  3. jquery实现菜单功能（单击展开或者关闭）-一般应用于后台

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  4. js、jquery实现模糊搜索功能

    模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...

  5. 超炫jQuery测试答题功能

    推荐一款超炫jQuery测试答题功能插件 实例代码 <body> <div class="container" id="main"> & ...

  6. count_if 功能模板

    count_if 功能模板 template <class InputIterator, class UnaryPredicate> typename iterator_traits< ...

  7. jquery 插件和后台模板搜集

    弹框 alert confirmhttp://www.jq22.com/jquery-info2607 jQuery表格排序筛选插件http://www.jq22.com/jquery-info880 ...

  8. jQuery mobile 核心功能

    原文地址:http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/about/features.html 基于 jQuery 核心,使用和jQue ...

  9. Jquery回到顶部功能

    问题描述: 在网页中,我们经常会由于网页内容过长,而需要在浏览网页时有一个快速回到网页顶部的功能,在浏览网页内容离顶部有一段距离时,出现快速回到网页顶部的工具,从而能使我们的网页更人性化. 问题的产生 ...

随机推荐

  1. oracle操作字符串：拼接、替换、截取、查找

    1.拼接字符串 1)可以使用“||”来拼接字符串 select '拼接'||'字符串' as str from dual 2)通过concat()函数实现 select concat('拼接', '字 ...

  2. 深入了解使用egret.WebSocket

    概念 本教程不讲解TCP/IP协议,Socket属于哪层,消息包体怎么设计等,主讲 egret.WebSocket 使用示例 与 protobuf 使用示例. 在使用egret.WebSocket之前 ...

  3. Dede 查询附加表

    <!--使用dede:arclist取出信息 dede_archives 表 $sql="Select 字段 from dede_archivies",但是在默认情况下 de ...

  4. SQL Server DAC 管理员专用连接

    DAC 是Dedicated Administrator Connect 的缩写,是专用管理员连接通道,当SQL Server 因为资源不足而无法连接入系统的时候,管理员可通过该通道连接到数据,进行问 ...

  5. Spring boot将配置属性注入到bean类中

    一.@ConfigurationProperties注解的使用 看配置文件,我的是yaml格式的配置: // file application.yml my: servers: - dev.bar.c ...

  6. 【HDOJ】1506 Largest Rectangle in a Histogram

    Twitter还是Amazon拿这个题目当过面试题.DP区间求面积. /* 1506 */ #include <cstdio> #include <cstring> #incl ...

  7. （转载）PHP mb_substr函数在实际编码中的应用方法

    (转载)http://developer.51cto.com/art/200912/166080.htm 我们在使用PHP语言进行实际编码中时,通常会遇到许多错误的出现,比如在截取字符串时会出现乱码等 ...

  8. E - Minimum Cost - POJ 2516（最小费）

    题目大意:N个客户,M个供货商,K种商品,现在知道每个客户对每种商品的需求量,也知道每个供货商每种商品的持有量,和供货商把一种商品运送到每个客户的单位花费.现在想知道如果能满足所有客户的最小花费是多少 ...

  9. [置顶] Android开发之ProcessState和IPCThreadState类分析

    在Android中ProcessState是客户端和服务端公共的部分,作为Binder通信的基础,ProcessState是一个singleton类,每个 进程只有一个对象,这个对象负责打开Binde ...

  10. hibernate初涉

    好久都不曾写写总结一些东西了,惰性真的是令人难以克制!虽然和许多北漂族一样,艰苦而又迷茫,但是我总能找到一些方向,一点期盼,因为你就我的目标.我会坚持下去,重拾青春的热血,既然人生如戏,那我不当猪脚. ...