JQuery基础三

1、checkbox操作：全选、全不选、反选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //全选

            $('#btnAll').click(function () {

                $('div :checkbox').attr('checked', true);

            });

            //全不选

            $('#btnNoAll').click(function () {

                $('div :checkbox').attr('checked', false);

            });

            //反选

            $('#btnFX').click(function () {

                $('div :checkbox').each(function (index, ele) {

                    $(ele).attr('checked', !$(ele).attr('checked'));

                });

            });

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="全选" id="btnAll" />

    <input type="button" name="name" value="全不选" id="btnNoAll" />

    <input type="button" name="name" value="反选" id="btnFX" />

    <div style="border: 1px solid red; height: 200px;">

        <input type="checkbox" name="name" value="1" />忐忑

        <input type="checkbox" name="name" value="2" />法海不懂爱

        <input type="checkbox" name="name" value="3" />金箍棒

        <input type="checkbox" name="name" value="4" />爱情买卖

        <input type="checkbox" name="name" value="5" />最炫民族风

    </div>

</body>

</html>

2、绑定事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //bind可以注册事件

            //            $('#btn').bind('click', function () {

            //                alert('点我了');

            //            }).bind('mouseover', function () {

            //                $(this).css('color', 'yellow');

            //            });

            //            $('#btn').click(function () {

            //            });

            //            $('#btn').toggle(function () {

            //                alert('1');

            //            }).toggle(function () {

            //                alert('2');

            //            }).toggle(function () {

            //                alert('3');

            //            });

            //鼠标进入和鼠标离开

            $('input').hover(function () {

                $(this).css('backgroundColor','red');

            }, function () {

                $(this).css('backgroundColor', '');

            });

        });

    </script>

</head>

<body>

   <!-- <input type="button" name="name" value="绑定" id="btn" />-->

    <input type="text" name="name" value="" />

</body>

</html>

3、事件冒泡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //事件冒泡

            $('div').click(function () {

                alert($(this).attr('id'));

            });

            $('p').click(function () {

                alert($(this).attr('id'));

            });

            $('strong').click(function () {

                alert($(this).attr('id'));

                return false;

            });

        });

    </script>

</head>

<body>

    <div id="dv" style=" width:300px; height:200px; background-color:Yellow;">

    <p id="p1" style=" width:100px; height:100px; background-color:Blue;">

        <strong id="st">加粗</strong>

    </p>

    </div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#btn').click({ "name": "小马" }, function (eee) {

                alert(eee.data.name);

            });

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="按钮" id="btn" />

</body>

</html>

4、让图片飞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $(document).mousemove(function (e) {

                $('#im').css('position', 'absolute').css({ "left": e.pageX, "top": e.pageY });

            });

        });

    </script>

</head>

<body>

    <img src="2.png" id="im" />

</body>

</html>

5、光标改变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('div').click(function (e) {

               // alert(e.target.id);

            });

            $('div').mousedown(function (e) {

                alert(e.which);

            });

        });

    </script>

    <style type="text/css">

    div

    {

        width:300px;

        height:200px;

        background-color:Blue;

        cursor:url(cur/dinosau2.ani);

        }

    </style>

</head>

<body>

    <div id="dv">

    </div>

</body>

</html>

6、折叠菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

    #u1 li

    {

        margin-bottom:10px;

        background-color:Orange;

        font-size:20px;

        font-weight:bolder;

        cursor:pointer;

        }

    #u1 li ul

    {

        list-style-type:none;

        margin:0;

        padding:0;

        }

        #u1 li ul li

        {

            background-color:pink;

            }

    </style>

    <script src="../Scripts/jquery-1.10.2.js"></script>

    <script type="text/javascript">

        $(function () {

            $('#u1 li ul li').hide();

            $('#u1 li').click(function () {

                $('ul li', $(this)).show(500);

                $('ul li', $(this).siblings('li')).hide(500);

                $('#san').attr('src','音乐的路径');

            });

        });

    </script>

</head>

<body>

<bgsound id="san" loop="0" src="">

    <div style=" width:200px; height:500px; border:1px solid red;">

        <ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">

            <li>

            幼儿园同学

                <ul>

                    <li>鼻涕虫</li>

                    <li>爱哭鬼</li>

                    <li>张大胆</li>

                </ul>

            </li>

            <li>小学同学

                <ul>

                    <li>张三丰</li>

                    <li>张无忌</li>

                    <li>乔布斯</li>

                </ul>

            </li>

            <li>

            初中同学

                <ul>

                    <li>盖茨</li>

                    <li>种哥</li>

                    <li>奥巴马</li>

                </ul>

            </li>

        </ul>

    </div>

</body>

</html>

7、层的显示和隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //显示层

            $('#btnShow').click(function () {

                $('div').show(500);

            });

            $('#btnHide').click(function () {

                $('div').hide(500);

            });

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="显示层" id="btnShow" />

    <input type="button" name="name" value="隐藏层" id="btnHide" />

    <div style=" width:300px; height:200px; background-color:Blue;">

    </div>

</body>

</html>

漂亮效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#btnslideDown').click(function () {

                $('div').slideDown(500);

            });

            $('#btnslideUp').click(function () {

                $('div').slideUp(500);

            });

            $('#btnslideToggle').click(function () {

                $('div').slideToggle(500);

            });

            //=======================

            $('#btnfadeIn').click(function () {

                $('div').fadeIn(1000);

            });

            $('#btnfadeOut').click(function () {

                $('div').fadeOut(1000);

            });

            $('#btnfadeToggle').click(function () {

                $('div').fadeToggle(500);

            });

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="slideDown" id="btnslideDown" />

    <input type="button" name="name" value="slideUp" id="btnslideUp" />

    <input type="button" name="name" value="slideToggle" id="btnslideToggle" />

    <input type="button" name="name" value="fadeIn" id="btnfadeIn" />

    <input type="button" name="name" value="fadeOut" id="btnfadeOut" />

    <input type="button" name="name" value="fadeToggle" id="btnfadeToggle" />

    <div style=" width:300px; height:200px; background-color:Green;">

    </div>

</body>

</html>

8、TAB显示

div:gt(0)选择器用于匹配所有大于指定索引的元素，将其封装为jQuery对象并返回。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        #dvTab

        {

            width: 500px; /*  border: 1px solid blue;*/

            height: 200px;

        }

        #dvTab ul

        {

            margin: 0;

            padding: 0;

            list-style-type: none;

        }

        #dvTab ul li

        {

            text-align: center;

            background-color: Yellow;

            color: Red;

            width: 100px;

            font-weight: bolder;

            font-size: 14px;

            float: left;

            border-right: 1px solid blue;

            cursor: pointer;

        }

        #dvTab div

        {

            width: 400px;

            height: 200px;

            border: 1px solid red;

        }

    </style>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#dvTab div:gt(0)').hide();

            $('#uu1 li').mouseover(function () {

                var tt = $(this).text();

                switch (tt) {

                    case '新闻': $('#dvNews').show().siblings('div').hide(); break;

                    case '图片': $('#dvPic').show().siblings('div').hide(); break;

                    case '深度': $('#dvDeep').show().siblings('div').hide(); break;

                    case '军事': $('#dvMl').show().siblings('div').hide(); break;

                }

            });

        });

    </script>

</head>

<body>

    <div id="dvTab">

        <ul id="uu1">

            <li>新闻</li>

            <li>图片</li>

            <li>深度</li>

            <li>军事</li>

        </ul>

        <div id="dvNews">

            新闻新闻新闻

        </div>

        <div id="dvPic">

            图片，图片图片图图片图片图图图片贴图

        </div>

        <div id="dvDeep">

            深度深度深度深度十多年对于

        </div>

        <div id="dvMl">

            军事军事军事军事

        </div>

    </div>

</body>

</html>

9、图片动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#btn').click(function () {

                $('img').animate({ "left": "55px", "top": "500px", "width": "50px", "height": "50px" }, 3000).animate({ "left": "+=800px", "top": "-=500px" }, 2000);

            });

        });

    </script>

</head>

<body>

    <input type="button" name="name" value="飞起来" id="btn" />

    <img src="2.png" style=" position:absolute;" />

</body>

</html>

10、cookie保存用户

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script src="jquery.cookie.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            if ($.cookie('userName')==null ) {

                $('span').text('欢迎菜鸟登录');

            } else {

                $('span').text('欢迎'+$.cookie('userName')+'登录');

            }

            $('#btn').click(function () {

                $.cookie('userName', $('#txt').val());

            });

        });

    </script>

</head>

<body>

    <span>欢迎菜鸟登录</span>

    <input type="text" name="name" value="" id="txt" />

    <input type="button" name="name" value="记住密码" id="btn" />

</body>

</html>

11、显示高清图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="../Scripts/jquery-1.10.2.js"></script>

    <script src="../Scripts/jquery.jqzoom-core.js" type="text/javascript"></script>

    <link href="../Scripts/jquery.jqzoom.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        $(document).ready(function () {

            $('.MYCLASS').jqzoom();

        });

    </script>

</head>

<body>

    <a class="MYCLASS" title="MYTITLE" href="triumph_big1.jpg" target="_blank">

        <img title="IMAGE TITLE" src="triumph_thumb1.jpg">

    </a>

</body>

</html>

12、通过改变图片位置显示需要显示的资源

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

    div

    {

        background-image:url(1.jpg);

        width:60px;

        height:500px;

        border:1px solid red;

        background-repeat:no-repeat;/*:repeat-y; /*:repeat-x;/*横向平铺*/

        background-position:-215px -170px;

        /*此时的层显示图片是平铺*/

        }

    </style>

</head>

<body>

    <div>

    </div>

</body>

</html>

1、选择器+遍历

$('div').each(function (i){

i就是索引值

this 表示获取遍历每一个dom对象

});

2、选择器+遍历

$('div').each(function (index,domEle){

index就是索引值

domEle 表示获取遍历每一个dom对象

});

3、更适用的遍历方法

1）先获取某个集合对象

2）遍历集合对象的每一个元素

var d=$("div");

$.each(d,function (index,domEle){

d是要遍历的集合

index就是索引值

domEle 表示获取遍历每一个dom对

});

JQuery基础三的更多相关文章

Web前端基础(16):jQuery基础(三)
1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.1 显示动画方式一: $("div&quo ...
jQuery基础课程
环境搭建搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
Bootstrap<基础三> 排版
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
jquery基础知识汇总
jquery基础知识汇总一.简介定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
【jQuery基础学习】09 jQuery与前端（这章很水）
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构文件结构前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

随机推荐

已知树的前序、中序，求后序的c++实现&已知树的后序、中序，求前序的c++实现
#include"iostream" using namespace std; int pre[30]; int in[30]; int post[30]; int indexOf ...
LaTex Remove Left Margin 去除左边空间
LaTex中使用itemize的时候,默认的每一项左边都有一小段距离,并不是紧贴着边缘的,那么如果我们想去掉这段距离,我们可以使用下面的命令: \usepackage{enumitem} \setli ...
android-ProgressBar
制定ProgressBar显示风格 * 参考系统自带的进度条 * ProgressBar分类 * 可以精确显示进度(可以显示刻度和百分比) * 不可以精确显示进度 * 标题上ProgressBar的设 ...
Odoo 中group domain的优化应用
首先一个前提是 odoo 默认情况下一个menu 只能绑定一个action 而这个action中只有一个domain,而我们的需求是需要点击菜单,然后根据用户所属的组的不同而选择不同的action, ...
java中用过滤器解决字符编码问题
java的web程序经常出现中文乱码的问题,用一个实现了Filter接口的过滤器类可以较好地解决这个问题. 方式一 EncodingFilter import java.io.IOException; ...
20个有用的jq弹窗
链接地址:http://www.ffpic.com/zixun/20-useful-jquery-modal-plugins.html 推荐:jQuery.bPopup.js
满足要求的最长上升子序列（nlogn）
题意:数列A1,A2,...,AN,修改最少的数字,使得数列严格单调递增.(1<=N<=10^5; 1<=Ai<=10^9 ) 思路:首先要明白的一点是数列是严格单调递增,那么 ...
Zabbix自带模板监控MySQL
先使用主机链接Mysql模板 . 然后写获取mysql状态的脚本,即配合zabbix模板里面的参数的脚本. #!/bin/bash MYSQL_USER='zabbix' #这里为在本地数据库授权的账 ...
AppStore审核
应用被拒分为两种:Binary Rejected 和 Metadata Rejected.前者需要重新上传应用并且重新排队,后者只需要修改信息,不需要重新上传应用. 1.应用内包含检查更新功能 iOS ...
【应用笔记】【AN004】VB环境下基于RS-485的4-20mA电流采集
版本:第一版作者:周新稳杨帅日期:20160226 =========================== 本资料高清PDF 下载: http://pan.baidu.com/s/1c1uuhLQ ...

JQuery基础三

JQuery基础三的更多相关文章

随机推荐

热门专题