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 ...

随机推荐

Mysql Server系统架构介绍
总的来说,MySQL可以看成是二层架构. 第一层我们通常叫做SQL Layer,在MySQL数据库系统处理底层数据之前的所有工作都是在这一层完成的,包括权限判断,sql解析,执行计划优化,query ...
JAXB--@XmlElementWrapper注解和泛型一起使用
当java对象的某个属性使用泛型时,普通对象都没问题,但是遇到HashSet这种集合类封装的元素时,就会出现元素内容序列化不出来的问题,详见如下: 一.示例: 第一步:定义java对象 package ...
Traefik Kubernetes 初试
traefik 是一个前端负载均衡器,对于微服务架构尤其是 kubernetes 等编排工具具有良好的支持:同 nginx 等相比,traefik 能够自动感知后端容器变化,从而实现自动服务发现:今天 ...
oracle11g exp导出问题：部分表导不出来
在oracle导出表的命令exp时候发现一个问题,就是部分表全然的导不出来,经检查发现仅仅要是表为空的都会导不出来. 在例如以下表中发现segment_created都为NO的是导不出来的,经查询后, ...
linux经常使用命令-帮助命令-授之以渔
原创Blog,转载请注明出处 http://blog.csdn.net/hello_hwc 我的虚拟机系统是CentOS.版本号较老,谅解一.为什么要学习帮助命令? 授人以鱼不如授人以渔.学会了 ...
PHP文件锁定写入实例分享
PHP文件锁定写入实例解析. 原文地址:http://www.jbxue.com/article/23118.html PHP文件写入方法,以应对多线程写入,具体代码: function file_w ...
redisHelper
using System; using System.Collections.Generic; using System.Linq; using System.Text; using ServiceS ...
Android数据库高手秘籍(零)——前言
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/38083103 在我刚開始接触Android的时候甚至都不敢相信.Android系统 ...
2-2-求并集A=A∪B-线性表-第2章-《数据结构》课本源码-严蔚敏吴伟民版
课本源码部分第2章线性表 - 求并集A=A∪B ——<数据结构>-严蔚敏.吴伟民版 ★有疑问先阅读★ 源码使用说明链接☛☛☛ <数据结构-C语言版>(严 ...
text字段增加处理
--text字段增加处理 --创建测试表 ),detail text) insert into test ','A*B' --定义添加的的字符串 ),@postion int select @s_st ...

JQuery Notes

JQuery Notes的更多相关文章

随机推荐

热门专题