zoukankan      html  css  js  c++  java
  • onscroll 元素滚动事件


    阻止事件冒泡 event.stopPropagation();

    children():查找合集里面的第一级子元素。(仅儿子辈,这里可以理解为就是父亲-儿子的关) children只查找第一级的子节点
    $("div").children(".selected") / $('.div').children(':last').css('border', '3px solid blue')
    find() : 元素的后代元素,此时可以用find()方法 children是父子关系查找,find是后代关系 .find包括子节点的所有后代节点
    $("div").find("li") / $('.left').find("li:last").css('border','1px solid blue');
    parent() :元素的父元素 (父亲-儿子的关系),parent只会查找一级,
    parents() :元素的所有祖辈元素,parents则会往上一直查到祖先节点
    closest() :第一个祖先元素
    next() :紧邻的后面同辈元素
    prev() :前面同辈元素的元素
    siblings() :元素的同辈元素
    :checked 获取多选框所有选中元素 $("div input[type='checkbox']:checked");
    --------------------------------------------------------------------------------------------------------------------------------
    滚动条 : 滚动事件:
    滚动加载:
    $(document).on('scroll',function(){
    $(this).scrollTop(); //滚动条滚动的距离 越滚越大
    $(this).height(); //视口可是高度 F12会影响可视高度
    $("#id:last").offset().top; //最后一个元素距离html顶部的高度 一般不变
    //滚动条滚动的距离 + 视口可是高度 > 最后一个元素距离html顶部的高度 则继续在加载
    if( $(this).scrollTop() + $(this).height() > $("#id:last").offset().top ){
    console.log("继续加载");
    }
    })
    ---------------------------------------------------------------------------------------------------------------------------------
    循环 each :
    $("li").each(function(index,element){
    alert($(this).text())
    });
    初始化加载样式 : $(".address_hot ul li").eq(0).addClass('color');
    预加载事件 : $(document).on('mouseover', '.address_hot ul li',function(){});
    序列化 jsonData = JSON.stringify(jsonData); //js对象 转字符串
    data=JSON.parse(data); //后台传的字符串转为 js对象
    正则验证 : var pattern = /^1[34578]d{9}$/;
    var a = pattern.test(phone); //正确返回true
    jquery调用.get(url,'callback','json')<br>
    ---------------------------------------------------------------------------------------------------------------------------------
    第一个参数URL,请求的服务器的端口和服务器的接口的地址,由服务器和前端共同约定
    第二个参数callback,从服务器处取来的数据,通过回调函数callback展示出来
    第三个参数json,表示返回数据的类型
    ---------------------------------------------------------------------------------------------------------------------------------

    ajax : ajaxSubmit: function (info){ // info对象需要穿的属性 url type data callback 4个
    $.ajax({
    url:info.url,
    type:info.type, //get post
    async:true, //或false,是否异步
    data:info.data,
    timsout:50000, //50s
    dataType:'json',
    success:function(data){
    data=JSON.parse(data); //后台传的字符串 --- js对象
    info.callback(data);
    },
    error:function(){
    console.log('错误');
    alert("出错啦!");
    }
    })
    },
    取消元素双击背景变蓝 $(document).blind("selectstart",function(){return false});
    ---------------------------------------------------------------------------------------------------------------------------------
    若用$("#box").offset().width(),求得的宽度是500px,没有内边距和边框宽度;
    若用$("#box").offset().outerWidth(),求得的宽度是522px,是算上内边距和边框宽度的。
    jQuery获取偏移坐标:.offset().top和.offset().left;

  • 相关阅读:
    SkylineGlobe for web开发是否支持IE11?
    OGC标准服务 WMS WCS WFS WPS
    SkylineGlobe TerraExplorer Pro 遇到模型显示有锯齿怎么办?
    SkylineGlobe TerraExplorer Pro 7.0 Web 控件版 第一行示例代码
    Cesium3DTileset示例
    Win7 64位系统,IE11,如何让IE的Tab强制运行64位内核?
    SkylineGlobe系列软件对机器配置要求
    VS 2015 搭建Google Test
    7种排序算法的c++实现
    哈希表应用实例
  • 原文地址:https://www.cnblogs.com/yangwenbo/p/10762537.html
Copyright © 2011-2022 走看看