jquery对ajax的应用

注意在设置ajax时,需要服务器环境。

load()通过ajax请求加载服务器中的数据,并把返回的数据放在指定的元素中。

load(url,[data],[calback])

url:为加载服务器地址

data:为可选项,为请求时发送的数据

calback:为数据请求成功后,执行的回调函数

[cce_js]
<div id="divtest">
            <div class="title">
                <span class="fl">我最爱吃的水果</span> 
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul></ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $("ul")
                    .html("<img src='Images/Loading.gif' alt=''/>")
                    .load("http://www.imooc.com/data/fruit_part.html",function() {
                        $this.attr("disabled", "true");
                    });
                })
            });
        </script>
[/cce_js]

getJSON() 通过Ajax异步请求获取服务器中的数组,并对获取的数据进行解析,显示在页面中,

jQuery.getJSON(url,[data],[calback])

$.getJSON(url,[data],[calback])

url:是请求加油json文件的服务器地址,

data:是请求时发送的数据

calback:是请求成功后,执行的回调整函数

[cce]
http://www.imooc.com/data/sport.json 内容
[{ 
  "name": "足球"
},{ 
  "name": "散步"
},{ 
  "name": "篮球"
},{ 
  "name": "乒乓球"
},{ 
  "name": "骑自行车"
}]

[/cce]
[cce_js]
<div id="divtest">
            <div class="title">
                <span class="fl">我最喜欢的一项运动</span> 
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul></ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.getJSON("http://www.imooc.com/data/sport.json",function(data) {
                        $this.attr("disabled", "true");
                        $.each(data, function (index, sport) {
                            if(index==3)
                            $("ul").append("<li>" + sport["name"] + "</li>");//遍历json文件
                        });
    
                    });
                })
            });
        </script>
[/cce_js]

getScript() 异步请求并执行服务器中的javascript文件

jQuery.getScript(url,[calback])

$.getScript(url,[calback])

url:服务器请求地址

calback:请求成功后执行的回调函数

[cce]
http://www.imooc.com/data/sport_f.js 内容
var data = [{
    "name": "足球"
}, {
    "name": "散步"
}, {
    "name": "篮球"
}, {
    "name": "乒乓球"
}, {
    "name": "骑自行车"
}];
$.each(data, function (index, sport) {
    if (index == 1)
        $("ul").append("<li>" + sport["name"] + "</li>");
});
[/cce]
[cce]
 <div id="divtest">
            <div class="title">
                <span class="fl">我最喜欢的运动</span> 
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul></ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.getScript("http://www.imooc.com/data/sport_f.js",function() {
                        $this.attr("disabled", "true");
                    });
                })
            });
        </script>
[/cce]

get() 以GET方式向服务器请求数据,并通过方法中的回调函数的参数返回请求的数据。

$.get(url,[calback])

url:服务器请求地址

calback:请求成功后执行的回调函数

[cce]
http://www.imooc.com/data/info_f.php 内容:
<?php
echo json_encde(array("name"=>"白富美","say"=>"咱们结婚吧!");
?>)
[/cce]
[cce_js]
 <div id="divtest">
            <div class="title">
                <span class="fl">我的个人资料</span> 
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul></ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.get("http://www.imooc.com/data/info_f.php",function(data){
                        $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫:" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说:" + data.say + "</li>");
                    }, "json");
                })
            });
        </script>
[/cce_js]

post() 以POST方式向服务器发送数据,服务器收到数据后,进行处理,并将处理毕返回页面

$.post(url,[data],[calback])

url:服务器请求地址

data:向服务器请求时发送的数据

calback:请求成功后执行的回调函数

[cce_php]
<?php
$num=$_POST["num"];
if($num>0) 
echo "大于0";
else 
echo "小于0";

?>
[/cce_php]
[cce_js]
 <div id="divtest">
            <div class="title">
                <span class="fl">检测数字是否大于0</span> 
                <span class="fr"><input id="btnCheck" type="button" value="检测" /></span>
            </div>
            <ul>
               <li>请求输入一个数字 <input id="txtNumber" type="text" size="12" /></li>
            </ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnCheck").bind("click", function () {
                    
                    $.post("http://www.imooc.com/data/check_f.php",{
                        num:$("#txtNumber").val()
                    },function (data) {
                        $("ul").append("<li>你输入的<b>  "
                        + $("#txtNumber").val() + " </b>是<b> "
                        + data + " </b></li>");
                    });
                })
            });
        </script>
[/cce_js]

serialize()将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求

$(selector).serialize()

序列化后生成生成标准URL编码,各元素间通过&号相联。

selector是一个或多个表单 中的元素或表单元素本身。

[cce_js]
<div id="divtest">
            <div class="title">
                <span class="fl">我的个人资料</span> 
                <span class="fr">
                    <input id="btnAction" type="button" value="序列化" />
                </span>
            </div>
            <form action="">
            <ul>
                <li>姓名:<input name="Text1" type="text" size="12" /></li>
                <li>
                    <select name="Select1">
                        <option value="0">男</option>
                        <option value="1">女</option>
                    </select>
                </li>
                <li><input name="Checkbox1" type="checkbox" />资料是否可见 </li>
                <li id="litest"></li>
            </ul>
            </form>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnAction").bind("click", function () {
                    $("li").html($("form").serialize());
                })
            })
        </script>
[/cce_js]

ajax() 是最底层,功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值。

jQuery.ajax([settings])

$.ajax([settings])

settings:是为发送请求时的配置对象,在该对象中url表示服务器请求的路径,data为请求时传递的数据,dataType是服务器返回的数据类型,success为请求成功的执行回调函数,type为发送数据请求的方式,默认为get.

[cce_js]
  <div id="divtest">
            <div class="title">
                <span class="fl">检测数字的奇偶性</span> 
                <span class="fr">
                    <input id="btnCheck" type="button" value="检测" />
                </span>
            </div>
            <ul>
               <li>请求输入一个数字 
                   <input id="txtNumber" type="text" size="12" />
               </li>
            </ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnCheck").bind("click", function () {
                    $.ajax({
                        url:"http://www.imooc.com/data/check.php",
                        data: { num: $("#txtNumber").val() },
                        dataType:"text",
                        success: function (data) {
                            $("ul").append("<li>你输入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                        }
                    });
                })
            });
        </script>
[/cce_js]

ajaxSetup() 可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项。

jQuery.ajaxSetup([options])

$.ajaxSetup([options])

options是一个对象,通过该对象设置Ajax请求的全局选项值

[cce_js]
<div id="divtest">
            <div class="title">
                <span class="fl">奇偶性和是否大于0</span> 
                <span class="fr">
                    <input id="btnShow_1" type="button" value="验证1" />
                    <input id="btnShow_2" type="button" value="验证2" />
                </span>
            </div>
            <ul>
               <li>请求输入一个数字 
                   <input id="txtNumber" type="text" size="12" />
               </li>
            </ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $.ajaxSetup({
                    dataType:"text",
                    success:function(data){
                        $("ul").append("<li>你输入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                    }
                });
                $("#btnShow_1").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: "http://www.imooc.com/data/check.php"
                    });
                })
                $("#btnShow_2").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: "http://www.imooc.com/data/check_f.php"
                    });
                })
            });
        </script>
[/cce_js]

ajaxStart() 在Ajax请求之发出之前触发函数

$(selector).ajaxStart(function())

ajaxStop() 在Ajax请求之后触发函数

$(selector).ajaxStop(function());

[cce_js]
 <div id="divtest">
            <div class="title">
                <span class="fl">加载一段文字</span> 
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul>
               <li id="divload"></li>
            </ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#divload").ajaxStart(function() {
                    $(this).html("正在请求数据...");
                });
                $("#divload").ajaxStop(function() {
                    $(this).html("数据请求完成!");
                });
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.ajax({
                        url: "http://www.imooc.com/data/info_f.php",
                        dataType: "json",
                        success: function (data) {
                            $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫:" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说:" + data.say + "</li>");
                        }
                    });
                })
            });
        </script>
[/cce_js]

 

11111
11
1
1
1

jquery定义两个按钮,分别控制一个DIV的左移或右移

定义两个按钮,分别控制一个DIV的左移或右移

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <style>
    div {
        position: relative;
        left: 500px;
    }
    
    span {
        position: relative;
        left: 500px;
    }
    </style>
</head>

<body>
    <div>我爱祖国</div>
    <span>我爱祖国</span>
    <button id="left1">左移</button>
    <button id="right1">右移</button>
    <script>
    $("#left1").bind("click", function() {
        $("div").animate({
            left: "-=50px"
        }, 3000, function() {
            $(this).stop();
            $("span").html("执行完成");

        })
    })

    $("#right1").bind("click", function() {
        $("div").animate({
            left: "+=50px"
        }, 3000, function() {
             $(this).stop();
            $("span").html("执行完成")

        })
    })

    </script>
</body>

</html>

[/cce_js]

jquery 动画特效

show() 显示页面中的元素

$(selecter).show(speed,[calback])

hide() 隐藏页面中的元素

$(selecter).hide(speed,[calback])

speed设置显示或隐藏的速度值,可以为slow,fast或毫秒

calback为可选参数,是隐藏或显示动作执行完成后调用的函数名

[cce_js]
 <h3>使用show()和hide()方法显示和隐藏元素</h3>
        <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").hide();
                        $("#hidval").val(1);
                    } else {
                        $("ul").show();
                        $("#hidval").val(0);
                    }
                });
            });
        </script>
[/cce_js]

增加动态效果案例:

[cce_js]
dy>
        <h3>show()和hide()方法动画方式显示和隐藏元素</h3>
        <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").hide(300,function() {
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").show(300,function() {
                            $("#hidval").val(0);
                        })
                    }
                })
            });
        </script>
[/cce_js]

toggle()实现动画切换效果

$(selector).toggle(speed,[calback])

speed 动画速度

calback为可选项,在切换后执行的函数

[cce_js]
 <h3>toggle()方法的动画切换效果</h3>
        <div>
            <h4>
               <span class="fl">我喜欢吃的水果</span>
               <span class="fr" id="spnTip">显示</span>
            </h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $("ul").toggle(300,function() {
                     $spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");
                    })
                });
            });
        </script>
[/cce_js]

slideUp() 向上划动效果,仅适用于隐藏的元素

$(selector).slideUp(speed,[calback])

sideDown() 向下划动效果。仅适用于隐藏的元素

$(selector).slideDown(speed,[calback])

speed为滑动的速度,calback是滑动后的回调函数,注意:滑动改变的是元素的高度。

[cce_js]
<h3>使用slideUp()和slideDown()方法的滑动效果</h3>
        <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").slideUp(3000,function() {
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").slideDown(3000,function() {
                            $("#hidval").val(0);
                        })
                    }
                })
            });
        </script>
[/cce_js]

slideToggle()切换slideUp()和slideDown(),可以代替那两个方法如果元素已经向上滑动,那么元素自动向下滑动,如果元素在向下滑动,那么元素自动向上滑动。

$(selector).slideToggle(speed,[calback])

[cce_js]
 <h3>使用slideToggle()方法切换滑动效果</h3>
        <div>
            <h4>
               <span class="fl">我喜欢吃的水果</span>
               <span class="fr" id="spnTip">向下滑</span></h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $("ul").slideToggle(3000,function() {
               $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑");
                    })
                })
            });
        </script>
[/cce_js]

fadeIn() 元素淡入效果(显示)

$(selector).fadeIn(speed,[calback])

fadeOut()元素淡出效果(隐藏)

$(selector).fadeOut(speed,[calback])

speed是速度,calback是回调函数

淡入淡出改变的是清晰度

[cce_js]
<h3>使用fadeIn()与fadeOut()方法实现元素淡入淡出的效果</h3>
        <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").fadeIn(1000,function() {
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").fadeOut(1000,function() {
                            $("#hidval").val(0);
                        })
                    }
                })
            });
        </script>
[/cce_js]

fadeTo()设置淡入淡出效果的不透明度

$(selector).fadeTo(speed,opacity,[calback]

speed是速度,opacity是不透明值,calback是回调函数

[cce_js]
 <h3>使用fadeTo()方法设置淡入淡出效果的不透明度</h3>
        <span class="red"></span><span class="orange"></span><span class="blue"></span>
        
        <script type="text/javascript">
            $(function () {
                $("span").each(function (index) {
                    switch (index) {
                        case 0:
                            $(this).fadeTo(3000,0.2)
                            break;
                        case 1:
                            $(this).fadeTo(3000,0.4)
                            break;
                        case 2:
                            $(this).fadeTo(3000,0.6)
                            break;
                    }
                });
            });
        </script>
[/cce_js]

animate()简单的动画效果

$(selector).animate({params},speed,[calback])

params:制作动画效果的CSS属性名和值。speed是速度,calback动画执行后的回调函数。

[cce_js]
<body>
        <h3>制作简单的动画效果</h3>
        <span></span>
        <div id="tip"></div>
        
        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    width: "80px",
                    height: "80px"
                },
                3000, function () {
                    $("#tip").html("执行完成!");
                });
            });
        </script>
[/cce_js]

animate()设置可以移动位置的动画,在移动之前,需要将被移动的元素CSS:position值改为“absolute”或”relative”,否则无法移动

[cce_js]
 <h3>制作移动位置的动画</h3>
        <span></span>
        <div id="tip"></div>
        
        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $("span").animate({
                        height: '+=30px',
                        width: '+=30px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
            });
        </script>
<style>
span
{
 position:absolute;
 width:80px;
 height:80px;
 border: solid 1px #ccc;
 margin: 0px 8px;
 background-color: Red;
 color:White;
 vertical-align:middle
}
</style>
[/cce_js]

stop()停止当前所有动画效果

$(selector).stop([clearQueue]),[goToEnd])

clearQueue和goToEnd都是布尔值

clearQueue表示是否停止正在执行的动画

goToend表示是否完成正在执行的动画

[cce_js]
<h3>调用stop()方法停止当前所有动画效果</h3>
        <span></span>
        <input id="btnStop" type="button" value="停止" />
        <div id="tip"></div>
        
        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: '+=60px',
                        width: '+=60px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
                $("#btnStop").bind("click", function () {
                   $("span").stop();
                    $("#tip").html("执行停止!");
                });
            });
        </script>
[/cce_js]

delay()延时执行动画

$(selector).delay(duration)

duration延时的时间,单位是毫秒

[cce_js]
 <h3>调用delay()方法延时执行动画效果</h3>
        <span></span>
        <input id="btnStop" type="button" value="延时" />
        <div id="tip"></div>
        
        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: '+=60px',
                        width: '+=60px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
                $("#btnStop").bind("click", function () {
                    $("span").delay(3000)
                    $("#tip").html("正在延时!");
                });
            });
        </script>
[/cce_js]

1
1
1

转:Web开发者推荐的最佳HTML5/CSS3代码生成器

HTML5和CSS3是一入门就能用的最好的语言,最简单同时也最好的的方式就是直接开始做!那么生成器就在自动生成代码时扮演者重要角色,它们非常适用于那些要做很多重复性工作的开发人员和设计人员,生成器可以帮他们解决这些繁琐的工作。在本文中,我们精心挑选了一些经验丰富开发人员和设计人员常用HTML5、CSS3代码生成器。
HTML5代码生成器
网上有五六种可以生成优质代码的HTML5生成器,其中的真谛是HTML5样板文件,我们不要自以为然的把样板文件当成是生成器,虽说这样,大多数开发者还是把它当作是他们第一个网站的模板。回到主题,要找到一个好的HTML5生成器并不是那么容易的事,因为网上有成千上万的网站提供各种各样的代码生成器。正因为如此,我们经常会被搞的稀里糊涂。不过,我们还是设法找到了一些比较好的生成器在本文中分享给大家。
Shikiryu HTML5生成器
Shikiryu HTML5生成器可以让你为应用程序添加一个中介器,而且很多人都喜欢这么用。你可以在模板里面增加特性和修改布局。事实上,这个是非常实用的。开发人员更钟爱这个生成器,因为相比其他的生成器,这个语义性更强,更易懂。
Initializr生成器
如果你要新建一个以HTML5样板文件为基础的项目,这将是你要开始你项目的好工具。它可以生成一个简洁的可自定义的模板。当你从各式各样的框架和类库中选择或是自定义模板时,模板就会以压缩文件的格式下载下来,然后你就可以拿这些代码来设计你的网站了。
Quackit HTML5生成器
Quackit 不仅可以给你提供一系列的代码,还允许你输入你的所有信息。这对初学者非常有帮助。所以,如果一开始你学的是CSS和HTML,你就可以用这个生成器来简化你的工作任务了。这些生成器可以说是非常棒的,因为它们专注于圆角边框,阴影,颜色渐变以及和html5模板的设计。
Modernizr生成器
Modernizr是一个开源的脚本类库,它可以帮助你建立HTML5和CSS3来使你的网站更强大。这样你就可以创建一些很好的,而且可以完美运行你代码的网站,不管用户用的是什么样的浏览器或是什么样的设备,都能优雅的展现。
CSS 代码生成器
CSS3 Maker
你可以很容易在网上找到这个生成器。一旦你开始用这个生成器,我相信你一定会完全依赖它的。有了它,你可以做很多动画、自定义字体、文本滚动、盒子模型阴影、圆角边框、文字阴影、过渡、渐变等等方面的效果。
me
个人而言,我是很喜欢这个生成器, CSS3.me是由设计师Eric Hoffman设计出来的。它使用起来很简便,是一个轻量级的、个性化而又功能强大的生成器。你可以用它来设置透明度、下拉阴影,改变和设置圆角边框,增加渐变效果等等。
CSS3-Tricks 按钮生成器
这是一个很经典古老的按钮生成器,它是非常线性的,而且没有图形界面。你可以在你的项目中用它来生成没有任何效果的按钮。
图片边框和圆角边框生成器
1.圆角边框生成器(Border-Radius)
这是个非常好的、轻量级的工具,主要拿来设置边角的圆角边框。一旦完成了边角设置,就可以在浏览器上检查你想要包含的前缀,这些都是已经完成了的。是个界面很简洁友好的生成器。
2.图片边框生成器(Border-Image)
假如你要画一个箭头或是一个三角形时,想让生成器把它平铺到你的网站边框或者是元素边框。这是最好用的图片边框生成器,当它要复制图片去找到最合适的边框样式时候。也就是说,届时,你就可以操作设置它的大小、偏移量,可以平铺这张图片等等。开发者经常喜欢拿它来设置背景。
CSS3渐变效果生成器
Color Zilla Gradient 生成器
此编辑器绑定了非常多的特性,用起来也非常容易。你可以单单稍微移动一下画笔就可以观察到他们的变化。它也可以在浏览器上直接使用,非常适合在网页上开发的开发人员和设计人员。
@fontface 生成器
这个生成器可以让你上传网页上的字体或是系统里面的字体。然后生成一个可以拿来用的输出文件。这个生成器给字体属性生成了一个CSS文件,然后字体就可以显示在HTML文件里了。这是一个非常好的检查字体工具,尤其是你没有足够的时间去创建一个使用许多重复性字体的完整的网站时候。
CSS3下拉阴影生成器
Webestools 阴影生成器
如果你想要对下拉阴影效果有更深、更具体的运用,这个生成器是我最强烈推荐的。因为它自带调节栏,外部阴影,内部阴影的设置,还可以设置阴影的颜色,偏移量和很多你意想不到的炫酷效果。
HTML5与CSS3相互协调使用,可以轻松提供给你最好的编码技术。你可能经常要找可以减少你工作量的工具,这样你就可以把更多精力放在主要工作上,就不用花那么多精力在一下繁琐的小事上,像按钮或盒模型的样式。网上有大把你可以用的工具,以上列出的只是最常用的代码生成器。不过,这些工具好不好,就看你对它标准是怎样的了。希望本文对你有意想不到的帮助!

jquery 事件处理方法

ready()页面加载时触发事件:

当页面DOM结构加载后触发ready(),onLoad()在页面全部元素加载成功后触发。

$(document).ready(function(){}) 等价于 $(function(){});

[cce_js]
 <h3>页面载入时触发ready()事件</h3>
        <div id="tip"></div>
        <input id="btntest" type="button" value="点下我" />
        
        <script type="text/javascript">
            $().ready(function() {
                $("#btntest").bind("click", function () {
                    $("#tip").html("我被点击了!");
                });
            });
        </script>
[/cce_js]

bind() 绑定元素的事件

$(selector).bind(event,[data] function)

event是事件名称。多个事件可以使用空格隔开,function是事件执行函数

[cce_js]
<h3>bind()方法绑多个事件</h3>
        <input id="btntest" type="button" value="点击或移出就不可用了" />
        
        <script type="text/javascript">
            $(function () {
                $("#btntest").bind("click", function () {
                    $(this).attr("disabled", "true");
                })
            });
        </script>
[/cce_js]

hover() 切换鼠标事件

当鼠标移动到所选元素上执行第一个函数,当鼠标移出所选元素时执行第二个函数

$(selector).hover(over,out);

over移动到触发,out移出时触发

[cce_js]
 <p id="test">我爱祖国</p>
    <script>
    $("#test").hover( function(){
        $("#test").css("color","red");
    },//移到时触发
    function(){
        $("#test").css("color","blue");
    })//移开时触发
    </script>
[/cce_js]

toggle()绑定click多个函数只支持jquery1.8.2.

在元素的单击事件click中绑定两个或多个函数。可以实现元素的隐藏与显示。

$(selector).toggle(function1(),function2(),…)

[cce_js]
<h3>toggle()方法绑定多个函数</h3>
        <input id="btntest" type="button" value="点一下我" />
        <div>我是动态显示的</div>
        
        <script type="text/javascript">
            $(function () {
                $("#btntest").bind("click",
                function () {
                    $("div").toggle(function(){
                        $("this").css("display","none");
                    }),
                function (){
                    $("this").css("display","inline-tag")
                }
                })
            });
        </script>
[/cce_js]

unbind()移除元素已经绑定的事件

$(“selector”).unbind(event,fun)

event是需要移除的事件名称,多个可以使用空格隔开,fun是事件执行时调用的函数名称,如果unbind中没有参数。那么将删除元素中所有事件

[cce_js]
<h3>unbind()移除绑定的事件</h3>
        <input id="btntest" type="button" value="移除事件" />
        <div>土豪,咱们交个朋友吧</div>
        
        <script type="text/javascript">
            $(function () {
                $("div").bind("click",
                function () {
                    $(this).removeClass("backcolor").addClass("color");
                }).bind("dblclick", function () {
                    $(this).removeClass("color").addClass("backcolor");
                })
                $("#btntest").bind("click", function () {
                    $("div").unbind();
                    $(this).attr("disabled", "true");
                });
            });
        </script>
[/cce_js]

one()方法绑定元素的一次性事件

可以绑定任何事件,但只会触发一次

$(selector).one(event,[data],fun)

[cce_js]
 <h3>one()方法执行一次绑定事件</h3>
        <div>请点击我一下</div>
        
        <script type="text/javascript">
            $(function () {
                var intI = 7;
                $("div").one("click", function () {
                    intI++;
                    $(this).css("font-size", intI + "px");
                })
            });
        </script>
[/cce_js]

trigger()手动触发指定事件

$(selector).trigger(event)

event为需要手动触发事件名称

[cce_js]
 <h3>trigger()手动触发事件</h3>
        <div>土豪,咱们交个朋友吧</div>
        
        <script type="text/javascript">
            $(function () {
                $("div").bind("change-color", function () {
                    $(this).addClass("color");
                });
                $("div").trigger("change-color");
            });
        </script>
[/cce_js]

focus和blur 文本框事件

focus事件在元素获取焦点时触发

blur事件在元素离开焦点时触发

[cce_js]
<form action="">
        <input type="text" id="txtest" value="" />
    </form>
    <div></div>
    <script type="text/javascript">
    $(function(){
        $("input").bind("focus",function(){
            $("div").html("请输入您的姓名");
        })
        $("input").bind("blur",function(){
            $("div").html("请及时保存");
        })
    })
    </script>
[/cce_js]

判断输入是否为空

[cce_js]
 <h3>表单中文本框的focus和blur事件</h3>
        <input id="txtest" type="text" value="" />
        <div></div>
        
        <script type="text/javascript">
            $(function () {
                $("input").bind("focus", function () {
                    $("div").html("请输入您的姓名!");
                })
                $("input").bind("blur", function () {
                    if ($(this).val().length == 0)
                        $("div").html("你的名称不能为空!");
                })
            });
        </script>
[/cce_js]

change下拉列表框事件

当下拉列表中的值发生变化时会触发change事件

[cce_js]
 <h3>下拉列表的change事件</h3>
        <select id="seltest">
            <option value="葡萄">葡萄</option>
            <option value="苹果">苹果</option>
            <option value="荔枝">荔枝</option>
            <option value="香焦">香焦</option>
        </select>
        
        <script type="text/javascript">
            $(function () {
                $("select").bind("change", function () {
                    if ($(this).val() == "苹果")
                        $(this).css("background-color", "red");
                    else
                        $(this).css("background-color", "green");
                })
            });
        </script>
[/cce_js]

live()方法绑定元素事件。1.8可用,1.9不支持

$(selector).live(event,[data],fun)

event是事件名称,data是触发事件时携带的数据,fun为触发事件的函数。

[cce_js]
  <h3>live()方法绑多个事件</h3>
        
        <script type="text/javascript">
            $(function () {
                $("#btntest").live("click mouseout", function () {
                    $(this).attr("disabled", "true");
                })
                $("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />");
            });
        </script>
[/cce_js]

1111
11
111

javascript 取出数组下标自动加后代码

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    var oldArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

    function myfun() {
        var n = myform.myform.value - 0;
        var arr1 = oldArr.slice(0, n);
        var arr2 = oldArr.slice(n + 1, 10);
        var arr3 = oldArr.slice(n, n + 1);
        var newArr = arr1.concat(arr2, arr3);
        document.write("新的数组是:");
        for (var i = 0; i < newArr.length; i++) {
            document.write(newArr[i] + ",");
        };
    }
    </script>
</head>

<body>
    原数组是:
    <script>
    for (var i = 0; i < oldArr.length; i++) {
        document.write(oldArr[i] + ",")
    };
    </script>
    <br>请输入需要取出的下标:
    <form action="" name="myform">
        <input type="text" name="myform" />
        <input type="button" value="确定" onclick="myfun()" />
    </form>
</body>

</html>

[/cce_js]

jquery 修改元素内容和样式

attr(“属性名”,”属性值”) 获取或修改元素的属性值

注意,当值为true或false时不需要加引号

[cce_js]
<h3>attr()方法设置元素属性</h3>
        <a href="http://127.0.0.1" id="a1">点我就变</a>
        <div>我改变后的地址是:<span id="tip"></span></div>
        
        <script type="text/javascript">
            $("#a1").attr("href","www.imooc.com");//修改
            var $url = $("#a1").attr("href");//获取
            $("#tip").html($url);
        </script>
[/cce_js]

html()和text() 获取或修改元素内容

区别:html()会将内容中html语句做为html输出,text()会将内容中的html语句做为文本输出

[cce_js]
 <h3>html()和text()方法设置元素内容</h3>
        <div id="html"></div>
        <div id="text"></div>
        
        <script type="text/javascript">
            var $content = "<b>唉,我又变胖了!</b>";
            $("#html").html($content);//唉,我又变胖了!
            $("#text").text($content);//<b>唉,我又变胖了!</b>
        </script>
[/cce_js]

addClass() 和 css() 修改元素样式。

addClass(样式表class名称)

css(“属性”,”值”):设置单个样式

css({“属性1″:”值1″,”属性2″:”值2″});设置多个样式

[cce_js]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <style>
    .aa {
        color:red;
    }
    </style>
</head>
<body>
<p>我爱祖国</p>
<span>我爱祖国</span>
    <script>
    $("p").addClass("aa");
    $("span").css("color","green");
    </script>
</body>
</html>
[/cce_js]

removeAttr(name)和removeClass(class) 移除属性和样式

[cce_js]
<h3>removeClass()方法移除元素样式</h3>
        <div id="content" class="blue white">我脱下了一件蓝色外衣</div>
        
        <script type="text/javascript">
            $("#content").removeClass("blue white");
        </script>
[/cce_js]

append(content) 追加元素内容

content可以是HTML语句也可以是返回HTML语句的函数。

[cce_js]
<h3>append()方法追加内容</h3>
        
        <script type="text/javascript">
            function rethtml() {
                var $html = "<div id='test' title='hi'>我是调用函数创建的</div>"
                return $html;
            }
            $("body").append(rethtml());
        </script>
[/cce_js]

appendTo() 向被选中的元素内插入内容

$(content).appendTo(selector)

content是需要插入的内容,selector是选中的元素,默认是尾部

[cce_js]
 <h3>appendTo()方法插入内容</h3>
        <div>
            <span class="green">小乌龟</span>
        </div>
        
        <script type="text/javascript">
            var $html = "<span class='red'>小青蛙</span>"
            $($html).appendTo("div");
        </script>
[/cce_js]

before()和after() 在元素前后插入内容

$(selector).before(content) 在元素前插入

$(selector).after(content) 在元素后插入

其中content是需要插入的内容,selector是选中的元素

[cce_js]
 <h3>after()方法在元素之后插入内容</h3>
        <span class="green">我们交个朋友吧!</span>
        
        <script type="text/javascript">
            var $html = "<span class='red'>兄弟。</span>"
            $("span").after($html);
        </script>
[/cce_js]

clone()复制一个元素

$(selector).clone()

selector可以是一个元素或HTML内容

[cce_js]
 <h3>使用clone()方法复制元素</h3>
        <span class="red" title="hi">我是美猴王</span>
        
        <script type="text/javascript">
            $("body").append($(".red").clone());
        </script>
[/cce_js]

replaceWith()和replaceAll() 替换元素内容

$(selector).replaceWith(content)

$(content).replaceAll(selector)

content 是替换内容,selector是被替换的元素

[cce_js]
 <h3>使用replaceAll()方法替换元素内容</h3>
        <span class="green" title="hi">我是屌丝</span>
        
        <script type="text/javascript">
            var $html = "<span class='red' title='hi'>我是土豪</span>";
            $($html).replaceAll("span");
        </script>
[/cce_js]

wrap()和wrapInner()包裹元素和包裹元素内容

$(selector).wrap(wrapper)//包裹元素

$(selector).wrapInner(wrapper)//包裹元素内容

[cce]
<h3>使用wrapInner()方法包裹元素</h3>
        <span class="red" title='hi'>我的身体有点歪</span>
        
        <script type="text/javascript">
            $(".red").wrapInner("<i></i>");
        </script>
[/cce]

each()遍历元素

$(selector).each(function(index))

function 是回调函数,index是遍历元素的序号,从0开始

[cce_js]
 <h3>使用each()方法遍历元素</h3>
        <span class="green">香蕉</span>
        <span class="green">桃子</span>
        <span class="green">葡萄</span>
        <span class="green">荔枝</span>
        
        <script type="text/javascript">
            $("span").each(function (index) {
                if (index == 1) {
                    $(this).attr("class", "red");//$(this)调用自身。
                }
            });
        </script>
[/cce_js]

remove()和empty() 删除元素

remove(“条件”)删除元素本身和子元素

empty(“条件”)删除元素子元素

[cce_js]
   <h3>使用empty()方法删除元素</h3>
        <span class="green">香蕉</span>
        <span class="green">桃子</span>
        <span class="green">葡萄</span>
        <span class="green">荔枝</span>
        
        <script type="text/javascript">
            $("span").empty();
        </script>
[/cce_js]

jquery $()选择器

$() 得到元素,等价于jQuery() 是其的简写形式。只有当$()和其它语言冲突时会会使用jQuery()。

$(“#id”) 通过id找到元素

html(“内容”) 更改元素innerHTML内容

[cce_js]
<div id="divtest">div的内容</div>
        <div id="default"></div>
        <script type="text/javascript">
            $("#default").html($("#divtest").html());
        </script>
[/cce_js]

#(“元素名”) 通过元素名找到元素

css(“命令”,”内容”) 改变或提取元素CSS样式

attr(“属性”,”值”) 改变或提取元素属性内容;

[cce_js]
<button id="btntest">点我</button>
        <script type="text/javascript">
            $("button").attr("disabled","true");
        </script>
[/cce_js]

$(“.类名”) 通过元素类名找元素

[cce_js]
<div class="red">立正,向我这边看齐</div>
        <div class="green">我先歇歇脚</div>
        
        <script type="text/javascript">
            var $redHTML = $(".red").html();
            $(".green").html($redHTML);
        </script>
[/cce_js]

$(“*”) 获取页面上所有元素也可以获取其它元素中的子元素,注意这个选择器在某些浏览器处理时会缓慢。

如:$(“div *”) 获取div下的所有子元素

$(“sele1,sele2,selen”) 多重选择,可以输入多个选择器,每个选择使用,号分隔。

[cce_js]
 <div class="red">选我吧!我是red</div>
        <div class="green">选我吧!我是green</div>
        <div class="blue">选我吧!我是blue</div>
        
        <script type="text/javascript">
            $(".red,.green").html("hi,我们的样子很美哦!");
        </script>
[/cce_js]

$(“父元素 后代元素”) 层次选择器,快速定位某一层的一个或多个元素,父和后代元素之前使用空格格开。

[cce_js]
<div>
            <p>
               <label></label>
            </p>
            <label></label>
        </div>
        
        <script type="text/javascript">
            $("div label").css("background-color","blue");
        </script>
[/cce_js]

 

$(“父元素>子元素”) 获取父的子元素。中间使用>号

[cce_js]
 <div>
            码农家族
            <p>
                <label></label>
            </p>
            <label></label>
            <label></label>
        </div>
        <label></label>
        
        <script type="text/javascript">
            $("div>label").css("border", "solid 5px red");
        </script>
[/cce_js]

$(“prev + next”) 获取相邻下一个元素

[cce_js]
<div>
            码农家族
            <label></label>
            <p></p>
            <label></label>
            <label></label>
        </div>
        <label></label>
        
        <script type="text/javascript">
            $("p+label").css("background-color","red");
        </script>
[/cce_js]

#(“prev ~ siblings”) 获取prev之多个同辈元素

 

[cce_js]
 <div>
            码农家族
            <label></label>
            <p></p>
            <label></label>
            <label></label>
        </div>
        <label></label>
        
        <script type="text/javascript">
            $("p~label").css("border", "solid 1px red");
            $("p~label").html("我们都是p先生的粉丝");
        </script>
[/cce_js]

:first 过滤选择器,获取元素集合中第一个元素

:last 过滤选择器,获取元素集合中最后一个元素

$(“li:first”) 获取第一个li元素

:ep(index) 选择任意一个标签元素,index是索引号,从0开始;

[cce_js]
 <div>改变中间行"葡萄"背景颜色:</div>
        <ol>
        <li>橘子</li>
        <li>香蕉</li>
        <li>葡萄</li>
        <li>苹果</li>
        <li>西瓜</li>
        </ol>
        
        <script type="text/javascript">
            $("li:eq(2)").css("background-color", "#60F");
        </script>
[/cce_js]

:contains(“text”) 获取包含text文字信息的元素

[cce_js]
<div>改变包含"jQuery"字符内容的背景色:</div>
        <ol>
            <li>强大的"jQuery"</li>
            <li>"javascript"也很实用</li>
            <li>"jQuery"前端必学</li>
            <li>"java"是一种开发语言</li>
            <li>前端利器——"jQuery"</li>
        </ol>
        
        <script type="text/javascript">
            $("li:contains('jQuery')").css("background", "green");
        </script>
[/cce_js]

:has(“元素名”) 获取包含所有元素名的元素。

[cce_js]
 <div>改变包含"label"元素的背景色:</div>
        <ol>
            <li><p>我是P先生</p></li>
            <li><label>L妹纸就是我</label></li>
            <li><p>我也是P先生</p></li>
            <li><label>我也是L妹纸哦</label></li>
            <li><p>P先生就是我哦</p></li>
        </ol>
        
         <script type="text/javascript">
            $("li:has('label')").css("background-color", "blue");
        </script>
[/cce_js]

:hidden 获取不可见的元素

val() 获取参数中value的值。

[cce_js]
 <h3>显示隐藏元素的内容</h3>
        <input id="hidstr" type="hidden" value="我已隐藏起来"/>
        <div></div>
        
        <script type="text/javascript">
        var $strHTML = $("input:hidden").val();
        $("div").html($strHTML);
    </script>
[/cce_js]

:visible 获取所有可见的元素

[cce_js]
<ul>
            <li style="display:none">橘子</li>
            <li style="display:block">香蕉</li>
            <li style="display:">葡萄</li>
            <li>苹果</li>
            <li style="display:none">西瓜</li>
        </ul>
        
        <script type="text/javascript">
            $("li:visible").css("background-color","blue");
        </script>
[/cce_js]

[属性名=属性值] 属性选择器,获取相同属性的元素

$(“li:[title=’thb’]”)

[cce_js]
<ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="水果">苹果</li>
            <li title="水果">西瓜</li>
        </ul>
        
        <script type="text/javascript">
            $("li[title='蔬菜']").css("background-color", "green");
        </script>
[/cce_js]

[属性名!=属性值] 属性选择器,获取不包含属性名或不相同属性值的元素

[cce_js]
<ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="水果">苹果</li>
            <li title="水果">西瓜</li>
        </ul>
        
        <script type="text/javascript">
            $("li[title!='蔬菜']").css("background-color", "green");
        </script>
[/cce_js]

[属性名*=属性值] 属性选择器,获取包含属性值的多个元素。

[cce_js]
<ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="人参果">小西红柿</li>
            <li title="水果">西瓜</li>
        </ul>
        
        <script type="text/javascript">
            $("li[title*='果']").css("background-color", "green");
        </script>
[/cce_js]

:first-child 获取每个父元素的子元素是一个集合

[cce_js]
 <h3>改变每个"蔬菜水果"中第一行的背景色</h3>
        <ol>
            <li>芹菜</li>
            <li>茄子</li>
            <li>萝卜</li>
            <li>大白菜</li>
            <li>西红柿</li>
        </ol>
        <ol>
            <li>橘子</li>
            <li>香蕉</li>
            <li>葡萄</li>
            <li>苹果</li>
            <li>西瓜</li>
        </ol>
        
        <script type="text/javascript">
            $("li:first-child").css("background-color", "green");
        </script>
[/cce_js]

:last-child 获取每个父元素的最后一个子元素是一个集合。

[cce_js]
 <h3>改变每个"蔬菜水果"中最后一行的背景色</h3>
        <ol>
            <li>芹菜</li>
            <li>茄子</li>
            <li>萝卜</li>
            <li>大白菜</li>
            <li>西红柿</li>
        </ol>
        <ol>
            <li>橘子</li>
            <li>香蕉</li>
            <li>葡萄</li>
            <li>苹果</li>
            <li>西瓜</li>
        </ol>
        
        <script type="text/javascript">
           $("li:last-child").css("background-color", "blue");
        </script>
[/cce_js]

 

jquery 改变元素内容实例

jquery 改变元素内容实例:

[cce_js]
[cce]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>

<body>
    <ul>
        jquery
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    <a href="javascript:;">更多</a>
    <script>
    $(function() {
        $("li:eq(5),li:eq(6)").css("display", "none");
        $("a").click(function() {
            if ($("a").text() === "更多") {
                $("a").text("简化");
                $("li:eq(5),li:eq(6)").css("display", "list-item");
            } else {
                $("a").text("更多");
                $("li:eq(5),li:eq(6)").css("display", "none");
            }
        })
    })
    </script>
</body>

</html>

[/cce]
[/cce_js]