zoukankan      html  css  js  c++  java
  • 实用jQuery代码片段

    maco精选的一些jQuery代码,也许你从中可以举一反三
    [代码] [JavaScript]代码
    001<p>
    002    <h3><span >★ 使用jQuery来切换样式表</h3>
    003    <pre class="js">$("link[media='screen']").attr("href", "Alternative.css");</pre>
    004</p>
    005 
    006<p>
    007    <h3><span >★ jQuery检测浏览器类型</h3>
    008    <pre class="js">
    009        (if( $.browser.safari))
    010        (if ($.browser.msie && $.browser.version > 6 ))
    011        (if ($.browser.msie && $.browser.version <= 6 ))
    012        (if ($.browser.mozilla && $.browser.version >= '1.8' ))
    013    </pre>
    014</p>
    015 
    016<p>
    017    <h3><span >★ jQuery验证某个元素是否为空</h3>
    018    <pre class="js">
    019        if ($("#Demo").html()) { //null;}
    020    </pre>
    021</p>
    022 
    023<p>
    024    <h3><span >★ jQuery从集合中获得索引值</h3>
    025    <pre class="js">
    026        $("ul > li").click(function () {
    027            var index = $(this).prevAll().length;
    028        });
    029    </pre>
    030</p>
    031 
    032<p>
    033    <h3><span >★ jQuery选择被选中的option元素</h3>
    034    <pre class="js">
    035        $("#someElement").find("option:selected");
    036    </pre>
    037</p>
    038 
    039<p>
    040    <h3><span >★ jQuery为选择器绑定方法</h3>
    041    <pre class="js">
    042        $("table").delegate("td", "hover", function(){
    043            $(this).toggleClass("hover");
    044        });    //1.42版后,delegate替代live,因为它们提供了更好的上下文支持
    045    </pre>
    046</p>
    047 
    048<p>
    049    <h3><span >★ jQuery自动滚动到页面中的某区域(可以看做一个小插件)</h3>
    050    <pre class="js">
    051        jQuery.fn.Autoscroll = function(sel) {
    052            $('html,body').animate(
    053                {scrollTop: $(sel).offset().top},500
    054            );
    055        }      //调用:$("#area_name").Autoscroll();
    056    </pre>
    057</p>
    058 
    059<p>
    060    <h3><span >★ jQuery限制"TextArea"域中的字符数(可以看做一个小插件)</h3>
    061    <pre class="js">
    062         (function($) {
    063        jQuery.fn.maxLength = function(max){
    064                this.each(function(){
    065                var type = this.tagName.toLowerCase();
    066                var inputType = this.type ? this.type.toLowerCase() : null;    
    067                if (type == "input" && inputType == "text" || inputType == "password") {
    068                    //应用标准的maxLength
    069                    this.maxLength = max;
    070                }
    071                else
    072                    if (type == "textarea") {
    073                        this.onkeypress = function(e){
    074                            var ob = e || event;
    075                            var keyCode = ob.keyCode;
    076                            var hasSelection = document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
    077                           return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
    078                        };
    079                        this.onkeyup = function(){
    080                            if (this.value.length > max) {
    081                                this.value = this.value.substring(0, max);
    082                            }
    083                        };
    084                    }
    085            });
    086        })(jQuery);  //调用:$('#macoArea").maxLength(500);
    087    </pre>
    088</p>
    089 
    090<p>
    091    <h3><span >★ jQuery判断某个元素是否可见</h3>
    092    <pre class="js">
    093        if($("#macoArea").is(":visible") == "true") { //少年,别跑 }
    094   </pre>
    095</p>
    096 
    097<p>
    098    <h3><span >★ jQuery元素居中显示(可以看做一个小插件)</h3>
    099    <pre class="js">
    100        (function($) {
    101            jQuery.fn.center = function () {
    102                this.css('position','absolute');
    103                 this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
    104                 this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
    105                 return this;
    106            }
    107        })(jQuery);  //调用:$("#macoArea").center();
    108    </pre>
    109</p>
    110 
    111<p>
    112    <h3><span >★ jQuery使用.siblings()选择同辈元素</h3>
    113    <pre class="js">
    114        // 少年,你是否这样操作过
    115        $('#nav li').click(function(){
    116            $("#macoArea li").removeClass("current");
    117            $(this).addClass("current");
    118        });
    网站源码下载
    119        //这样做是不是会更好呢
    120        $("#nav li").click(function(){
    121            $(this).addClass("current").siblings().removeClass("current");
    122        });
    123    </pre>
    124</p>
    125 
    126<p>
    127    <h3><span >★ jQuery操作复选框全选反选</h3>
    128    <pre class="js">
    129       var sta = false; //你懂,全局东东
    130        $('a').click(function() {
    131            $("input[type=checkbox]").attr("checked",!sta);
    132            sta = !sta;
    133        });
    134    </pre>
    135</p>
    136 
    137<p>
    138   <h3><span >★ jQuery获得鼠标光标位置x和y</h3>
    139    <pre class="js">http://www.huiyi8.com/jiaoben/
    140        $(document).mousemove(function(e)}
    141            $(document).ready(function() {
    142                $().mousemove(function(e){
    143                $("#macoArea").html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
    144            });
    145        });
    146    </pre>
    147</p>
    148 
    149<p>
    150    <h3><span >★ jQuery解析XML</h3>
    151    <pre class="js">
    152        function ParseXml(xml) {
    153            $(xml).find("Node").each(function(){
    154                $("#macoArea").append($(this).attr("Author") + "");
    155            );
    156        }
    157    </pre>
    158</p>
    159 
    160<p>
    161    <h3><span >★ jQuery判断图像是否被完全加载进来</h3>
    162    <pre class="js">
    163        $('#demoImg').attr("src", "demo.jpg").load(function() {
    164            alert("是的,你看到的是真的");
    165        });
    166    </pre>
    167</p>
    168 
    169<p>
    170    <h3><span >★ jQuery让Cookie过期</h3>
    171    <pre class="js">
    172        var date = new Date();
    173        date.setTime(date.getTime() + (x * 60 * 1000));
    174        $.cookie("example", "foo", { expires: date });;
    175    </pre>
    176</p>
    177 
    178<p>
    179    <h3><span >★ jQuery禁止鼠标右键</h3>
    180    <pre class="js">
    181        $(function(){
    182            $(document).bind("contextmenu",function(e){
    183                return false;
    184            });
    185        });
    186    </pre>
    187</p>

  • 相关阅读:
    -mysql-锁2
    -mysql-锁机制分为表级锁和行级锁
    JDBC

    JDBC接口介绍之Statement
    JDBC
    -Java-泛型
    JDBC的介绍和数据库的连接
    2014年9月1日 总结
    MediaRecorder test
  • 原文地址:https://www.cnblogs.com/xkzy/p/3818752.html
Copyright © 2011-2022 走看看