JQuery Notes
<script type="text/javascript" src="script.js"></script>
$(document).ready(something); says: "when the HTML document is ready, do something!"
$(document).ready(function() {
var $target = $('li:nth-child(4)');
$target.fadeOut('fast');
});
As you probably guessed, jQuery includes a .toggleClass() function that does exactly this. If the element it's called on has the class it receives as an input, .toggleClass() removes that class; if the target element doesn't have that class, .toggleClass() adds it.
$(document).ready(function(){
$('#text').click(function(){
$('#text').toggleClass('highlighted');
});
});
.html() can be used to set the contents of the first element match it finds. For instance,
$('div').html();
will get the HTML contents of the first div it finds, and
$('div').html("I love jQuery!");
will set the contents of the first div it finds to "I love jQuery!"
.val() is used to get the value of form elements. For example,
$('input:checkbox:checked').val();
would get the value of the first checked checkbox that jQuery finds.
The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
GChat List
index.html
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
</body>
</html>
stylesheet.css
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#button{
display: inline-block;
height:20px;
width:70px;
background-color:#cc0000;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
.list {
font-family:garamond;
color:#cc0000;
}
script.js
$(document).ready(function(){
$('#button').click(function(){
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>');
});
$(document).on('click', '.item', function(){
$(this).remove();
});
});
Move the sprite
index.html
<!DOCTYPE html>
<html>
<head>
<title>Super Mario!</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
</body>
</html>
stylesheet.css
img {
position: relative;
left:;
top:;
}
script.js
$(document).ready(function() {
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
// Left arrow key pressed
case 37:
$('img').animate({left: "-=10px"}, 'fast');
break;
// Up Arrow Pressed
case 38:
$('img').animate({top: "-=10px"}, 'fast');
break;
// Right Arrow Pressed
case 39:
$('img').animate({left: "+=10px"}, 'fast');
break;
// Down Array Pressed
case 40:
$('img').animate({top: "+=10px"}, 'fast');
break;
}
});
});
.effect() ->argument 'explode' 'bounce' 'slide'
http://jqueryui.com/
Special Effects
index.html
<!DOCTYPE html>
<html>
<head>
<title>Behold!</title>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script type='text/javascript' src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="menu">
<h3>jQuery</h3>
<div>
<p>jQuery is a JavaScript library that makes your websites look absolutely stunning.</p>
</div>
<h3>jQuery UI</h3>
<div>
<p>jQuery UI includes even more jQuery goodness!</p>
</div>
<h3>JavaScript</h3>
<div>
<p>JavaScript is a programming language used in web browsers, and it's what powers jQuery and jQuery UI. You can learn about JavaScript in the <a href="http://www.codecademy.com/tracks/javascript" target="blank" style="text-decoration:none; color:#F39814">JavaScript track</a> here on Codecademy.</p>
</div>
</div>
</body>
</html>
script.js
$(document).ready(function() {
$("#menu").accordion({collapsible: true, active: false});
});
JQuery Notes的更多相关文章
- 2016年6月份那些最实用的 jQuery 插件专辑
jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...
- jQuery实现手机竖直手风琴效果
效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...
- 从零开始学jQuery插件开发
http://www.w3cfuns.com/notes/19462/ec18ab496b4c992c437977575b12736c.html jQuery 最成功的地方,是它的可扩展性,通过吸引了 ...
- jquery实现幻灯片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- javascript: Jquery each loop with json array or object
http://www.codeproject.com/Articles/779303/JSON-and-Microsoft-technologies http://www.codeproject.co ...
- Jquery Mobile设计Android通讯录第二章
本文是jQuery Mobile设计Android通讯录系统教程的第二篇,在上一篇教程中(http://publish.itpub.net/a2011/0517/1191/000001191561.s ...
- 基于jQuery 常用WEB控件收集
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...
- JQuery的复选框选中、取消、全选，全不选问题
一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...
- JQuery、js判断复选框是否选中状态
JQuery: var $isChecked = $("#id").is(":checked"); alert($isChecked); JS: var $id ...
随机推荐
- JDK1.5新特性，基础类库篇，System类
一. 背景 System.getenv(String)方法继续有效:增加了新的System.getenv()方法,返回保存环境变量的Map<String,String>. 同时增加了以纳秒 ...
- 将视频转换为 HLS(HTTP Live Streaming) 协议格式文件
就是将视频文件转码(H264+ACC).分片(n个.ts文件).生成列表(.m3u8) 方便网站提供视频播放服务,提升加载速度,节省流量. 1.准备好源视频文件. 2.下载 ffmpeg(http:/ ...
- SQL SERVER 查看数据库信息
a.使用sys.database_files查看有关数据库文件的信息 b.使用sys.filegroups查看有关数据库组的信息. c.使用sys.master_files 查看数据库文件的基本信息和 ...
- JSTL标签之<c:choose><c:when><c:otherwise>标签
假设是JSTL1.1版本号,使用<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" ...
- 【Unity】6.4 Transform--移动、旋转和缩放游戏对象
分类:Unity.C#.VS2015 创建日期:2016-04-20 一.简介 Unity引擎提供了丰富的组件和类库,为游戏开发提供了非常大的便利,熟练掌握和使用这些API,对于游戏开发的效率提高很重 ...
- Java集合框架：EnumMap
EnumMap定义 package java.util; import java.util.Map.Entry; import sun.misc.SharedSecrets; public class ...
- 调试web api的工具 谷歌插件 Restlet
介绍 http://chromecj.com/productivity/2017-08/789.html
- 【驱动】linux设备驱动·扫盲
linux设备驱动 Linux系统把设备驱动分成字符设备.块设备和网络设备三种类型. 内核为设备驱动提供了注册和管理的接口,设备驱动还可以使用内核提供的其他功能以及访问内核资源. PCI局部总线 早期 ...
- 【驱动】linux驱动程序开发及环境搭建
1.mystery引入 1)设备驱动程序对外提供如下的功能: 1)设备初始化:对硬件设备进行初始化操作 2)数据交换:数据交换包括由内核层向硬件层传送数据.从硬件层读取数据 ...
- vps 切换内核
一.安装内核aptitude install linux-image-3.13.0-24-generic linux-headers-3.13.0-24-generic 二.查看已安装的内核dpkg ...