图片 1

顾名思义是JavaScript和查询(Query),元素的操作

toggle(fn,fn2,[fn3,fn4,…])

每一遍点击时切换要调用的函数。函数数目能够是多个。

nextAll([expr])

检索当前成分之后的有所因素。

prop(name|properties|key,value|fn)

收获在协作的因素聚集的首先个因素的属性值。与attr的不今不古不相同是它更符合checkbox的checked属性的设置,true或然false。实际不是attr中的checked。

难题8: 使用 jQuery完毕如下效果

效果 –
链接

一、jQuery选择器

  •  ID选择器:$(“#box”);
  • 类名选取器:$(“.box”);
  • 标签选拔器:$(“div”);
  • 子孙采纳器:$(“#box 
    p”);
  • :first:获取第贰个因素。
  • :last:获取最终贰个元素。
  • :even:匹配全部索引值为偶数的成分,从
    0 初步计数。
  • :odd:相称全数索引值为奇数的成分,从
    0 先导计数。
  • :eq(index):相配二个给定索引值的因素,从
    0 起头计数。
  • :not(selector):去除全部与给定选取器相配的因素。
  • :has(selector):相称含有选用器所相配的因素的要素。 




    jQuery练习

    • 测试数据
    • 测试数据
    • 测试数据
    • 测试数据
    • 测试数据





replaceAll(selector)

用杰出的因素交替掉全体selector匹配到的要素。参数selector(采取器)用于查找所要被沟通的成分。

jQuery.boxModel

当前页面中浏览器是或不是利用正规盒模型渲染页面。

PS:以前比非常少用这一个主意属性,非常多还不晓得。那跟中文CHM版jQuery
API不毫不相关系,那本广为流传的普通话版手册已经不达时宜,提出直接阅读官方文档。

ancestor descendant

在加以的祖辈成分下匹配全数的后人成分。

主题材料1: jQuery 能做什么样?

选取网页元素
变动结果集
要素的操作:取值和赋值
要素的操作:移动
要素的操作:复制、删除和开创
工具方法
事件操作
特殊效果
AJAX
http://devdocs.io/jquery/

附录:

选项卡实例demo: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选项卡效果</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            background: #f4f4f4;
        }
        ul{
            list-style: none;
        }
        .container{
            width: 600px;
            margin: 100px auto;
            background: #ffffff;
            border-radius: 10px;
            border:1px solid #555555;
            overflow: hidden;
        }
        .header-box{

        }
        .tab-navigation{
            overflow: hidden;
            background: #eeeeee;
            color: #080808;
            border-bottom: 1px solid #555555;
        }
        .tab-navigation li{
            float: left;
            width: 100px;
            text-align: center;
            line-height: 50px;
        }
        .tab-body{
            width: 100%;
            height: 300px;
            position: relative;    
        }
        .tab-body li{
            padding: 10px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .tab-body li:first-child{
            display: block;
        }        
        .tab-body li:nth-child(n+2){
            display: none;
        }
        .tab-navigation .selected{
            background: #ffffff;
            color: #000000;
        }
        .tab-navigation .active{
            background: #ff0000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header-box">
            <ul class="tab-navigation">
                <li class="selected">选项卡1</li>
                <li>选项卡2</li>
                <li>选项卡3</li>
                <li>选项卡4</li>
                <li>选项卡5</li>
                <li>选项卡6</li>
            </ul>            
        </div>
        <div class="body-box">
            <ul class="tab-body">
                <li>内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</li>
                <li>内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2</li>
                <li>内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3</li>
                <li>内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4</li>
                <li>内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5</li>
                <li>内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6</li>
            </ul>            
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
    $('.tab-navigation li').click(function () {
        $(this).addClass('selected').siblings().removeClass('selected')
        var index = $('.tab-navigation li').index(this);
        $('.tab-body li').eq(index).css('display','block').siblings().css('display','none');
    }).hover(function () {
            $(this).addClass('active');
        },function () {
            $(this).removeClass('active');
        });
</script>
</html>

 

prev([expr])

获得八个暗含相配的要素集结中每四个要素紧邻的前贰个同辈成分的元素集结。

clone([true])

克隆相配的DOM成分并且选中那一个克隆的别本。设置参数[true]是目的的有所事件管理一并克隆。

parent([expr])

收获一个涵盖着独具相配成分的独一父成分的因素集结。

主题素材3:jQuery中什么绑定事件?bind、unbind、delegate、live、on、off都有哪些意义?推荐使用哪一类?使用on绑定事件采纳事件代理的写法?

怎么绑定事件


  • bind(type,[data],fn)
    为各样相称成分的一定事件绑定事件管理函数。
    jQuery 3.0中已弃用此办法,请用 on()代替。

    • type:
      含有三个或多少个事件类型的字符串,由空格分隔多少个事件。举个例子”click”或”submit”,还足以是自定义事件名。
    • data: 作为event.data属性值传递给事件指标的附加数据对象
    • fn: 绑定到各种相配成分的平地风波方面包车型大巴管理函数
  • unbind(type,[data|fn]])
    bind()的反向操作,从每八个同盟的成分中去除绑定的平地风波。
    jQuery 3.0中已弃用此方法,请用 off()代替。
    例如未有参数,则删除全体绑定的平地风波。
    您能够将您用bind()登记的自定义事件撤除绑定。
    如果提供了事件类型作为参数,则只删除该类型的绑定事件。
    若是把在绑定期传递的管理函数作为第1个参数,则唯有那几个一定的事件管理函数会被删去。

    • type: 删除成分的四个或两个事件,由空格分隔三个事件值。
    • fn: 要从各样匹配成分的事件中反绑定的事件管理函数
  • delegate(selector,[type],[data],fn)
    点名的要素(属于被选成分的子成分)增多三个或多少个事件管理程序,并分明当那一个事件时有产生时运维的函数。
    jQuery 3.0中已弃用此格局,请用 on()取代。
    利用 delegate()
    方法的事件处理程序适用于当下或以后的要素(举例由脚本成立的新因素)。

    • selector: 选取器字符串,用于过滤器触发事件的因素。
    • type:
      附加到成分的二个或多个事件。由空格分隔四个事件值。必须是卓有功效的风浪。
    • data: 传递到函数的附加数据
    • fn: 当事件发生时运营的函数
  • live(type, [data], fn)
    jQuery
    给全体相称的要素附加三个事件处理函数,就算这几个因素是然后再增加进去的也一蹴而就。
    其一法子是着力是的.bind()办法的四个变体。使用
    .bind()时,选取器相称的成分会增大学一年级个事件管理函数,而其后再增添的因素则不会有。为此须求再利用叁遍
    .bind()才行
    从 jQuery 1.7
    开头,不再建议使用.live()方法。请使用.on()来增添事件管理。使用旧版本的用户,应该事先利用
    .delegate()来替代.live()

    • type: 多少个或四个事件类型,由空格分隔三个事件
    • data: 传递给事件处理函数的叠合参数
    • fn: 要从各类相配元素的风云中反绑定的事件处理函数
  • on(events,[selector],[data],fn)
    在选拔成分上绑定七个或四个事件的事件管理函数。
    on()艺术绑定事件管理程序到当前选定的jQuery对象中的成分。在jQuery
    1.7中,.on()办法 提供绑定事件管理程序所需的全体成效。

    • events:
      一个或多少个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin”
    • selector:
      三个抉择器字符串用于过滤器的触发事件的挑三拣四器成分的遗族。假如接纳的<
      null或简捷,当它达到选定的要素,事件三翻五次触发。
    • data: 当贰个事变被触发时要传送event.data给事件管理函数。
    • fn: 该事件被触发时施行的函数。 false
      值也能够做三个函数的简写,重返false。
  • off(events,[selector],[fn])
    在选取成分上移除三个或七个事件的事件管理函数。

    • events:
      八个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,例如”click”,
      “keydown.myPlugin”, 只怕 “.myPlugin”.
    • selector: 贰个最初传递到.on()事件处理程序附加的选取器。
    • fn: 事件管理程序函数从前附加事件上,或特殊值false.

引入应用哪一类

推荐使用.on()因为提供绑定事件管理程序所需的有着机能


选择on绑定事件选取事件代理的写法

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

  $('ul').on('click','li',function(){})
  //  选择父容器绑定事件,再在选择器中选择目标元素

jQuery简介

jQuery,看名就会猜到其意义是JavaScript和查询(Query),jQuery是免费、开源的。它能够简化查询DOM对象、处监护人件、制作动画、管理Ajax交互进度且包容多浏览器的javascript库,宗旨绪念是write
less,do more(写得越来越少,做得更加多)。

jQuery优势

  1. 体量小,使用灵活(只需引进叁个js文件)。
  2. 造福的采纳页面成分(模仿CSS采用器改良确、灵活)。
  3. 动态改动页面样式/页面内容(操作DOM,动态拉长、移除样式)。
  4. 决定响应事件(动态增进响应事件)。
  5. 提供基本网页特效(提供已打包的网页特效方法)。
  6. 快捷完结通讯(ajax)。
  7. 易增添、插件充足。
  8. 支持链式写法。

引入jQuery

  1. 通过script引进本地jQuery文件。
  2. 透过引入CDN上边jQuery文件。

本子采用

  • 1.x:兼容ie678,使用最为分布的,官方只做BUG维护,效能不再新扩大。由此一般品种以来,使用1.x版本就能够了,最终版本:1.12.4
    (二零一六年一月二十七日)
  • 2.x:不包容ie678,非常少有人利用,官方只做BUG维护,功效不再新扩大。倘诺不考虑相当的低版本的浏览器能够应用2.x,最后版本:2.2.4
    (二零一四年12月21日)
  • 3.x:不兼容ie678,只援助最新的浏览器。除非特殊须求,一般不会选拔3.x版本的,非常多老的jQuery插件不协理这几个本子。前段时间该版本是法定入眼更新维护的版本。

jQuery和$的关系:

图片 1

jQuery.browser.version

浏览器渲染引擎版本号。

offset()

获取相配成分在近日视口的相对偏移。重临的靶子涵盖八个整形属性:top 和
left。此措施只对可知成分有效。

返回Object{top,left}。

off(events,[selector],[fn])

在挑选元素上移除三个或几个事件的事件管理函数。
off() 方法移除用.on()绑定的事件管理程序。

难题10: 使用 jQuery 达成如下效果

效果 –
链接

四、jQuery事件 

页面载入事件:

ready(fn):当DOM载入就绪能够查询及调节时绑定二个要施行的函数。那是事件模块中最重大的三个函数,因为它能够相当的大地进步web应用程序的响应速度。简单地说,那几个措施纯粹是对向window.load事件注册事件的代表形式。 

    /*DOMContenLoaded:dom结构加载完成后调用事件;
    load:dom结构加载完成后链接的资源加载完成后执行;
    网页加载的内容越大,二者之间相差的时间越长,相对的DOMContentLoaded事件用户体验更合适*/
    //ready()方法是在DOMContenLoaded方法上封装的
    $(document).ready(function () {
        console.log('页面加载完成!');
    });
    //此调用方式等同于使用ready事件,可查看jQuery源码
    $(function () {
        console.log('页面加载完成!');
    });

 绑定事件:

参数表达:

    • events:表示jQuery事件不加on,可同期绑定两个事件,事件间用空格隔离举个例子:’click
      dbclick’;
    • [selector]:表示对应样式的接纳器;
    • [data]:表示传入回调函数的参数,用event.data举行收纳
    • fn:回调函数

on(events,[selector],[data],fn):在挑选成分上绑定多少个或多个事件的事件管理函数。

off(events,[selector],[fn]):在采取成分上移除贰个或多个事件的事件处理函数。

bind(type,[data],fn):为各样相称成分的一定事件绑定事件管理函数。

unbind(type,[data|fn]]):bind()的反向操作,从每一个金童玉女的要素中剔除绑定的平地风波。若无参数,则删除全数绑定的事件。

one(type,[data],fn):为每三个相称元素的特定事件(像click)绑定一个壹次性的事件管理函数。

hover([over,]out):当鼠标移动到一个合营的成分上边时,会接触钦点的首先个函数。当鼠标移出那一个元素时,会触发钦定的第二个函数。

click([[data],fn]):触发每一种相配成分的click事件。这几个函数会调用实行绑定到click事件的具有函数。

注:其余事件措施应用办法同样。比方:mouseover、mouseout、dblclick、change、blur、focus、keydown、keyup、keypress、mousedown、mouseup、mousemove、mouseenter、mouseleave、resize、scroll、select、submit、unload等。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性和css</title>
        <style type="text/css">
            html,body{
                height:100%;
            }
            ul{
                list-style: none;
                width: 50%;
                margin: 0 auto;
                text-align: center;
            }
            #list li{
                line-height: 40px;
                border-bottom: 1px dashed #ff0000;
                font-size: 20px;
            } 
        </style>
    </head>
    <body>
        <div class="container" data-save="data">
            <div class="box">
                <ul id="list">
                    <li>这是1</li>
                    <li class="even">这是2</li>
                    <li>这是3</li>
                    <li>这是4</li>
                    <li>这是5</li>
                    <li class="even">这是6</li>
                    <li>这是7</li>
                    <li>这是8</li>
                </ul>
            </div>
        </div>
    </body>
<!--考虑兼容选择相应的版本,此处参考百度选择1.x的版本进行说明,案例不提供此文件自行下载-->
<script type="text/javascript" src="js/jquery.1.8.3.js"></script>
<script type="text/javascript">
/*    //添加单击事件
    $('#list li').on('click',function(){
        alert(this.innerHTML);
    })*/


/*    //添加双击事件
    $('#list li').on('dblclick',function(){
        alert(this.innerHTML);
    })
    //无法移除双击事件(不是同一个方法)
    $('#list li').off('dblclick',function(){
        alert(this.innerHTML);
    })*/
    function fun(){
        alert(0000);
    }


/*    //添加双击事件且可选择选择器过滤
    $('#list').on('dblclick','.even',fun);
    //可移除双击事件
    $('#list').off('dblclick',fun);*/


/*    //添加双击事件
    $('#list').on('dblclick',fun);
    //无法移除双击事件与添加双击事件的方法选择器对应或者全部移除
    $('#list').off('dblclick','.even',fun);*/


/*    //bind和on的区别是其无法进行选择器过滤,其他用法基本相同都可添加多个事件
    $('#list').bind('click ', fun);
    $('#list').unbind('click', fun);*/

/*    //一次性事件处理函数
    $('#list').one('click',{'param':'参数'},function(e){
        console.log(e.data['param'])
    })*/


/*    
     //鼠标划入划出事件
     $('#list').hover(function(){
            console.log("鼠标划入")
        },
        function(){
            console.log("鼠标划出")
        })*/

    $('#list').click(function(){
        console.log("鼠标点击事件")
    })
</script>
</html>

prevAll([expr])

招来当前成分在此之前全数的同辈成分。

prev([expr])

获得四个暗含相称的要素集结中每三个要素紧邻的前几个同辈成分的成分集结。

before(content|fn)

在每种相配的成分在此之前插入内容。

难题6:怎么着设置和收获成分内部 HTML 内容?如何设置和收获成分内部文件?

  • html([val|fn])
    获得第多少个相称成分的html内容。那一个函数不能够用于XML文书档案。但能够用于XHTML文书档案。
    在贰个 HTML 文档中, 大家得以利用 .html()
    方法来获取放肆一个因素的内容。
    即便选拔器相称多于贰个的要素,那么唯有第三个相称成分的 HTML
    内容会被拿走。

    • val:用于设定HTML内容的值
    • fn:此函数再次来到多少个HTML字符串。接受多少个参数,index为因素在集结中的索引地点,html为原来的HTML值。
  • text([val|fn])
    赢得富有相称成分的故事情节。
    结果是由全数相配成分包罗的文书内容结合起来的文本。那个艺术对HTML和XML文书档案都使得。

    • val:用于安装成分内容的文书
    • fn:此函数再次回到一个字符串。接受多个参数,index为因素在集中中的索引地点,text为本来的text值

二、jQuery属性和体裁CSS

操作属性:

attr(name|properties|key,value|fn):设置或回到被选成分的属性值。

removeAttr(name):从每四个相配的成分中剔除叁本性质。

prop(name|properties|key,value|fn):获取在合作的因素聚集的首先个因素的属性值。

removeProp(name):用来删除由.prop()方法设置的品质集。

有别于:attr能够操作(增删改查)自定义的节点属性,而prop不得以(增删改查)。attr和prop对input的disabled属性的重临值不平等,attr重临disabled可能undefined,而prop再次来到布尔值。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性和css</title>
        <style type="text/css">
            html,body{
                height:100%;
            }
            body{
                position:relative;
                overflow: hidden;
            }
            .container{
                height:200px;
                background:#ff0000;
                line-height: 200px;
                text-align: center;
                color: #ffffff;
                position:absolute;
                left:0;
                right:0;
                top:0;
                bottom:0;
                margin:auto;
            }
        </style>
    </head>
    <body>
        <div class="container" data-save="data">
            <div class="box">
                输入内容:<input class="test"  type="text" disabled/>
            </div>
        </div>
    </body>
<!--考虑兼容选择相应的版本,此处参考百度选择1.x的版本进行说明,案例不提供此文件自行下载-->
<script type="text/javascript" src="js/jquery.1.8.3.js"></script>
<script type="text/javascript">
//    操作属性
//    读取属性值
    console.log($('[type=text]').attr('class'));
    console.log($('[type=text]').prop('class'));
    console.log($('[type=text]').attr('name'));//返回undefined
    console.log($('[type=text]').prop('name'));//无返回值

    console.log($('[type=text]').attr('disabled'));    //返回值disabled
    console.log($('[type=text]').prop('disabled')); //返回值true
//    attr支持所有属性节点的增删改 prop支持自带属性的操作,不支持自定义属性的操作
//    操作标签自带属性
    $('.container').attr('class','boxcontainer')    //设置class属性为boxcontainer
    $('.box').prop('class','containerClass')    //设置class属性为containerClass
//    操作标签自定义属性
    $('.containerClass').attr('data-save','update')    //成功更改
    $('.boxcontainer').prop('data-save','update') //不起作用
//    删除相关属性removeAttr移除相关属性 removeProp移除相关属性值且赋值undefined
    $('.containerClass').removeAttr("class")
    $('.boxcontainer').removeProp("class")
</script>
</html>

 操作Class:

addClass(class|fn)
:为种种匹配的元素加多内定的类名。

removeClass([class|fn])
:从具备匹配的成分中去除全数只怕钦命的类。

toggleClass(class|fn[,switch]):若是存在(不设有)就删除(增多)一个类。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性和css</title>
        <style type="text/css">
            html,body{
                height:100%;
            }
            body{
                position:relative;
                overflow: hidden;
            }
            .container{
                width:100px;
                height:100px;
                background:#ff0000;
                line-height: 100px;
                text-align: center;
                color: #ffffff;
                position:absolute;
                left:0;
                right:0;
                top:0;
                bottom:0;
                margin:auto;
            }
            .changeClass{
                width:100px;
                height:100px;
                line-height: 100px;
                text-align: center;
                color: #ffffff;
                background: #000000;
                position:absolute;
                left:0;
                right:0;
                top:0;
                bottom:0;
                margin:auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box toggleClassOne">
                显示内容
            </div>
        </div>
    </body>
<!--考虑兼容选择相应的版本,此处参考百度选择1.x的版本进行说明,案例不提供此文件自行下载-->
<script type="text/javascript" src="js/jquery.1.8.3.js"></script>
<script type="text/javascript">
//    操作class
//    添加class
//    $('.container').addClass('changeClass');
//    移除class
//    $('.container').removeClass('changeClass');
//    链式写法与上面的分开效果同
    $('.container').addClass('changeClass').removeClass('container');
//    toggleClass存在删除不存在添加
    $('.box').toggleClass('toggleClassOne');
    $('.box').toggleClass('toggleClassTwo');
</script>
</html>

 操作内容:

html([val|fn]):取得第四个相称成分的html内容。那个函数不可能用来XML文书档案。但足以用来XHTML文书档案。

text([val|fn]):取得具备相称成分的剧情。结果是由全数相配成分包罗的公文内容结合起来的公文。这几个方法对HTML和XML文书档案都使得。

val([val|fn|arr]):获得匹配成分的脚下值。假使多选,将回来三个数组,其涵盖所选的值。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性和css</title>
        <style type="text/css">
            html,body{
                height:100%;
            }
            ul{
                list-style: none;
                width: 50%;
                margin: 0 auto;
                text-align: center;
            }
            #list li{
                line-height: 40px;
                border-bottom: 1px dashed #ff0000;
                font-size: 20px;
            } 
        </style>
    </head>
    <body>
        <div class="container" data-save="data">
            <div class="box">
                <ul id="list">
                    <li>这是1</li>
                    <li class="even">这是2</li>
                    <li>这是3</li>
                </ul>
            </div>
            <input type="text" name="username" id="username"/>
            <div class="testhtml">

            </div>        
            <div class="testtext">

            </div>
        </div>
    </body>
<!--考虑兼容选择相应的版本,此处参考百度选择1.x的版本进行说明,案例不提供此文件自行下载-->
<script type="text/javascript" src="js/jquery.1.8.3.js"></script>
<script type="text/javascript">        
    //     操作内容
    //html标签文本输出   text输出文本
    console.log($('.container').html());
    console.log($('.container').text());
    //赋值时html标签可渲染  text当文本处理
    $('.testhtml').html('<b>好诗!</b>');
    $('.testtext').text('<b>好诗!</b>');
    $('[name=username]').val('用户名');
    console.log($('[name=username]').val());
</script>
</html>

 

操作CSS:

css(name|pro|[,val|fn]):访谈相称成分的体制属性。

 

        // 操作样式(详细请查看选择器)
        console.log($('#box').css('width'));
        $('#box').css({'width': 250, height: 500});

 操作地点:

offset([coordinates]):获取相配成分在时下文书档案的相持偏移。重返的靶子涵盖七个整型属性:top
和 left,以像素计。方法只对可知成分有效。

position():获取相称成分相对父成分的撼动。重回的靶子涵盖多个整型属性:top

left。为精确总结结果,请在补白、边框和填充属性上运用像素单位。此形式只对可见成分有效。

scrollTop([val]):获取相称成分相对滚动条最上端的撼动。此方法对可知和隐敝成分均有效。

scrollLeft([val]):获取匹配成分相对滚动条左边的撼动。此方法对可见和遮掩成分均有效。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性和css</title>
        <style type="text/css">
            html,body{
                height:100%;
            }
            body{
                position: relative;
                overflow: hidden;
            }
            .container{
                width: 300px;
                height: 300px;
                background: #ff0000;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
            .box{
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                color: #ffffff;
                background: #000000;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="container" data-save="data">
            <div class="box">
                中心
            </div>
        </div>

        <div id="outer" style="width: 200px; height: 200px; overflow: auto; 
border: 1px solid #ccc; padding: 10px; margin: 10px;">
            <div id="inner" style="height: 400px;"></div>
        </div>

    </body>
<!--考虑兼容选择相应的版本,此处参考百度选择1.x的版本进行说明,案例不提供此文件自行下载-->
<script type="text/javascript" src="js/jquery.1.8.3.js"></script>
<script type="text/javascript">    
    //获取相对于文档的left和top的值
    console.log($('.container').offset())
    //设置left和top值
    $('.box').offset({left:0,top:0})
    console.log($('.box').offset())
    console.log($('#outer').scrollTop());
    $('#outer').scrollTop(50);
    $('#outer').scroll(function () {
        console.log($('#outer').scrollTop());
    });
</script>
</html>

 操作尺寸:

height([val|fn]):获得相配元素当前划算的中度值(px)。

width([val|fn]):获得第多少个相配成分当前划算的上升的幅度值(px)。

innerHeight():获取第叁个相称成分内部区域高度(满含补白、不包括边框)。此措施对可知和隐敝成分均有效。

innerWidth():获取第二个相配成分内部区域上涨的幅度(包涵补白、不饱含边框)。此方法对可知和隐敝元素均有效。

outerHeight([options]):获取第二个相配成特别部中度(暗许蕴涵补白和边框)。此措施对可知和遮蔽成分均有效。

outerWidth([options]):获取第贰个相配成十二分界宽度(默许满含补白和边框)。此格局对可知和隐敝成分均有效。

注:设置options为true,计算margin在内。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性和css</title>
        <style type="text/css">
            html,body{
                height:100%;
            }
        </style>
    </head>
    <body>
        <div id="outer" style="width: 200px; height: 200px; overflow: auto; border: 1px solid #ccc; padding: 10px; margin: 10px;">
            <div id="inner" style="height: 400px;"></div>
        </div>

    </body>
<!--考虑兼容选择相应的版本,此处参考百度选择1.x的版本进行说明,案例不提供此文件自行下载-->
<script type="text/javascript" src="js/jquery.1.8.3.js"></script>
<script type="text/javascript">    
    console.log($('#outer').width(150));
    console.log($('#outer').height(130));
    //+补白的宽度、高度
    console.log($('#outer').innerWidth());
    console.log($('#outer').innerHeight());
    //+边框和补白的宽度、高度
    console.log($('#outer').outerWidth());
    console.log($('#outer').outerHeight());
    //+外边距、边框和补白的宽度、高度
    console.log($('#outer').outerWidth(true));
    console.log($('#outer').outerHeight(true));
</script>
</html>

jquery css方法的天性有多少个值该怎写?

$(this).css({background-positionX:’100%’,background-positionY:’0′});
 

index(subject)
找寻与参数表示的目的匹配的成分,并回到相应成分的索引值。要是找到…

replaceAll(selector)

用万分的因素交替掉所有selector相配到的要素。参数selector(选拔器)用于查找所要被沟通的成分。

eq(index|-index)

赢安妥前链式操作中第N个jQuery对象,重返jQuery对象,当参数大于等于0时为正向选择,比方0代表第二个,1意味第三个。当参数为负数时为反向选取,比如-1为尾数第八个。

主题材料7:如何设置和获得表单用户输入恐怕选拔的剧情?怎样设置和获得成分属性?

  • val([val|fn|arr])
    获取相配成分的此时此刻值。

    • val:要设置的值
    • fn:此函数再次回到四个要安装的值。接受多个参数,index为成分在联谊中的索引地方,text为本来的text值。
    • arr:用于 check/select 的值

  • attr(name|properties|key,value|fn)
    设置或回到被选成分的属性值。

    • name:属性名称
    • properties:作为品质的“名/值对”对象
    • key,value:属性名称,属性值
    • fn:再次回到属性值的函数,第贰个参数为当下成分的索引值,第4个参数为本来的属性值。
  • removeAttr(name)
    从每一个非常的成分中删除叁本性能

    • name:要刨除的属性名

  • css(name|pro|[,val|fn])
    访谈相配成分的体裁属性。

    • name:一个或四个CSS属性组成的八个数组
    • pro:要安装为样式属性的名/值对
    • val:属性名
    • fn:此函数重临要安装的属性值。接受五个参数,index为要素在目的集结中的索引地方,value是原来的属性值。

 三、过滤查找 

过滤成分:(与选拔器的功用基本一样,只是分装成方法运用,此处不再比方)

eq(index|-index):获取第N个成分。这几个因素的职位是从0算起,借使是负数,则从集结中的最终贰个要素开端尾数。

first():获取第一个要素。

last():获取最后三个要素。

hasClass(class):检查当前的要素是或不是带有某些特定的类,若是有,则赶回true。

has(expr|ele):保留包涵特定后代的成分,去掉那么些不分包钦赐后代的因素。

not(expr|ele|fn):删除与钦赐表明式匹配的因素。

寻找成分:

children([expr]):获得一个暗含匹配的成分集结中每一个成分的兼具子成分的因素集结。只思虑子成分而不思索全部后代成分。

find(expr|obj|ele):找出全体与钦命表明式相配的子成分。

parent([expr]):获得贰个涵盖着具备相配成分的独一父成分的因素会集。

offsetParent():重临第一个相称成分用于固定的父节点。

next([expr]):取得贰个包括般配的因素集结中每三个要素紧邻的前边同辈成分的要素集结。

nextAll([expr]):查找当前成分之后有所的同辈成分。

prev([expr]):猎取三个包涵般配的成分集合中每四个成分紧邻的前三个同辈成分的因素会集。

prevAll([expr]):查找当前成分以前全部的同辈元素。

siblings([expr]):获得三个富含相称的要素会集中每三个要素的有所独一起辈成分的成分集结。能够用可选的表达式进行筛选。

串联操作:

add(expr|ele|html|obj[,con]):把与表明式相称的因素增多到jQuery对象中。这一个函数能够用于连接分别与八个说明式相称的成分结果集。重返的结果将一直以成分在HTML文档中出现的顺序来排序,而不再是简约的丰硕。

 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>jQuery练习-选择器</title>
</head>
<body>
    <ul id="list">
        <li><label>测试数据</label></li>
        <li>测试数据</li>
        <li class="special">测试数据</li>
        <li>测试数据</li>
    </ul>
</body>
<!--考虑兼容选择相应的版本,此处参考百度选择1.x的版本进行说明,案例不提供此文件自行下载-->
<script type="text/javascript" src="js/jquery.1.8.3.js"></script>
<script type="text/javascript">
$('#list .special').add('label').css('background','#ff0000');
</script>
</html>

 

andSelf():将原先所选的出席当前成分中。

 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>jQuery练习-选择器</title>
</head>
<body>
    <ul id="list">
        <li>测试数据</li>
        <li>测试数据</li>
        <li class="special">测试数据</li>
        <li>测试数据</li>
    </ul>
</body>
<!--考虑兼容选择相应的版本,此处参考百度选择1.x的版本进行说明,案例不提供此文件自行下载-->
<script type="text/javascript" src="js/jquery.1.8.3.js"></script>
<script type="text/javascript">
$('#list .special').nextAll().andSelf().css('background','#ff0000');
</script>
</html>

 end():回到这几天的贰个”破坏性”操作在此之前。即,将相当的成分列表变为前二回的图景。尽管此前并未有破坏性操作,则赶回三个空集。所谓的”破坏性”正是指任何改变所相称的jQuery元素的操作。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>jQuery练习-end()</title>
</head>
<body>  
    <ul class="first">
        <li class="foo">list item 1</li>
        <li>list item 2</li>
        <li class="bar">list item 3</li>
    </ul>
    <ul class="second">
        <li class="foo">list item 1</li>
        <li>list item 2</li>
        <li class="bar">list item 3</li>
    </ul>
</body>
<!--考虑兼容选择相应的版本,此处参考百度选择1.x的版本进行说明,案例不提供此文件自行下载-->
<script type="text/javascript" src="js/jquery.1.8.3.js"></script>
  <script>
      //end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态
      $('ul.first').find('.foo').css('background-color', 'red')
    .end().find('.bar').css('background-color', 'green');
  </script>
</html>

queue([callback/queue])

queue:重回指向第两个相称成分的行列(将是二个函数数组。

queue(callback):在特其余因素的卡通片队列中增多一个函数。

queue(queue):将相称成分的动画队列用新的三个队列来代表(函数数组)。

jQuery.browser.version

浏览器渲染引擎版本号。

show([speed,[easing],[fn]])

呈现遮掩的相称成分。
speed:三种预订速度之一的字符串(“slow”,”normal”,or”fast”)或代表动画时间长度的飞秒数值(如:一千)
fn:在动画达成时进行的函数,每一种成分实行一回。
easing:(Optional) 用来钦赐切换效果,暗中认可是”swing”,可用参数”linear”

主题材料11: 使用 jQuery 达成如下效果

效果 –
链接

dequeue()

从动画队列中移除八个行列函数。

andSelf()

将从前所选的走入当前成分中。

3.1 ajax请求

难点5: jQuery 动画怎么着使用?

animate(params,[speed],[easing],[fn])

用来创立自定义动画的函数。

其一函数的关键在于钦点动画情势及结果样式属性对象。这几个指标中种种属性都意味着贰个方可变动的样式属性(如heighttopopacity)。注意:全数钦点的习性必须用骆驼格局,比方用marginLeft代替margin-left

而各样属性的值表示那些样式属性到有个别时动画结束。假设是三个数值,样式属性就能从此时此刻的值渐变到钦命的值。假设使用的是hideshowtoggle如此的字符串值,则会为该属性调用暗许的卡通情势。

jQuery 1.2 中,你能够使用 em% 单位
jQuery 1.2 中,你能够透过在属性值前边钦定+- 来让要素做相对运动
jQuery
1.3中,若是duration设为0则直接到位动画。而在此前版本中则会实践暗中认可动画。
jQuery
1.8中,当您使用CSS属性在css()animate()中,将基于浏览器自动抬高前缀(在适用的时候),比方("user-select", "none");
在Chrome/Safari浏览器将设置为"-webkit-user-select",
Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".


  • 参数
    • params: 一组包蕴作为动画属性和终值的体裁属性和及其值的聚众
    • speed: 两种预订速度之一的字符串(“slow”,”normal”, or
      “fast”)或意味着动画时间长度的飞秒数值(如:1000)
    • easing:
      要使用的擦除效果的名称(须求插件资助).默许jQuery提供”linear” 和
      “swing”.
    • fn: 在动画完结时实行的函数,种种成分试行三次。

  • stop([clearQueue],[jumpToEnd])
    终止全数在钦赐成分上正在运作的动画。
    如若队列中有等待推行的卡通(并且clearQueue未有设为true),他们将被立刻实行

    • clearQueue: 借使设置成true,则清空队列。能够登时甘休动画。
    • gotoEnd:
      让当前正值施行的卡通立即成功,何况重设show和hide的固有样式,调用回调函数等。
  • finish( [queue ] )
    终止当前正在运作的动画,删除全部排队的卡通片,并做到相称元素全部的卡通片。
    当.finish()在三个因素上被调用,立刻结束当前正值运维的卡通和富有排队的卡通(倘诺有的话),并且他们的CSS属性设置为它们的指标值(全体动画的目标值)。全部排队的动画片将被删除。

    • queue:截止动画队列中的名称。
  • delay(duration,[queueName])
    设置叁个延时来推延实践队列中事后的体系。

    • duration: 延时时间,单位:阿秒
    • queueName: 队列名词,暗许是Fx,动画队列

slice(start,[end])

选料叁个合作的子集。

index(subject)

搜寻与参数表示的对象相称的因素,并再次来到相应成分的索引值。假使找到了合营的要素,从0起始回到;若无找到相称的成分,重回-1。

position()

获得相配成分相对父成分的舞狮。
回到的对象涵盖七个整型属性:top 和
left。为标准计算结果,请在补白、边框和填充属性上运用像素单位。此方法只对可知成分有效。

难点4:jQuery 如何呈现/隐敝成分?

  • hide([speed,[easing],[fn]])
    遮掩展现的成分

    • speed: 二种预订速度之一的字符串(“slow”,”normal”, or
      “fast”)或表示动画时间长度的阿秒数值(如:一千)
    • easing: (Optional)
      用来钦命切换效果,私下认可是”swing”,可用参数”linear”
    • fn: 在动画完毕时奉行的函数,每种成分实践一回。
  • show(([speed,[easing],[fn]])
    突显遮盖的相配成分。

    • speed: 二种预订速度之一的字符串(“slow”,”normal”, or
      “fast”)或代表动画时间长度的微秒数值(如:一千)
    • easing: (Optional)
      用来钦赐切换效果,暗许是”swing”,可用参数”linear”
    • fn: 在动画完成时进行的函数,各种成分施行一遍。
  • toggle([speed],[easing],[fn]
    设若元素是可见的,切换为隐匿的;假设成分是隐身的,切换为可知的。

    • speed: 遮蔽/呈现 效果的进度。默许是
      “0”阿秒。或然的值:slow,normal,fast。”
    • easing: (Optional)
      用来钦点切换效果,暗中认可是”swing”,可用参数”linear”
    • fn: 在动画达成时实行的函数,每种成分推行二遍。

  • slideDown([speed],[easing],[fn])
    透过高度变化(向下增大)来动态地展现全数相配的要素,在展现成功后可选地触发二个回调函数。

  • slideUp([speed,[easing],[fn]])
    通过中度变化(向上减小)来动态地躲藏全数相称的因素,在隐敝实现后可选地触发叁个回调函数。

  • slideToggle([speed],[easing],[fn])
    经过中度变化来切换全体相称元素的可知性,并在切换完成后可选地触发三个回调函数。

  • fadeIn([speed],[easing],[fn])
    透过不反射率的更改来兑现全体相称成分的淡入效果,并在动画达成后可选地触发一个回调函数。

  • fadeOut([speed],[easing],[fn])
    由此不折射率的扭转来兑现全部相称成分的淡出效果,并在动画完结后可选地触发叁个回调函数。

  • fadeToggle([speed,[easing],[fn]])
    通过不折射率的变化来按钮全体相称成分的淡入和剥离效果,并在动画达成后可选地触发贰个回调函数。

  • fadeTo([[speed],opacity,[easing],[fn]])

    • speed: 二种预约速度之一的字符串(“slow”,”normal”, or
      “fast”)或意味着动画时间长度的微秒数值(如:一千)
    • opacity: 三个0至1之内表示反射率的数字。
    • easing: (Optional)
      用来钦定切换效果,暗中同意是”swing”,可用参数”linear”
    • fn: 在动画实现时进行的函数,每种成分推行叁遍。

jQuery.boxModel

此时此刻页面中浏览器是还是不是利用标准盒模型渲染页面。

PS:从前比相当少用这一个措施属性,比相当多还不精通。那跟普通话CHM版jQuery
API不非亲非故系,那本广为流传的汉语版手册已经不达时宜,建议直接阅读官方文书档案。

data()

data(elem):为页面对象增多独一标记。

data(name,
value):将数据保存在要素的四个key里面。$(“#box”).data(“shape”,”rectangle”)。

data(name):获取值。$(“#box”).data(“shape”) //”rectangle”。

removeData(name):删除通过data()方法予以的值。$(“#box”).removeData(“shape”)。

jQuery(html,[ownerDocument])

基于提供的原始 HTML 标志字符串,动态创造由 jQuery 对象包装的 DOM
成分。同临时候设置一密密麻麻的性质、事件等。

$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

主题素材9: 使用 jQuery 完成如下效果

效果 –
链接

one(type,[data],fn)

为每一个匹配成分的特定事件(像click)绑定八个一次性的事件管理函数。

在各种对象上,那一个事件管理函数只会被实行三次。别的法则与bind()函数同样。那么些事件管理函数会接收到贰个平地风波目的,能够由此它来阻止(浏览器)暗中同意的一举一动。假如既想收回暗中同意的一言一动,又想遏止事件起泡,这么些事件管理函数必须重回false。

prevAll([expr])

寻找当前因素从前全部的同辈成分。

slideUp([speed,[easing],[fn]])

以滑行格局隐敝元素。参数同样。

主题材料2: jQuery 对象和 DOM 原生对象有哪些分别?怎样转化?

  • 联系:

    1. jQuery对象:通过jQuery包装DOM对象后产生的目的;
    2. 两个之间可以相互调换;
  • 区别:

    1. jquery选拔器获得的jquery对象和正规的
      javascript中的document.getElementById()获得的dom对象是两种不一致的对象类型,两个不等价;
    2. jQuery不可能使用DOM对象的其余措施,同理DOM对象也不能接纳jQuery里的方法.
      乱使用会报错。
  • 互动转变:

    • jQuery对象转成DOM对象

      1. jQuery对象是二个数码对象,通过[index]的方法

      var $v = $("#v")  //  jQuery对象
      var v = $v[0]  //  DOM对象
      
      1. jQuery本身提供,通过.get(index)方法

      var $v = $("#v")  //  jQuery对象
      var v = $v.get(0)  //  DOM对象
      
    • DOM对象转成jQuery对象:
      对此DOM对象,只需用$()把DOM对象包装起来,就可获取jQuery对象

      var v=document.getElementById("v")  //  DOM对象
      var $v=$(v)  //  jQuery对象
      

stop()

终止全数在钦点成分上正在运作的动画。倘使队列中有等待实行的卡通片,他们将被立即执行。

attr(key,fn)

为具备相称的要素设置一个图谋的属性值。不提供值,而是提供贰个函数,由那一个函数总括的值作为属性值。

closest(expr|object|element)

从要素本人开首,逐级向上司成分相称,并赶回初始相配的成分。

offset()

收获相称成分在时下视口的对立偏移。再次来到的对象涵盖七个整形属性:top 和
left。此格局只对可知成分有效。

返回Object{top,left}。

replaceWith(content)

将兼具匹配的成分替换到钦赐的HTML或DOM成分。参数content(String, Element,
jQuery):用于将相称成分替换掉的剧情。

hasClass(class)

检查当前的要素是还是不是带有某些特定的类,假如有,则赶回true。
实际正是 is(“.” + class)。

andSelf()

将原先所选的加盟当前因素中。

slice(start,[end])

挑选贰个相称的子集。

triggerHandler(type, [data])

接触钦命的事件类型上具备绑定的处理函数。但不会举办浏览器暗中认可动作,也不会产惹事件冒泡。

nextAll([expr])

寻觅当前成分之后的有所因素。

add(expr)

把与表达式相称的元素增多到jQuery对象中。那么些函数能够用于连接分别与多个表明式匹配的要素结果集。

参数expr(String, DOMElement,
Array<DOMElement>)用于相称成分并丰裕的表达式字符串,或许用于动态变化的HTML代码,借使是三个字符串数组则赶回多个成分。

7.1 过滤

data()

data(elem):为页面前遭受象加多独一标志。

data(name,
value):将数据保存在要素的三个key里面。$(“#box”).data(“shape”,”rectangle”)。

data(name):获取值。$(“#box”).data(“shape”) //”rectangle”。

removeData(name):删除通过data()方法予以的值。$(“#box”).removeData(“shape”)。

toggle(fn,fn2,[fn3,fn4,…])

老是点击时切换要调用的函数。函数数目能够是多个。

2.6 属性

  • [attribute]含蓄钦点属性的因素
  • [attribute=value]属性等于值
  • [attribute!=value]不等于值
  • [attribute^=value]以值伊始
  • [attribute$=value]以值结尾
  • [attribute*=value]值中蕴藏
  • [selector1][selector2][selectorN]组成属性筛选器

jQuery中一些一时用的秘技属性【转发】,jquery属性转发

one(type,[data],fn)

为每三个相称成分的特定事件(像click)绑定一个一次性的事件管理函数。

在种种对象上,那一个事件管理函数只会被施行二回。别的法规与bind()函数一样。那几个事件管理函数会接收到一个平地风波目的,能够通过它来阻拦(浏览器)暗许的作为。如若既想收回默许的作为,又想遏止事件起泡,这些事件处理函数必须重临false。

insertBefore(content)

把富有相配的因素插入到另三个、内定的要素集结的前头。before的颠倒操作。

hasClass(class)

自己批评当前的成分是不是含有有些特定的类,如果有,则赶回true。这实际正是is(“.”

  • class)。

val(val)

安装每二个相称成分的值。在 jQuery 1.2,
这也足认为select元件赋值。参数val(String)要安装的值。

check,select,radio等都能动用为之赋值。参数val(Array<String>)用于
check/select 的值。

get()

获得在那之中五个相当的因素。
num代表收获第多少个门道相当的因素。从0先导,再次回到的是DOM对象,类似的有eq(index),可是eq(index)再次回到的是jQuery对象。

clone([true])

仿造相配的DOM成分並且选中那些克隆的副本。设置参数[true]是指标的具有事件管理一并克隆。

hasClass(class)

检查当前的要素是不是带有有些特定的类,如若有,则赶回true。那实际正是is(“.”

  • class)。

六、文书档案管理

add(expr)

把与表明式相配的要素增加到jQuery对象中。那几个函数能够用来连接分别与多少个表明式相配的因素结果集。

参数expr(String, DOMElement,
Array<DOMElement>)用于相配成分并累加的表达式字符串,可能用于动态变化的HTML代码,如若是二个字符串数组则赶回多少个要素。

dequeue()

从动画队列中移除一个队列函数。

context

回来传给jQuery()的原来的DOM节点内容,即jQuery()的第贰个参数。若无一点点名,那么context指向当前的文书档案(document)。

jQuery方法莫名”不支持的属性或格局”

jqueryzoom这么些办法没写错呢,只怕你的不胜js路线搞错了,大概极其 .jqzoom
的成分不是能用这些格局的对象
 

stop()

悬停全部在内定成分上正在运行的动画片。若是队列中有等待实践的卡通,他们将被立刻实践。

clone([Even[,deepEven]])

仿造相配的DOM成分何况选中这几个克隆的别本。
在想把DOM文书档案霜月素的别本增多到别的职位时这么些函数非常实用。

val(val)

设置每贰个相称成分的值。在 jQuery 1.2,
那也可感到select元件赋值。参数val(String)要设置的值。

check,select,radio等都能使用为之赋值。参数val(Array<String>)用于
check/select 的值。

queue([callback/queue])

queue:重回指向第二个相称成分的类别(将是一个函数数组。

queue(callback):在协作的因素的动画队列中添加一个函数。

queue(queue):将匹配成分的动画队列用新的一个队列来替代(函数数组)。

slideToggle([speed],[easing],[fn])

在体现和遮盖二种意况之间开始展览滑动切换。

replaceWith(content)

将兼具相称的成分替换到内定的HTML或DOM成分。参数content(String, Element,
jQuery):用于将匹配成分替换掉的剧情。

toggle([speed],[easing],[fn])

用来绑定三个或四个事件管理器函数,以响应被选成分的更替的 click 事件。
骨子里便是在展现和隐身三种情景之间实行切换。

attr(key,fn)

为全体匹配的因素设置一个划算的属性值。不提供值,而是提供三个函数,由这几个函数总计的值作为属性值。

6.1 内部插入

index(subject)

寻找与参数表示的靶子相称的成分,并再次来到相应成分的索引值。借使找到了协作的要素,从0伊始回来;若无找到相称的成分,再次回到-1。

scrollLeft([val])

得到相称成分相对滚动条左边的摇摆。此办法对可知和隐敝成分均有效。

fadeTo([[speed],opacity,[easing],[fn]])

把具备匹配成分的不反射率以渐进情势调动到内定的不发光度,并在动画完毕后可选地触发一个回调函数。opacity:多个0至1期间表示反射率的数字。
本条就是点名展现到多少折射率了!

8.1 页面载入

selector

回来您用什么选取器来找成分的。能够与context一同利用,用于标准检验选取器查询景况。

removeAttr(name)

合营的要素中去除叁个特性

1.4 队列调节

5.3 尺寸

map(callback)

将一组成分转变来其余数组(不论是不是是成分数组)
能够用那一个函数来建构四个列表,不论是值、属性依旧CSS样式,或许别的特别方式。

append(content|fn)

向各种相配的要素内部最后边追加内容。

3.3 其它

5.1 CSS样式

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章