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 ...
随机推荐
- docker-compose教程（安装，使用, 快速入门）
1.Compose介绍Docker Compose是一个用来定义和运行复杂应用的Docker工具.一个使用Docker容器的应用,通常由多个容器组成.使用Docker Compose不再需要使用she ...
- 高精度运算库gmp
网址:www.gmplib.org 我下载的是 6.1.2版本:https://gmplib.org/download/gmp/gmp-6.1.2.tar.bz2 执行操作如下: 1. tar -jv ...
- IOS UIView自动调整尺寸
自动尺寸调整行为 当您改变视图的边框矩形时,其内嵌子视图的位置和尺寸往往也需要改变,以适应原始视图的新尺寸.如果视图的autoresizesSubviews属性声明被设置为YES,则其子视图会根据au ...
- 【Android】1.1 开发环境安装和配置
分类:C#.Android.VS2015: 创建日期:2016-01-20 2016-08-03说明:此版本已过时,最新版本见本博客置顶的内容. 一.安装JDK.SDK.NDK 无论是用C#和VS20 ...
- 【iOS XMPP】使用XMPPFramewok（三）：好友状态
转自:http://www.cnblogs.com/dyingbleed/archive/2013/05/13/3071544.html 好友状态 获取好友状态,通过实现 - (void)xmppSt ...
- sql的split()函数
ALTER function [dbo].[StrToList_Test](@Str varchar()) returns @table table( value nvarchar(max) ) as ...
- FFmpeg(5)-AVStream和AVCodecParameters部分参数分析
一.AVStream AVCodecContext *codec // 已过时,使用另一个 codecpar 结构体代替. AVRational time_base // 时间基数. int64_t ...
- .NET MVC5+ Dapper+扩展+AutoFac自动注入实现
1.首先创建一个MVC项目 定义Model 层 view 层 index.cshtml 控制器层Controllers等文件 2.在线安装或者引用dapper 以及扩展相关包 同时Autofac ...
- 解决windows10 里vs2015 附件进程调试提示“此任务要求应用程序有提升的权限”
刚用windows10 ,感觉有些地方别扭.就在是vs2015开发程序的时候,就遇到了个问题. 首先 我是使用adminitrator账号登陆的. 双击vs解决方案,打开iis,然后结合vs2015里 ...
- webpack的css处理
webpack打包处理css的时候需要两个loader: style-loader 和css-loader 安装: npm install style-loader css-loader --save ...