文档章节

jQ知识补全(供已经入门jq开发者)

羊皮卷
 羊皮卷
发布于 2017/08/29 16:52
字数 2491
阅读 23
收藏 0
jq

关于浏览器中的各高
页面可视区域的高:document.body.clientHeight 
页面可视区域的高:document.body.offsetHeight 
对象顶部距离页面顶部的偏移量:offsetTop 
被滚动条卷入的高度:document.documentElement.scrollTop; 
屏幕分辨率的高: window.screen.height; 
屏幕高 - 任务栏的高: window.screen.availHeight;

jQuery图片懒加载
html 部分
// html
<img src="./img/pic_loading.jpg" class="img_delay" data-src="./img/img01.jpg">

src 属性放置加载时显示的图片 
data-src 属性显示带有原始URL地址的图片

    <script>
        $(function () { 
            $(window).on('scroll',function () {//当页面滚动的时候绑定事件
                $('.img_delay').each(function () {//遍历所有的img标签
                    if (checkShow($(this)) && !isLoaded($(this)) ){
                        // 需要写一个checkShow函数来判断当前img是否已经出现在了视野中
                        //还需要写一个isLoaded函数判断当前img是否已经被加载过了
                        loadImg($(this));//符合上述条件之后,再写一个加载函数加载当前img
                    }
                })
            })
            function checkShow($img) { // 传入一个img的jq对象
                var scrollTop = $(window).scrollTop();  //即页面向上滚动的距离
                var windowHeight = $(window).height(); // 浏览器自身的高度
                var offsetTop = $img.offset().top;  //目标标签img相对于document顶部的位置
        
                if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
                    return true;
                    console.log("出现")
                }
                return false;
            }
            function isLoaded ($img) {
                return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了
                    console.log("已经加载过了")
            }
            function loadImg ($img) {
                setTimeout(function(){
                    $img.attr('src',$img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
                    console.log("加载")
                },300)
            }
        });
    </script>

 

select下拉框取值

function jsSelectToggle(){
            $(".js-title-select select").change(function(){
                var jsSelectToggleTwo = $(".js-select-toggle-two");
                var jsSelectToggleOne = $(".js-select-toggle-one");
                var val = $(this).val();
                if(val==0){
                    jsSelectToggleOne.show();
                    jsSelectToggleTwo.hide();
                }
                if(val==1){
                    jsSelectToggleOne.hide();
                    jsSelectToggleTwo.show();
                }
            });
        }

 

$("li").index(".one");

$(".one").index();

$("li").get(2);//获取第几个

$('div').attr('{'data':'num','age':'18'})

$('div').attr('class',function(index,val){

    console.log(index,val)

    return 'list'

})

$(".wrap").data('age',18);//两个参数就是存储数据

$(".wrap").data('age');//一个参数就是取得数据

$(".wrap").removeData('age');//删除数据

$(".checkbox").prop("checked")//是否选中(判断复选和单选框最好用prop。因为是实时改变状态的

$(".checkbox").prop("disabled",true)//给input设置属性

$(".checkbox").removeProp("checked")//删除属性(这里也可以使用attr)

$(".checkbox").prop("checked",function(index,val){//回调函数

    console.log(index,val);

    return !val;
})
$("li").toggleClass(function(){

    return active;
})

 

//动态渲染结构,循环列表并添加

function addList(){

    var str = ' ';

    for (var i = 0; i < 3; i++){

        str += ‘<li></li>’

    }

    $(".wrap").html(str);

}

addList();

 

//jq设置单个和多个css

$("li").css("color","red")

$("li").css({"color":"red" , "border": "none"})

 

offset是相对于视窗大小偏移

 $(".wrap").innerHeight()//当前css高度加上padding值

 $(".wrap").height()//单纯css里面设置的高度

 $(".wrap").outerHeight()//css高度加上padding值+border的值

 $(".wrap").outerHeight(true)//css高度+padding+border的上下所有高度

$("input").inserBefore(".wrap")//把input插入到wrap的前面

在box外面包裹一层$(".box").wrap("<div class="wrapper"></div>");

删除box外面包裹的一层$(".box").unwrap('wrapper');

$("input").replaceWith("<div></div>")//把input替换为div,传一个参数

$("input").replaceWith($("ul"))//把ul拿过来匹配掉input

$("ul").replaceAll($("input"))//ul把input替换掉

remove()//不会留下任何东西

detach()//会把数据和绑定的事件留存下来

clone()//复制

$("li").filter('.first, :last')//匹配两个

end()//end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。即回到最近的一个

add()//add() 方法将元素添加到匹配元素的集合中。

$("li")//是jq对象上去调用

 

//jq工具类的调用

$.merge()//合并作用

arr1=[1,2,3]

arr2=[2,3,4]

$.merage(arr1,arr2)

arr2合并到arr1里面,并且返回的是arr1(合并后的)

 

//$.parseHTML

可以把HTML字符串解析成相应的DOM节点,有三个参数
$.parseHTML(string,context,true/false)
$.parseHTML("<h1></h1>",false)

返回一个数组,[div]

后面的true是判断是否可以嵌入script标签。

$.fn.extend//扩展插件

$.extend//合并对象,扩展插件

$.extend(true,最终合并到此的空对象{},obj1,obj2)

true代表深度克隆

如果有相同的属性值就会覆盖,如果没有就会保留着

机制:把obj2合并到obj1返回,然后在obj1合并到空对象{ }中返回。

$.extend(true,obj1,obj2)//这种就是直接把obj2合并到obj1中返回了

 

window.onload与document.ready()的区别

1、执行时间不同ready是等DOM结构加载完就行,window需要加载完所有资源

2、执行次数,ready可以执行多次,window只能注册一个

 

绑定事件

$('ul').on('click' , 'li' , function(){//只能通过点击li来触发函数

    console.log(this);

})

 

面向对象编程开发,保存全局this,以便其他地方调用

把this先保存到self中去,不然,self.change改为this.change()会报错

 

绑定以及移除点击事件

如果要移除所有,就$(".box").off();

 

trigger主动触发事件

例如隔了2秒后主动触发了点击事件

 

自定义触发事件

 

$("div").toggle( true ),显示状态

$("div").toggle( false),隐藏状态

 

点击事件发生在down->up完成之后才完成点击事件

 

打印事件对象event
$(".box").on('mouseover' , function(e){
    console.log(e)
})

$(window).on('scroll' , function(e){
    console.log(e)
})

打印事件源对象e.target
$("body").on('click' , function(e){
    console.log(e.target)
})

 

animate

var width = parseInt($(".box").css('width'))
$('button').on('click',function(){
    width += 10;
    $(".box").animate({
        'width': width + 'px'
    },1000,'ease',function(){
        console.log(width)
    });
})

 

延时执行

$('body').append("<h1 class='delay'>delay</h1>");
$('.delay').delay(4000).fadeOut();

 

工具类方法

console.log($.type('.delay'))//打印出string

console.log($.type([1,2]))//打印出array

console.log($.trim("asasd asda "))//去掉字符串两边的空格,中间的去不掉
        //打印出asasd asda
console.log($.makeArray({0: 'a', 1: 'b', length: 2}))//类数组转换成数组
        //["a","b"]去掉了length
        
var arr = [1,2,3]
console.log($.inArray(2,arr))//判断是否在数组里面,如果在,就会显示当前数值在数组里面的位置索引,要是不在就会返回-1
        //返回1,位置1
        arr.indexOf(1)//功能与上面一样,判断当前值是否在数组里面
        //如果有返回索引值,如果不在就返回-1
        
$.noConflict()//把$权限交出
    var myJq = $.noConflict();//权限交给myJq
    $(".box")->变成myJq(".box")

 

$.extend(true,{},obj1,obj2)
先把obj1先合并到对象{}中,然后obj2合并到{},再obj1合并到{}
obj1和obj2都没改变,改变的是{},true代表的是否深度克隆

$.fn == $.prototype
$.extend()//是工具扩展,以后使用也是像工具一样使用.如$.add()
$.fn.extend()//是原型上扩展,以后使用是调用实例上的对象,扩展到自己原型链上去了,得拿对象里的方法,jq上没有的话就去原型链上去找.如:$("div").add()

$.extend扩展一个去掉左侧空字符的方法
$.extend({
    leftTrime: function(str){
        var reg = /^\s+/g;
        return str.replace(reg,'')
    }
})
$.leftTrime('  的点点滴滴多    ')

 

扩展插件方法:复选框选中

$.fn.extend({
    check: function(flag){
        return this.each(function(){
            this.checked = flag;
        })
    }
})
$('button').on('click',function(){
    $('input').check(true);
})

 

$.Callbacks(flag)//执行队列回调函数
方法:
$.Callbacks.add()//添加函数
$.Callbacks.fire()//触发函数
$.Callbacks.remove()//移除函数
flag:
once->:只触发一次fire
unique->:添加相同函数,只触发一次
memory->:继续触发fire之后add的函数
stopOnFalse->:停止添加函数返回值为false的后续函数

例如:
function fn1(str){
    console.log(str)
    return false;
}
function fn2(num){
    console.log(++num)
}
var callBack = $.Callbacks('memory')
callBack.add(fn2);
callBack.add(fn1);
callBack.remove(fn1);
callBack.fire('111111');
callBack.add(fn2);

 

延迟对象Defferd//相当于有状态的callBack

浏览网页,有些数据请求会存在几个状态
def.done 成功 ->对应的状态是def.notify()
def.fail 失败 ->def.reject()
def.progress 成功 ->def.resolve()
def.promise 只读的状态
$.when 在所有传入延迟对象的状态都为成功

 

不同状态对应的回调函数

function dfd(){
    var d = $.Deferred();
        d.notify()//模拟正在进行中的状态,打印出loading
        d.reject()//模拟失败的状态,打印出error失败
        d.resolve()//模拟成功的状态,打印出ok成功
        return d;
        //return d.progress();这里能把状态改为只读,本函数外面就拿不到状态了
}
//如果这里return d.progress();那么就拿不到状态值了
var der = dfd();
der.done(function(){
    console.log('ok成功')
}).fail(function(){
    console.log('error失败')
}).progress(function(){
    console.log('loading')
});
 

$.ajax()

异步传输数据
开启本地服务器,下载wampserver
$.ajax({
    type: 'post',//规定发送请求的方式,默认是get
    url: './data.json',//请求地址
    success: suc,
    data: '',//data就是你要传的参数或者数值或需要请求的数据。。。string/object 发送请求的数据
    context: ,//代表请求的上下文
    async: ,//true/flase 代表 是否异步
    cached: ,//true/flase 是否在浏览器缓存中缓存信息
    dataType: ,//返回的数据类型,一般是json
    crossDomain: ,//规定当前是否会跨域
    jsonp: ,//当如果跨域的情况下,就不用ajax的请求了,jsonp请求的话,规定他请求完之后回调的名字是什么,比如callack/cb/...
    jsonpCallback: ,//规定他请求完之后要执行的回调函数是什么
    error: function(){
        console.log("请求失败");
    }
})
function suc(data){
    console.log("请求成功");
}
怎么查看是否请求成功呢,看控制台的Network->XHR

 

jQuery源码-1

以jq为构造函数构造出来的实例,调用的时候要new一下

但是jq是无new方法,而且现在的this指向的是window

就不能以jQuery为构造函数了,那就以另一个函数为构造函数

所以怎么执行jQuery才能拿到对象呢?

以init为构造函数构造出的实例,怎么才能在jQuery里面返回呢?

那么就在jQuery函数中return 以init构造函数构造出的实例

既然jQuery自己不能是构造函数,但是它结果还是想拿构造函数出来的实例,显然return返回的以某个函数构造出来的实例

init函数主要是拿来为构造函数构造实例用的。jQuery里面很多都是基于原型上操作的

所以最后是

 

jq封闭到自己作用域下防止污染全局变量,不与其他类库冲突

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

© 著作权归作者所有

羊皮卷
粉丝 3
博文 163
码字总数 81589
作品 0
广州
前端工程师
私信 提问
JS三教九流系列-jquery实例开发到插件封装1

我们先写实例,然后在分装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 效果目录: 1.tab切换效果的实例和封装 2.带左右按钮图片滚动效果的...

透笔度
2015/08/11
0
0
新手自学前端学到现在,感觉现在学到的知识越来越少,进步缓慢,学习遇到瓶颈怎么办?

我是自学的前端,学过html+css,一些布局方法我也会。用JS和JQ做一些DOM操作,制作一些鼠标导航特效和简单的动画效果。用sublime+emmet+firebug写页面和调试。代码规范和性能优化也懂一些。用...

咕噜噜kkk
2016/07/07
7.1K
14
ASP.NET-FineUI开发实践-6(三)

自动补全也算是好东西吧,我也不清楚下拉列表可以过滤为啥还有自动补全,其实自动补全用到还是通过jq获取服务端的动态数据补全。我没做动态的例子,其实好写,就不写了。 1.用到了两个js包...

shihahayue
2014/10/12
0
0
可编辑下拉框第一个可以自动补全,但是第二个依葫芦画瓢为什么就无法补全呢? PHP

我上JQ的官网下了可编辑下拉框的实例,自己弄了两个可编辑下拉框,但是为什么第二个不能自动补全呢? 效果图: 但是第二个却无法补全,是不是该添加点什么代码啊?

fzyz_sb
2013/09/17
402
2
求dreamweaver,js和jq的自动补全插件

dreamweaver,js和jq的自动补全插件, 只要 dreamweaver的

yongu
2013/09/10
1K
3

没有更多内容

加载失败,请刷新页面

加载更多

Node.getTextContent() not found 解决办法【不需要调整builder path下面包顺序】

新导入的工程,w3c的getTextContent找不到,response的setCharacterEncoding找不到,网上很多教程都是“调整工程builder path的lib包顺序把jre、tomcat调到上面即可”,但是进入项目的build...

嘿嘿嘿IT
5分钟前
0
0
全站加速(DCDN)- IP应用加速产品解读

5月22日下午15点,阿里云全站加速(DCDN)-IP应用加速如期发布。IP应用加速是阿里云自主研发的一款更高效、更安全、更便捷的动态加速产品,结合阿里云CDN本身的资源优势,利用就近接入、智能...

zhaowei121
19分钟前
0
0
一次奇怪的StackOverflowError问题查找之旅

一次奇怪的StackOverflowError问题查找之旅 公司最近买了一套老代码,在测试环境部署的时候发生了nested exception is java.lang.StackOverflowError的异常,当时看到这个异常首先想到是栈内...

不学无数的程序员
23分钟前
1
0
我为什么飞行 10000 公里去西班牙参加 KubeCon?

2019 年 5 月 20 日至 23 日, 由 Cloud Native Computing Foundation (CNCF) 主办的云原生技术大会 KubeCon + CloudNativeCon EU(欧洲场)即将在热情洋溢的巴塞罗那盛装启幕。 作为云计算领...

阿里云官方博客
27分钟前
0
0
奇技淫巧之判断入参是否为undefined

前言 作为一个程序员,coding是每天必做的事情之一,今天埃尔斯在阅读腾讯AlloyTeam 的一个开源项目AlloyTouch,发现了一个有意思的小技巧,就是对undefined的精准判断。源码地址:https://g...

菜菜行进中
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部