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

<!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. linux下tomcat配置APR方式HTTPS

    一.安装APR 创建/usr/local/apr tar zxvf apr-1.4.5.tar.gz cd apr-1.4.5 ./configure --prefix=/usr/local/apr/ ...

  2. Spark On YARN内存分配

    本文转自:http://blog.javachen.com/2015/06/09/memory-in-spark-on-yarn.html?utm_source=tuicool 此文解决了Spark ...

  3. android.os.NetworkOnMainThreadException 在4.0之后谷歌强制要求连接网络不能在主线程进行访问

    谷歌在4.0系统以后就禁止在主线程中进行网络访问了,原因是: 主线程是负责UI的响应,如果在主线程进行网络访问,超过5秒的话就会引发强制关闭, 所以这种耗时的操作不能放在主线程里.放在子线程里,而子线 ...

  4. UILabel的size根据文字的长短变化

     UILabel *label = [[UILabel alloc] init]; label.backgroundColor = [UIColor blackColor]; [self.view a ...

  5. Mifare S50与Mifare S70

    转自http://blog.sina.com.cn/s/blog_9ed067ad0100zyjx.html Mifare S50和Mifare S70又常被称为Mifare Standard.Mif ...

  6. Vim记录

    Command Mode下: . 代表当前行 % 代表所有行 $ 代表结束行 :1,$normal i#     全部行前加#,同下 :%normal i# :read ! cd /usr/bin/; ...

  7. some words that I always make mistake

    发音相似容易混淆的词汇 alteration  英 [ɔːltə'reɪʃ(ə)n; 'ɒl-]  美 [,ɔltə'reʃən]  n. 修改,改变:变更 alteration /ˌɔːltəˈre ...

  8. poj 2406Power Strings

    http://poj.org/problem?id=2406 #include<cstdio> #include<cstring> #include<algorithm& ...

  9. thickbox 关于动态生成 无法跳出弹出框的问题

    问题描述: 用jQuery动态生成thickbox的连接代码,发现没有效果. 原因: thickbox在页面加载后,会给a,input,area等绑定弹出事件. 通过tb_init(’a.thickb ...

  10. radio 和checkbox与文字对齐问题

    今天在项目中遇到radio和文字对齐问题(ie不明显,火狐和google比较明显),在此记录. 1.浏览器默认文字大小为14px,因而当文字字体为14px时radio和checkbox与文字对齐良好, ...