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 ...
随机推荐
- 微信小程序 confirm（删除提示）提示框,询问框,小程序操作成功提示后跳转
微信小程序删除处理 没有 confrim 那怎么实现这个效果呢 可以使用小程序里的模态框 代码: wx.showModal({ title: '提示', content: '确定要删除吗?', suc ...
- influxdb 配置文件注释
### Welcome to the InfluxDB configuration file. # The values in this file override the default value ...
- iOS 再谈 代理传值，block反向传值
本贴的例子是:有A和B两个界面,要实现的效果就是先让A跳转到B,然后B中有个颜色的参数,当B跳转到A时,把这个颜色的参数传递给A,在A中利用这个颜色改变自己界面的颜色. 第1步:在发送者(界面B)中, ...
- SSO单点登录的发展由来以及实现原理
单点登录以及权限,在很早之前都有写过,不过都比较简单,今天就具体说一下,以及下一步要做的 1.web单系统应用 早期我们开发web应用都是所有的包放在一起打成一个war包放入tomcat容器来运行的, ...
- 我用Xamarin开发android应用，应用在真机上一打开就退出了
在解决方案管理器的项目上右键--属性--Android Options--Packaging将Use Shared Runtime前面的对勾取消即可.
- ubuntu for win10 里运行net core
花了点时间在ubuntu for win10里运行net core 按官网上ubuntun10.14装的net core指令 ...... ...... sudo apt-get install do ...
- JAVA与C++,C与C++的差别
首先来分析JAVA与C++的差别: JAVA是纯面向对象的语言,而C++是基于面向对象过程的语言. JAVA有着垃圾回收机制.它的语法是C++的子集,即JAVA有的C++都有.而C++有的JAVA不全 ...
- 菜鸟学SSH（十七）——基于注解的SSH将配置精简到极致
很早之前就想写一篇关于SSH整合的博客了,但是一直觉得使用SSH的时候那么多的配置文件,严重破坏了我们代码整体性,比如你要看两个实体的关系还得对照*.hbm.xml文件,要屡清一个Action可能需要 ...
- 【转】（七）unity4.6Ugui中文教程文档-------概要-UGUI Auto Layout
原创至上,移步请戳:(七)unity4.6Ugui中文教程文档-------概要-UGUI Auto Layout 6. Auto Layout Rect Transform布局系统是足够灵活,可以处 ...
- 【教程】ubuntu下安装NFS服务器
安装 NFS server mystery@lcw:~$ sudo apt-get install nfs-kernel-server 编辑/etc/exports,添加目标系统的根文件系统映射目录 ...