日星网

jQuery 让scroll事件在滚动条停止时响应

发表于 2021年06月03日更新于 2021年06月17日分类于 JS,jQuery

用过jQuery的scroll事件的人都知道，在每次拖动滚动条的时候会相应的事件会相应多次，而在大多数情况下我们都只希望它在滚动条停止滚动的时候响应。经过多次测试，终于发现了一个比较好的解决方案，那就是通过setTimeout，给scroll加个延迟。例如用jQuery为页面加入 scroll事件，可以这样写：

var timeout = false;   
$(window).scroll(function(){   
    if (timeout){clearTimeout(timeout);}   
    timeout = setTimeout(function(){   
        //do   
    },100);   
);

javascript／css 检测移动设备方向的变化判断横竖屏幕

发表于 2021年06月03日更新于 2021年06月16日分类于 JS,jQuery

方法一：用触发手机的横屏和竖屏之间的切换的事件

window.addEventListener("orientationchange", function() {
// 宣布新方向的数值
alert(window.orientation);
}, false);

方法二：监听调整大小的改变

1
2
3

window.addEventListener("resize", function() {
// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度)  
}, false);

阅读全文 »

javascript 刷新页面方法大全

发表于 2021年06月03日更新于 2021年06月16日分类于 JS,jQuery

如何实现刷新当前页面呢？借助js你将无所不能。

1，reload 方法，该方法强迫浏览器刷新当前页面。
语法：location.reload([bForceGet])
参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)

2，replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。
语法： location.replace(URL)
通常使用： location.reload() 或者是 history.go(0) 来做。
此方法类似客户端点F5刷新页面，所以页面method=”post”时，会出现”网页过期”的提示。
因为Session的安全保护机制。
当调用 location.reload() 方法时， aspx页面此时在服务端内存里已经存在，因此必定是 IsPostback 的。
如果有这种应用：需要重新加载该页面，也就是说期望页面能够在服务端重新被创建，期望是 Not IsPostback 的。
这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。
代码： location.replace(location.href);

阅读全文 »

jQuery中使用load加载外部html文件，不执行JavaScript的解决方法

发表于 2021年06月03日更新于 2021年06月16日分类于 JS,jQuery

jquery中使用load加载外部html文件，不执行JavaScript的解决办法
最近自己在写jquery的扩展插件

遇到个问题就是，使用load加载外部的html文件，但是加载了想要加载的内容之后，发现JavaScript不执行，并没有加载进来，上网看了看解决办法

找到答案如下

load加载的外部文件会把Script部分删除掉

所以推荐使用$.get来异步加载外部页面，具体代码如下

$.get('partial.html', function(result){
    $result = $(result);

    $result.find('#content').appendTo('#new_content');
    $result.find('script').appendTo('#new_content');
}, 'html');

利用jQuery 对对象数组排序

发表于 2021年06月03日更新于 2021年06月16日分类于 JS,jQuery

利用jQuery对对象进行排序。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title>jQuery数组和字符串--对象数组排序</title>
    <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>

    <script type="text/javascript">

    <!--
    $(
        function()
        {
            var students =[
                {'sid':'ST001','sname':'张三','sage':18},
                {'sid':'ST004','sname':'赵六','sage':23},
                {'sid':'ST002','sname':'李四','sage':42},
                {'sid':'ST003','sname':'王五','sage':35}
            ];
            //表格显示
            $.each(students,
                function(index, value)
                {
                    $('#ia').append('<tr><td>' + value.sid +
                        '</td><td>' + value.sname +
                        '</td><td>' + value.sage + '</td></tr>');
                }
            );
            //按照SID排序
            var sidOrder = students.sort(
                function(a, b)
                {
                    if(a.sid < b.sid) return -1;
                    if(a.sid > b.sid) return 1;
                    return 0;
                }
            );
            $.each(sidOrder,
                function(index, value)
                {
                    $('#ib').append('<tr><td>' + value.sid +
                        '</td><td>' + value.sname +
                        '</td><td>' + value.sage + '</td></tr>')
                }
            );
            //按照SAGE排序
            var sageOrder = students.sort(
                function(a, b)
                {
                    return (a.sage - b.sage);
                }
            );
            $.each(sageOrder,
                function(index, value)
                {
                    $('#ic').append('<tr><td>' + value.sid +
                        '</td><td>' + value.sname +
                        '</td><td>' + value.sage + '</td></tr>')
                }
            );
        }
    );
    //-->
    </script>
  </head>
  <body>
    <h5>未排序对象数组：</h5>
    <table id='ia' border="1"></table>

    <h5>按照SID排序对象数组：</h5>
    <table id='ib' border="1"></table>

    <h5>按照SAGE排序对象数组：</h5>
    <table id='ic' border="1"></table>

  </body>
</html>

jQuery 获取JSON数据两种方法

发表于 2021年06月03日更新于 2021年06月16日分类于 JS,jQuery

使用jquery从后台获取JSON数据，显示

知识点：

使用了require JS 框架
用Jquery的两种方法获取后台数据

1）ajax 方法，传回的都是json数据

2）getJSON, 直接封装了一些参数{command : GetRegsiterJsonData}

阅读全文 »

Json, XML 跨域读取的新方法（PHP环境）

发表于 2021年06月03日更新于 2021年06月16日分类于 JS,jQuery

最近做的项目好不容易生成了自己的JSON文件，放在服务器上提示

1	XMLHttpRequest cannot load http://www.ttwinbug.com/XXXX.json No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access.

阅读全文 »

JavaScript 数组Array对象增加和删除元素

发表于 2021年06月03日更新于 2021年06月16日分类于 JS,jQuery

pop 方法

移除数组中的最后一个元素并返回该元素。
arrayObj.pop( )
必选的 arrayObj 引用是一个 Array 对象。
说明
如果该数组为空，那么将返回 undefined。

shift 方法

移除数组中的第一个元素并返回该元素。
arrayObj.shift( )
必选的 arrayObj 引用是一个 Array 对象。
说明
shift 方法可移除数组中的第一个元素并返回该元素。
Java代码

var arr = new Array(0,1,2,3,4);  
var remove = arr.pop();  
alert(remove);   
alert(arr.length);

阅读全文 »

jQuery 读取JSON 指定内容

发表于 2021年06月03日更新于 2021年06月16日分类于 JS,jQuery

jQuery代码

$.ajax({
    type:"GET",
    url: "http://www.ttwinbug.com/json/json.php",
    dataType:"json",
    jsonp:'jsoncallback',
    global: false,
    success:function(data){
            //json文件中已product为主要项
            var productList = data.product;
            //str变量为需要读取的指定id       
            $.each(str, function(y, yu){
                    for(var i = 0; i<productList.length; i++){
                            if(str[y] == productList[i].idlist.ID){
                                    title = productList[i].idlist.post_title;
                                    content = productList[i].idlist.post_content;
                                    attribe[0]=productList[i].idlist.attrib.recording_media;
                                    attribe[1]=productList[i].idlist.attrib.image_sensor_size;
                                    attribe[2]=productList[i].idlist.attrib.aspect_ratio;
                                    attribe[3]=productList[i].idlist.attrib.lens_mount;
                                    $.each(attribe, function(zindex, zvalue){
                                            if(!attribe[zindex]){
                                                    attribe[zindex] = "-";
                                            }
                                    });
                                    jsonData += "product:" + title + ",<br/> introduce:" + content + ",<br/> attribe:" + attribe + "<br/><br/><br/>";
                            }
                    }
            });
            
            alert(jsonData);
            $('.cp_title').html(jsonData);       
            //以下部分为全部读取json里的内容
            /*for(var i=0; i<productList.length; i++){
                    
                    var title = productList[i].idlist.post_title;
                    var content = productList[i].idlist.post_content;
                    var attribe = Array();
                    attribe[0]=productList[i].idlist.attrib.recording_media;
                    attribe[1]=productList[i].idlist.attrib.image_sensor_size;
                    attribe[2]=productList[i].idlist.attrib.aspect_ratio;
                    attribe[3]=productList[i].idlist.attrib.lens_mount;
                    $.each(attribe, function(zindex, zvalue){
                            if(!attribe[zindex]){
                                    attribe[zindex] = "-";
                            }
                    });
                    
                    jsonData += "product:" + title + ",<br/> introduce:" + content + ",<br/> attribe:" + attribe + "<br/><br/><br/>";
            }*/
            
            
    }
});

阅读全文 »

日星网

记录日常点点滴滴，欢迎来到我的小站。

jQuery 让scroll事件在滚动条停止时响应

Javascript判断客户端使用设备的4种方法

方法一

javascript／css 检测移动设备方向的变化判断横竖屏幕

方法一：用触发手机的横屏和竖屏之间的切换的事件

方法二：监听调整大小的改变

javascript 刷新页面方法大全

如何实现刷新当前页面呢？借助js你将无所不能。

jQuery中使用load加载外部html文件，不执行JavaScript的解决方法

利用jQuery 对对象数组排序

jQuery 获取JSON数据两种方法

Json, XML 跨域读取的新方法（PHP环境）

JavaScript 数组Array对象增加和删除元素

pop 方法

shift 方法

jQuery 读取JSON 指定内容

jQuery代码