宜宾网站建设公司

jQuery一篇全解




    
    Title


 

welcome to jQuery
    
这是div标签外围1
    
这是before的h2标签
这是insertAfter的h5标签
这是prependTo的h5标签
这是prepend的h4标签
这是div标签内部
这是append的h2标签
这是appendTo的h3标签
这是insertAfter的h2标签
这是after的h2标签

        
    



这是span标签







    
    Title


 

welcome to jQuery
    
这是div标签外围1
        
        
这是before的h2标签
这是insertAfter的h5标签
这是prependTo的h5标签
这是prepend的h4标签
这是div标签内部
            
            
        
这是append的h2标签
这是appendTo的h3标签
这是insertAfter的h2标签
这是after的h2标签

        
        这是span标签1
        
    

    


这是span标签







    
    Title



    
    
  • 第一个li标签
    • 
    
  • 第二个li标签
    • 
    
  • 第三个li标签
    • 
    
  • 第四个li标签
    • 
    
  • 第五个li标签
    • 









    
    Title



    
    
  • 第一个li标签
    • 
    
  • 第二个li标签
    • 
    
  • 第三个li标签
    • 
    
  • 第四个li标签
    • 
    
  • 第五个li标签
    • 









    
    Title



 111
 222
 333
 444







    
    Title


 

welcome to jQuery
    
这是div标签外围1
        
        
这是div标签内部
            
            
        

        这是下划线
        这是span标签1
        
        这是span标签2
        
        
这是div标签内部2
            
            
        

        
        
        
    

    


这是span标签







    
    Title




    男
    女










    
    Title




    男
    女










    
    Title




    
outerHeight=230;outerWidth=230










    
    Title




    
outerHeight=230;outerWidth=230










    
    Title




    
    
    









    
    Title
    




    

        
        玫瑰
        杜鹃
    

    

        
        白菜
        西红柿
    

    

         
        苹果
        香梨
    

    

        
        
        
    










    
    Title




    
这是before的h2标签
这是insertAfter的h5标签
这是prependTo的h5标签
这是prepend的h4标签

        
    
这是append的h2标签
这是appendTo的h3标签
这是insertAfter的h2标签
这是after的h2标签










    
    Title




    
这是before的h2标签
这是insertAfter的h5标签

        
    
这是insertAfter的h2标签
这是after的h2标签










    
    Title




    

        
这是insertAfter的h5标签

    










    
    Title

5.复制
$("p").clone() //clone()用法:A.clone()复制一次A标签
五．Css操作
1.Css样式操作
1.1$("#d1").css("color","red") //单个css样式设置
1.2$("#d1").css({"color":"red","background-color":"pink"}) //多个css样式设置
实例代码如下:




    
    Title




    
outerHeight=230;outerWidth=230

2.位置
2.1 offset()是相对于视口(浏览器窗口)的距离
2.2 position()是相对于进行了定位的父级容器的距离,所有标签的默认定位均是浏览器视口
示例代码如下:




    
    Title
    


    

        
outerHeight=230;outerWidth=230

2.3 $(window).scrollTop():滚动条滚动离顶部的距离
$(window).scrollTop(num):设置滚动条滚动离顶部的距离等于num(单位px)
实例代码如下:




    
    Title
    




    
outerHeight=230;outerWidth=230

    
返回左部

    

    
返回顶部

3.尺寸
3.1 height()/width():指内容区的高宽,不包含padding和margin区域
3.2 innerHeight()/innerHeight():指包含padding区域的高宽
3.3 outerHeight()/outerWidth():指包含padding区域的高宽
3.4 outerHeight(true)/outerWidth(true):指带true参数则包含padding和margin区域的高宽
实例代码如下:




    
    Title
    


    

        
outerHeight=230;outerWidth=230

六．事件
1.事件绑定方式
1.1格式:格式:$("").bind("event",function()){function body}
注意:同一个标签绑定了先后绑定了2个事件，则按jquery代码先后顺序执行这2个事件
1.2事件解除绑定方式
格式:$("").unbind("event")
代码块如下:




    
    Title



    
    
  • aaa
    • 
    
  • bbb
    • 
    
  • ccc
    • 
    
  • ddd
    •

2.事件委托
需求:给所有的li标签绑定点击(click)事件，点击后弹框提示,并且点击addli是添加一个li标签;




    
    Title



    
    
  • aaa
    • 
    
  • bbb
    • 
    
  • ccc
    • 
    
  • ddd
    •

此时发现，后面添加的li标签的点击事件不再进行弹框提示，那么如何解决该问题呢？
我们使用另外一种方式解决.格式:
$("").on("event",[elementsselector],[data],function()){function body}
代码块如下:




    
    Title



    
    
  • aaa
    • 
    
  • bbb
    • 
    
  • ccc
    • 
    
  • ddd
    •

3.事件绑定与事件委托的区别
事件绑定(bind)和事件委托(on)在处理上并不相同，事件绑定是先找到要触发事件的元素(标签)，直接进行事件绑定(也就是说事先已经拿到了所有的需要绑定的元素)；而事件委托是先找到触发事件元素的父级，相当于临时绑定，只有当触发时才发进行绑定(也就是说事先没有指定哪些元素可以触发事件，在后期可变化)。所以，事件委托可以实现2中的需求而事件绑定则不行。
4.事件准备
我们知道，js代码是加载一行执行一行，如果把JavaScript代码放在document之前，则会发生找到元素而不能正确执行JavaScript代码，达不到理想中的效果。在jQuery中也一样，为了解决该问题，JavaScript中使用了load方法，在jQuery中使用read方法。
格式1:$(document).ready(function () {
等待document加载完成才执行的代码块
}
格式2:$(function () {
等待document加载完成才执行的代码块
})
实例代码如下:(改写2中的代码块)




    
    Title
    
    



    
    
  • aaa
    • 
    
  • bbb
    • 
    
  • ccc
    • 
    
  • ddd
    •

5.事件委托中data参数的使用
事件委托格式:
$("").on("event",[elementsselector],[data],function()){function body}
作用:将data中的参数传给function函数使用
实例代码块如下:




    
    Title
    
    



    
    
  • aaa
    • 
    
  • bbb
    • 
    
  • ccc
    • 
    
  • ddd
    •

七．jQuery动画效果
1.切换效果
$().show(time) 效果显示函数time单位为毫秒，可不带时间,不带时间则快速展示
$().hide(time) 效果隐藏函数time单位为毫秒，可不带时间,不带时间则快速隐藏
$().toggle(time) 效果切换函数time单位为毫秒，可不带时间,不带时间则快速切换(切换是指当前为显示状态的则变成隐藏效果，当前为隐藏状态的则变成显示效果)
代码块如下:




    
    Title

2.滑动效果
与切换效果类似，三个对应的函数分别为：$().slideDown();$().slideUp();$().slideToggle();
实例代码如下:




    
    Title

3.淡入淡出
根据更改透明度来展示或隐藏元素
$().fadeIn(time) 效果淡出(显示,透明值为1)函数time单位为毫秒，可不带时间,不带时间则快速淡化展示
$().fadeOut(time) 效果淡入(隐藏,透明值为0)函数time单位为毫秒，可不带时间,不带时间则快速淡化隐藏
$().fadeToggle(time) 淡入淡出效果切换函数,time单位为毫秒，可不带时间,不带时间则快速切换(切换是指当前为显示状态的则淡化变成隐藏效果，当前为隐藏状态的则淡化变成显示效果)
$().fadeTo(time,pram) 效果切换到指定效果函数,time单位为毫秒(必须带)，pram为设置淡入淡出最终的透明值(必须带),(该函数是将当前状态切换到设定的透明度效果状态)
实例代码如下:




    
    Title

4.回调函数
下列所有的function函数均为回调函数，回调函数即为等待执行完某函数后再去执行的函数。
$().show(time,function () {
//等待time毫秒执行完show()函数后再执行function
function body
});
$().hide(time,function () {
//等待time毫秒执行完hide()函数后再执行function
function body
});
$().toggle(time,function () {
//等待time毫秒执行完toggle()函数后再执行function
function body
});
$().slideDown(time,function () {
//等待time毫秒执行完slideDown()函数后再执行function
function body
});
$().slideUp(time,function () {
//等待time毫秒执行完slideUp()函数后再执行function
function body
});
$().slideToggle(time,function () {
//等待time毫秒执行完slideToggle()函数后再执行function
function body
});
$().fadeIn(time,function () {
//等待time毫秒执行完fadeIn()函数后再执行function
function body
});
$().fadeOut(time,function () {
//等待time毫秒执行完fadeOut()函数后再执行function
function body
});
$().fadeToggle(time,function () {
//等待time毫秒执行完fadeToggle()函数后再执行function
function body
});
$().fadeTo(time,pram,function () {
//等待time毫秒执行完fadeTo()函数后再执行function
function body
});
八．jQuery扩展方法/插件机制(自定义方法)
作用:当jQuery中的标准库提供的方法不能达到我们想要的效果时，我们可以通过扩展方法来自定义方法来让jQuery调用已达到理想效果。
用jQuery写自己写插件时，最核心的两个方法。
1.为jQuery添加一个静态方法,格式:$.extend(object)
实例代码块如下:




    
    Title
    
    




    
点我呀

2.为jQuery添加一个方法,格式:$.fn.extend(object)
实例代码如下:




    
    Title
    
    




    
点我呀

九.欢迎关注作者公众号
jQuery一篇全解


分享题目：jQuery一篇全解
URL分享：http://ybzwz.com/article/poipsj.html

其他资讯