zoukankan      html  css  js  c++  java
  • jquery基础

    【文档处理方法】

    (0.).wrap():为每一个选中的节点,都套一个父节点
    $("#div1").wrap("<p>哈哈哈哈</p>");
    (1.).unwrap():删除选中节点的父节点
    (2.).wrapInner():将选中节点中的所有子元素,包裹在一个新的父节点中,新的父节点依然是当前元素的唯一子节点
    (3.).replaceWith():将选中的节点替换为新的节点 用后者替换前者
    (4.).replaceAll(): 把前者替换为后者
    (5.).empty():清空当前节点中的内容,但会保留当前节点标签
    (6.).remove():删除当前节点,以及当前节点的子节点,删除后返回被删除的节点
    (7.).detach():删除当前节点,以及当前节点的子节点,删除后返回被删除的节点
    [remove和detach区别]
    使用remove删除的节点,如果恢复以后,将不再保留节点所绑定的事件;
    detach相反
    [JS中cloneNode()与JQ中clone()区别]
    (1.)cloneNode 如果不传参数或者参数传入false,表示只克隆当前节点,不克隆子节点;参数传入true,表示克隆当前节点以及所有子节点;
    (2.)clone() 无论传入true还是false都会克隆当前节点以及所有子节点;传入true表示克隆节点的同时将包括节点所绑定的事件,
    否则,只表示克隆节点,不克隆事件

    【属性方法】
    (1.)$("#div").attr("class","cls"):设置/添加节点属性,如果html标签中有属性值,新添加的会替换已有的属性值
    console.log($("#div").attr("id"):取到节点属性
    同时设置多对属性,括号内添加对象:
    $("img").attr({
    src: "test.jpg",
    alt: "Test Image"
    });
    (2.).prop()和.attr()一样,都可以对节点属性进行读取和设置。
    [两者的不同]
    在读取 属性名="属性值"的属性时,attr将返回属性值和undefind;而prop将返回true和false.
    也就是说,attr要取到的属性,必须是在标签上已经写明的属性,否则无法取到。
    (3.).addClass():在原有class的基础上新增class名字
    (4.).removeClass():删除指定的class名称,其余未删除的class名,依然保留。
    $("#div1")..removeClass("cls");
    (5.).toggleClass():切换class,如果有指定class就删除,如果没有就新增。
    (6.).html():取到或设置节点中html代码 设置html在括号()里面设置
    (7.).text():取到或设置节点中文本
    (8.).val():取到或设置表单元素<input></input>的value值
    $("input").val("哈哈哈");
    【css方法】
    (1.).css():给节点添加css样式,属于行级样式表权限
    同时给一个节点添加多对css样式,括号中传入匿名对象:

    通过回调函数返回值,修改css样式。


    (2.).height() / .width():取到或者设置节点的宽高:
    (3.).innerHeight()/.innerWidth():取到节点的宽度+padding,不包含border和margin
    (4.).outerHeight()/.outerWidth():不传参数,表示宽高+padding+border;传入参数true,表示表示宽高+padding+border+margin
    (6.).offset():返回一个节点,相对于浏览器左上角的偏移量,返回一个对象{top:20,left:20}
    此方法测量时,会将margin算作偏移量的距离
    (7.).position():返回一个节点,相对于父容器的偏移量。
    注意:使用此方法,要求父元素必须是定位元素,如果父元素不是定位元素,则依然是相对于浏览器左上角进行测量;
    此方法,测量偏移时,将不考虑margin,而会将margin视为当前容器的一部分。
    (8.).scrollTop():设置或取到指定节点的滚动条的位置。


    【jQuery 对象访问】
    (1.).each():用于遍历jquery中的对象数组。
    在回调函数中,使用return true相当于continue;return false相当于break。

    (2.).size() / .length:返回所查询出元素数组的个数
    (3.).get():将jQuery对象转为JS对象,传入index表示取出第几个,并转为JS对象,不传index,表示将jQuery对象数组中所有元素,都转为JS对象。
    【数组和对象操作】
    (1.)$.each(arr/obj,function(){}):对传入的数组或对象进行遍历,可以是jQuery对象数组,也可以是JS中的数组和对象
    (2.)$.map():

    (3.)$.inArray()检测一个值是否在数组中,返回下标;没有找到返回-1;第三个参数表示查找的起始下标。
    (4.).toArray():将选中的jQuery Dom集合,恢复成数组,数组的每一个是JS对象。
    (5.)$.merge( [0,1,2], [2,3,4] ):合并两个数组
    (6.)$.parseJSON(str):将一个JSON字符串转成JSON对象。

    (7.)$.contains(c,c):检测一个节点,是否包含另一个节点:接收两个JS对象,第一个是父对象,第二个是子对象。
    (8.)$.type(obj): 检测obj的数据类型。
    [各种检测函数]

    【筛选】
    (1.)hasClass(class) :检测一个节点是否包含指定class。


    1.事件绑定的快捷方式:
    $("button:eq(0)").dblclick(function(){
    alert("hahaah")
    });
    缺点:绑定的事件无法取消。

    2.使用on进行事件绑定。
    2.1使用on进行单事件绑定。
    $("button:eq(0)").on("click",function(){
    alert("haha");
    });

    2.2使用on进行多事件绑定。
    $("button:eq(0)").on("click dblclick mouseover",function(){
    console.log("123");
    });

    2.3使用on同时给多个事件分别绑定不同的函数。
    $("button:eq(0)").on({
    "click":function(){
    console.log("click");
    },
    "mouseover":function(){
    console.log("mouseover");
    }
    });

    2.4 使用on给回调函数传参,要求是对象格式,传递的参数可以在e.data中取到。
    $("button:eq(0)").on("click",{"name":"zhangsan"},function(e){
    console.log(e);
    console.log(e.data);
    console.log(e.data.name);
    });

    3.事件委派

    1.事件委派:将原来绑定在DOM节点上的事件,改为绑定在其父节点甚至根结点上,然后委派给当前节点执行。
    2.事件委派的作用:
    (1)将事件直接绑定在根结点上,可以减少事件绑定次数,更加节省资源。
    (2)使用事件委派绑定的事件当页面新增同类型标签时,新的标签也可以获得绑定的已有事件。

    4.事件解绑
    $("button:eq(0)").off("click");//清除所有的click事件
    $("button:eq(0)").off("click",func);//只清除绑定了func函数的click事件
    $("button:eq(0)").off("click dblclick");//清除多个事件
    $("button:eq(0)").off("click","p");//清除事件委派
    $("p").off();//清除绑定的所有事件

    5.one():使用one绑定的事件只能执行一次
    $("button:eq(0)").one("click",function(){});//使用one绑定是事件只能执行一次


    6.trigger():自动触发某个节点绑定的事件
    接收三个参数:
    1.需要触发的事件类型。
    2.数组格式:表示传递给事件回调函数的参数。
    注意:①事件回调函数的第一个参数必须是事件对象,因此我们传递的第二个开始接收。
    ②传递的参数可以使用arguments进行读取。


    7.triggerHandler():用法与tirgger()相同
    triggerHandler()与trigger()的区别
    (1)triggerHandler() 不能触发HTML事件,例如表单的submit事件.而trigger()可以触发所有事件。
    (2)triggerHandler() 只能触发所匹配元素中的第一个元素的事件;trigger(),将触发所有匹配元素的事件。
    (3)triggerHandler() 的返回值是事件回调函数的返回值,如果事件回调函数没有返回值,则返回undefined;trigger的返回值永远是调用事件的DOM对象,符合JQ的链式语法。

    8.hover() 接受两个函数: 分别表示mouseover()和mouseout()两个事件。如果只写一个函数,表示mouseover()。
    $("p:eq(0)").hover(function(){
    $(this).css("background-color","red");
    },function(){
    $(this).css("background-color","blue");
    });

    9.toggle():
    ①如果不传入参数,表示当前元素如果为显示状态,则隐藏,如果为隐藏状态,则显示。
    ②传入一个动画执行效果: "ease" ,"slow","fast"。
    ③传入一个函数,表示动画执行完成后显示的回调函数。
    ④接受一个boolean类型的参数,true为显示,fasle表示隐藏
    $("button:eq(0)").on("click",function(){
    $("p:eq(0)").toggle();
    $("p:eq(0)").toggle("ease");
    $("p:eq(0)").toggle("ease",function(){alert(1)});
    $("p:eq(0)").toggle(true/false);
    });

    --------------------------------------------------------------------------------
    show()方法: 让隐藏元素显示。同时修改宽度,高度,透明度(width/height/opacity)
    ①不传参。直接显示,而不进行动画。
    ②参数传入时间毫秒,或者表示速度的字符串“slow”,"normal","fast"则将在制定时间内完成动画。
    ③参数也可以传入回调函数,表示动画完成后执行的回调函数。

    hide():让显示的元素隐藏,效果与show()相反,其他一样。


    slideXX():
    slideDown():让隐藏的元素显示,修改height属性。
    slideUp():让显示的元素隐藏,修改height属性。
    slideToggle(():让显示的元素隐藏,让隐藏是元素显示

    fadeXX():
    fadeOut():让显示的隐藏,修改透明度(opacity)
    fadeIn():让隐藏的显示,修改透明度(opacity)
    fadeToggle():让显示的元素隐藏,让隐藏是元素显示,改透明度(opacity)
    fadeTo():作用月fadeToogle()相同,多了第二个参数,表示动画完成后的最终透明度。

    animate()
    animate()动画:自定义动画,接受4个参数
    ①动画完成后最终状态的CSS键值对集合。注意:css的样式,要求使用驼峰命名法。
    ②动画完成的时间,可以是毫秒,可以是“slow”,"normal","fast"。
    ③动画完成的效果: 可选值"linear","swing"
    ④动画完成后的回调函数。


    stop():停止当前节点的所有动画,后续动画不再执行,动画回调不再调用
    finish():直接结束当前节点的所有动画,动画直接进入最后状态,直接调用动画回调。

    delay():延时动画,表示延时多少毫秒后再执行动画。

    1.事件绑定的快捷方式:
    $("button:eq(0)").dblclick(function(){
    alert("hahaah")
    });
    缺点:绑定的事件无法取消。

    2.使用on进行事件绑定。
    2.1使用on进行单事件绑定。
    $("button:eq(0)").on("click",function(){
    alert("haha");
    });

    2.2使用on进行多事件绑定。
    $("button:eq(0)").on("click dblclick mouseover",function(){
    console.log("123");
    });

    2.3使用on同时给多个事件分别绑定不同的函数。
    $("button:eq(0)").on({
    "click":function(){
    console.log("click");
    },
    "mouseover":function(){
    console.log("mouseover");
    }
    });

    2.4 使用on给回调函数传参,要求是对象格式,传递的参数可以在e.data中取到。
    $("button:eq(0)").on("click",{"name":"zhangsan"},function(e){
    console.log(e);
    console.log(e.data);
    console.log(e.data.name);
    });

    3.事件委派

    1.事件委派:将原来绑定在DOM节点上的事件,改为绑定在其父节点甚至根结点上,然后委派给当前节点执行。
    2.事件委派的作用:
    (1)将事件直接绑定在根结点上,可以减少事件绑定次数,更加节省资源。
    (2)使用事件委派绑定的事件当页面新增同类型标签时,新的标签也可以获得绑定的已有事件。

    4.事件解绑
    $("button:eq(0)").off("click");//清除所有的click事件
    $("button:eq(0)").off("click",func);//只清除绑定了func函数的click事件
    $("button:eq(0)").off("click dblclick");//清除多个事件
    $("button:eq(0)").off("click","p");//清除事件委派
    $("p").off();//清除绑定的所有事件

    5.one():使用one绑定是事件只能执行一次
    $("button:eq(0)").one("click",function(){});//使用one绑定是事件只能执行一次


    6.trigger():自动触发某个节点绑定的事件
    接收三个参数:
    1.需要触发的事件类型。
    2.数组格式:表示传递给事件回调函数的参数。
    注意:①事件回调函数的第一个参数必须是事件对象,因此我们传递的第二个开始接收。
    ②传递的参数可以使用arguments进行读取。

    7.triggerHandler():用法与tirgger()相同
    triggerHandler()与trigger()的区别
    (1)triggerHandler() 不能触发HTML事件,例如表单的submit事件.而trigger()可以触发所有事件。
    (2)triggerHandler() 只能触发所匹配元素中的第一个元素的事件;trigger(),将触发所有匹配元素的事件。
    (3)triggerHandler() 的返回值是事件回调函数的返回值,如果事件回调函数没有返回值,则返回undefined;trigger的返回值永远是调用事件的DOM对象,符合JQ的链式语法。

    8.hover() 接受两个函数: 分别表示mouseover()和mouseout()两个事件。如果只写一个函数,表示mouseover()。
    $("p:eq(0)").hover(function(){
    $(this).css("background-color","red");
    },function(){
    $(this).css("background-color","blue");
    });

    9.toggle():
    ①如果不传入参数,表示当前元素如果为显示状态,则隐藏,如果为隐藏状态,则显示。
    ②传入一个动画执行效果: "ease" ,"slow","fast"。
    ③传入一个函数,表示动画执行完成后显示的回调函数。
    ④接受一个boolean类型的参数,true为显示,fasle表示隐藏
    $("button:eq(0)").on("click",function(){
    $("p:eq(0)").toggle();
    $("p:eq(0)").toggle("ease");
    $("p:eq(0)").toggle("ease",function(){alert(1)});
    $("p:eq(0)").toggle(true/false);
    });

    --------------------------------------------------------------------------------
    show()方法: 让隐藏元素显示。同时修改宽度,高度,透明度(width/height/opacity)
    ①不传参。直接显示,而不进行动画。
    ②参数传入时间毫秒,或者表示速度的字符串“slow”,"normal","fast"则将在制定时间内完成动画。
    ③参数也可以传入回调函数,表示动画完成后执行的回调函数。

    hide():让显示的元素隐藏,效果与show()相反,其他一样。


    slideXX():
    slideDown():让隐藏的元素显示,修改height属性。
    slideUp():让显示的元素隐藏,修改height属性。
    slideToggle(():让显示的元素隐藏,让隐藏是元素显示

    fadeXX():
    fadeOut():让显示的隐藏,修改透明度(opacity)
    fadeIn():让隐藏多少显示,修改透明度(opacity)
    fadeToggle():让显示的元素隐藏,让隐藏是元素显示,改透明度(opacity)
    fadeTo():作用月fadeToogle()相同,多了第二个参数,表示动画完成后的最终透明度。

    animate()
    animate()动画:自定义动画,接受4个参数
    ①动画完成后最终状态的CSS键值对集合。注意:css的样式,要求使用驼峰命名法。
    ②动画完成的时间,可以是毫秒,可以是“slow”,"normal","fast"。
    ③动画完成的效果: 可选值"linear","swing"
    ④动画完成后的回调函数。


    stop():停止当前节点的所有动画,后续动画不再执行,动画回调不再调用
    finish():直接结束当前节点的所有动画,动画直接进入最后状态,直接调用动画回调。

    delay():延时动画,表示延时多少毫秒后再执行动画。

  • 相关阅读:
    jQuery 回到顶部
    c# 获取客户端ip
    JS 新浪API获取IP归属地
    c#抓取网站数据
    ECLIPSE最常用快捷键排名
    BinarySearchTree示例——C++模板实现
    SICP 找零钱问题背后的思考
    关于解引用*和箭头操作符->的重载
    traits技法小计
    最大和子序列问题
  • 原文地址:https://www.cnblogs.com/cuteboy/p/9000860.html
Copyright © 2011-2022 走看看