<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的更多相关文章

  1. 2016年6月份那些最实用的 jQuery 插件专辑

    jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...

  2. jQuery实现手机竖直手风琴效果

    效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...

  3. 从零开始学jQuery插件开发

    http://www.w3cfuns.com/notes/19462/ec18ab496b4c992c437977575b12736c.html jQuery 最成功的地方,是它的可扩展性,通过吸引了 ...

  4. jquery实现幻灯片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. javascript: Jquery each loop with json array or object

    http://www.codeproject.com/Articles/779303/JSON-and-Microsoft-technologies http://www.codeproject.co ...

  6. Jquery Mobile设计Android通讯录第二章

    本文是jQuery Mobile设计Android通讯录系统教程的第二篇,在上一篇教程中(http://publish.itpub.net/a2011/0517/1191/000001191561.s ...

  7. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  8. JQuery的复选框选中、取消、全选，全不选问题

    一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...

  9. JQuery、js判断复选框是否选中状态

    JQuery: var $isChecked = $("#id").is(":checked"); alert($isChecked); JS: var $id ...

随机推荐

  1. sublime unityshaderplugin

  2. 给Elasticsearch 5.2.2 设置用户权限 how to setting security for elasticsearch on windows

    1. download the plugin of elasticsearch: 下载 readonlyrest-1.14.0_es5.2.2.zip 2. install readonlyrest ...

  3. LeetCode OJ 之 Maximal Square （最大的正方形）

    题目: Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ...

  4. Android 加载大图

    在 Android 开发中, Bitmap 是个吃内存大户,稍微操作不当就会 OOM .虽然现在第三方的图片加载库已经很多,很完善,但是作为一个 Androider 还得知道如何自己进行操作来加载大图 ...

  5. PHP将CMYK颜色值和RGB颜色相互转换的例子

    PHP将CMYK颜色值和RGB颜色相互转换的例子 function hex2rgb($hex) { $color = str_replace('#','',$hex); $rgb = array('r ...

  6. 【Unity】8.4 扩展UnityGUI

    分类:Unity.C#.VS2015 创建日期:2016-04-27 一.简介 有很多种方法可以补充和扩展 UnityGUI 以满足您的需求.你可以混合和创建控件,并且可以有多种方法来规定用户 GUI ...

  7. (原创)c++11改进我们的程序之垃圾回收

    c#和java中有自动垃圾回收机制,.net运行时和java虚拟机可以管理分配的堆内存,在对象失去引用时自动回收,因此在c#和jva中, 内存管理不是大问题.c++语言没有垃圾回收机制,必须自己去释放 ...

  8. 用ubuntu的grpb2引导Remix OS或Phoenix OS

    Remix OS游戏版,这里下载:http://youxi.jide.com/ 安装简单.我这里要解决的是安装后用ubunu的grub2菜单去引导它. 方法如下: 进入ubuntu系统里修改其grub ...

  9. Kafka: Connect

    转自:http://www.cnblogs.com/f1194361820/p/6108025.html Kafka Connect 简介 Kafka Connect 是一个可以在Kafka与其他系统 ...

  10. C# 去除json字符串key引号

    采用正则表达式去除: 方法 /// <summary> /// 去除json key双引号 /// </summary> /// <param name="js ...