zoukankan      html  css  js  c++  java
  • JQuery 相关用法和操作

    01-JQuery 基础语法:

    1、使用JQuery必须先导入JQuery.x.x.xjs文件。

     

    2、JQuery中的选择器:

    $(选择器).函数()

    ① $是JQuery的缩写,既可以使用JQuery("选择器").函数();

    ② 选择器,可以是任何的css支持的选择符;

    3、文档就绪函数:防止在文档未完全加载完成之前,运行JQuery代码;

    $(document).ready(function(){

    // JQuery代码

    });

     

    简写形式:$(function(){ });

     

    [文档就绪函数 和 window.onload区别]

    ① window.onload必须等到网页中的所有内容加载完成后,才会执行代码(包括图片、视频等资源)

    文档就绪函数,只需要在网页DOM结构加载完毕后,就可以执行代码;

    ② window.onload只能写一个,写多个只会执行最后一个;

    文档就绪函数,可以写多个,并且不会被覆盖。

    4、原生js对象与JQuery对象:

    ① 使用("")选中的是JQuery对象,只能调用JQuery的函数,er不能使用元素js的事件与函数;

    $("#p").click(); √

    $("#p").onclick=function(){} ×

    解释:$("#p")是JQuery对象, onclick是原生js事件

     

    同理,使用document.getElement系列获取的是原生js对象,也不能使用JQuery相关对象。

     

    ② 原生js对象转为JQuery对象

    可以使用$()包裹原生js对象,即可转为JQuery对象。

    var p = document.getElementsByTagName("p");

    $(p).click(); √ 原生js对象p已转为JQuery对象

    ③ JQuery对象转为原生js对象 。使用 .get(index) 或 [index]

    $("#p").get(0).onclick=function(){} √

    $("#p").(0).onclick=function(){} √

    5、JQuery 解决多库冲突

    由于其他的js库,也可以使用$作为自身标识,导致其他js库与JQuery冲突。

    要解决冲突,可以放弃使用$,直接使用JQuery对象。

    [使用自执行函数传入JQuery对象简化写法]

    jQuery.noConflict();//调用这个函数,将$控制让给其他类库,即JQuery不能在使用$

     

    !function(j){

    //函数之中,就可以用字母j,代替JQuery对象1

    }(JQuery);

    02-JQueryDOM操作及其他函数

     

    // 使用$()直接创建一个标签节点

     

    // 将创建好的节点,插入到指定位置。

    // 在#div1内部的最后,直接插入一个节点。

    $("#div1").append("<p>这是被插入的p标签</p>");

     

    // 把新节点插入到#div1中

    $("<p>这是被插入的p标签</p>").appendTo("#div1");

     

    // 在#div1内部的开头,直接插入一个节点。

    $("#div1").prepend("<p>这是被插入的p标签</p>");

     

    $("#div1").after("<p>这是被插入的p标签</p>");

    $("<p>这是被插入的p标签</p>").insertBefore("#div1");

     

    // 把每个p标签外面,都包裹一层div

    $("p").wrap("<div></div>");

     

    // 把所有的p标签,包裹在同一个div中

    $("p").wrapAll("<div></div>");

     

    // 把#div1里面的所有子元素,用<div>包裹起来

    $("#div1").wrapInner("<div></div>");

     

    // 删除元素的父标签

    $("#p").unwrap();

     

    // 将所有匹配的p标签,全部换为span标签

    $("p").replaceWith("<span>111</span>");

     

    // 用span元素,替换掉所有p标签

    $("<span>111</span>").replaceAll("p");

     

    // 删除#div1中的所有子元素。 但是#div1依然保留空标签

    $("#div1").empty();

     

    // 直接从DOM中,删除#div1以及所有子元素

    $("#div1").remove();

     

    // 直接从DOM中,删除#div1以及所有子元素

    $("#div1").detach();

     

     【remove和detach异同】

    1、相同点:

    ① 都会把当前标签,以及当前标签的所有子节点,全部删除;

    ② 都可以在删除时,把当前节点返回。并可以使用变量接受返回的节点,以便后期恢复;

     

    2、 不同点:

    使用接受的节点,恢复原节点时。

    remove只能恢复节点的内容,但是事件绑定,不能再恢复;

    detach不但恢复节点的内容,还能再恢复 事件的绑定;

     

     

    案例 ↓

    $("#div1").click(function(){

      alert(1);

    })

    var div1 = null;

    $("button:eq(0)").click(function(){

      div1 = $("#div1").remove();

    })

    $("button:eq(1)").click(function(){

      div1 = $("#div1").detach();

    })

    $("button:eq(2)").click(function(){

    $("button:eq(2)").after(div1);

    });

     

     [JS中 .cloneNode() 和 JQ中 .clone() 区别]

    两者都接受传入true/false的参数。

    .cloneNode() 不传参数或传入参数false,表示只克隆当前节点,而不克隆子节点。 传入true表示可隆全部子节点。

    .clone() 无论传入哪个参数,都会克隆所有子节点。但是,不传参数或者传入false,表示只克隆节点,不克隆节点绑定的事件。 传入true表示同时克隆及诶单绑定的事件。

     

     

     

    /*CSS和属性相关操作*/                                                                         

     

    使用attr()设置或者取到元素的某个属性。

    $("#div1").attr("class","cls1");

     

    $("#div1").attr({    使用attr一次性设置多个属性

      "class" : "cls1",

      "name" : "name1",

      "style" : "color:red;"

    });

    console.log($(".p").attr("id"));

     

     删除元素属性

    $("#div1").removeAttr("class");

     

     

     prop与Attr区别。

    对于checked/disabled等属性名等于属性值的属性,使用prop返回的将是true或false, 使用attr返回的将是属性名或者undefined

    所以,对于属性名等于属性值,或者属性是true/false的特殊属性,通常使用prop选取。 其他的属性,通常使用attr选取。

     

    console.log($("button:eq(2)").attr("disabled"));

    console.log($("button:eq(2)").prop("disabled"));

     

    ●给元素添加class属性,与attr添加class的不同是,使用addClass添加的新类名,将会保留原来已有的class名。

    $("p").addClass("selected1 selected2");

     

    ●删除掉元素指定的class

    $("p").removeClass("selected1");

     

    ●元素有指定class名,则删除; 元素没有指定class名,则新增。

    $("p").toggleClass("selected1");

     

    ●取到或设置元素里面的html,相当于innerHTML

    console.log($("#div1").html());

    $("#div1").html("<h1>我是新的h1</h1>");

     

    ●取到或设置元素里面的文字内容,相当于innerText

    console.log($("#div1").text());

    $("#div1").text("<h1>我是新的h1</h1>");

     

    ●获取或设置 元素的Value值

    console.log($("input[type='text']").val());

    $("input[type='text']").val("姜浩特别帅!");

     

     ●给元素设置CSS样式属性 属于style行级样式表权限

    $("#div1").css({

       "color":"red",

       "user-select":"none",

       "text-stroke":"0.5px blue"

     });

    var id = setInterval(function(){

    $("#div1").css({

      "width":function(index,value){

      if(parseFloat(value)+10 >= 600){

      clearInterval(id);

    }

    return parseFloat(value)+10+"px";

    }

    });

    },500);

     

    ●获取和设置元素的width和height属性

    console.log($("#div1").height());

    console.log($("#div1").width());

    $("#div1").width("400px");

     

    ●获取元素的内部宽度。 包括宽高和padding

    console.log($("#div1").innerHeight());

    console.log($("#div1").innerWidth());

     

    ● 获取元素的外部宽高。 包括宽高+padding+border

    传入参数为true时,还要包括margin

    console.log($("#div1").outerHeight(true));

    console.log($("#div1").outerWidth());

     

    offset():

    获取元素,相对于浏览器窗口左上角的偏移位置。

    这个位置,包括margin/position等。

    返回的是一个对象,包含两个属性,分别是left和top

     

    position():

    获取定位元素,相对于父元素的偏移位置(父元素必须是定位元素)。

    这个位置,只包括top/left等定位属性。 而margin将被视为当前元素的一部分,并不会视为偏移量范畴。

    如果父元素有定位属性。则相对于父元素padding左上角定位;

    如果父元素没有定位属性,则与offerSet一样 ,相对于浏览器左上角定位(但是,只是两者的定位原点都在浏览器左上角。 在计算偏移量时,offerSet会计算margin和top. 而position只计算top)。

    [绑定事件的方式]

    1、事件绑定的快捷方式

    缺点:绑定的事件无法取消

    $("button").eq(0).click(function(){

    alert("2");

    });

     

    2、使用on()绑定事件

    ①使用on()单事件绑定

    $("button:eq(0)").on("click",function(){

      alert("1");

    });

    ②使用on,一次性给同一节点,添加多个事件执行一个函数,多个事件之间空格分隔

    $("button:eq(0)").on("click monseover dblclick",function(){

      console.log("触发了事件");

    });

    ③使用on,一次性给同一节点添加多个事件,分别执行不同函数

    $("button:eq(0)").on({

      "click":function(){

      console.log("执行click");

    },

    "monseover":function(){

      console.log("执行monseover");

    }

    });

    ④调用函数时,同时给函数

    $("button:eq(0)").on("click",{name:"jredu",age:14},function(evn){

      console.log(evn);

      console.log(evn.data.name);

      console.log(evn.data.age);

    });

    ⑤使用on,进行事件委派:

    >>>将原本需要绑定在本元素上的事件,改为绑定到祖先节点乃至根节点上,然后委派给当前节点生效

    eg:$("p").on("click",function(){});

    事件委派

    $("document").on("click","p",function(){});

     

    >>>作用:

    不使用事件委派的绑定方式,只能绑定到页面初始化时的标签上,当页面新增同类型标签,这些新增的标签,不能够绑定事件

    但如果使用事件委派,当页面新增同类型标签时,这些新增的标签也能够绑定已有的事件

    $("button:eq(0)").on("click",function(){

      $(this).after("<p>新增的p标签<p/>");

    });

    $("p").on("click",function(){

      alert("没有事件委派");

    });

    $(document).on("click","p",function(){

      alert("这是事件委派");

    });

     

    3、off()取消on事件绑定

    $("p").off("click"):取消单个事件绑定;

    $("p").off("click mouseover dbliclick"):取消多个事件绑定

    $(document).off("click","p");:取消委派事件绑定

    $("p").off();取消所有事件绑定

     

    使用.one()绑定事件只能执行一次

    $("button").one("click",function(){

      alert("生效一次");

    });

     

    .trigger()自动触发某元素的事件

    第一个参数:是需要触发的事件类型

    第二个参数:可选数组格式,表示传递给对应事件函数的参数

    >>>传递进来的参数,可以在事件函数中,定义形参获取(形参第一个必须是event事件,从第二个开始为传递的参数。)

    >>>也可以直接在函数中,使用arguments对象数组,读取参数

     

    .triggerHandler():功能同上,区别如下:

    ①triggerHandler不能够触发浏览器默认的HTML事件,如submit等...

    而trigger可以触发任何事件

    ②trigger可以触发页面中所有匹配元素的事件

    而triggerHandler只能触发第一个匹配元素的事件

    ③trigger的返回值,返回的是调用当前函数的对象,符合JQuery的可链式语法

    而triggerHandler返回的是事件函数的返回值,如果事件函数没有返回值,则范围是undefined。

    $("p").on("click",function(evn,n1,n2){

      for(var i=1;i<arguments.length;i++){

      console.log(arguments[i]);

      }

      alert("这是p标签的click事件");

    });

    $("p").trigger("click",["lll",1,2,3,4]);

     

    [JQuery中的动画]

     

    .show() 让隐藏的元素显示

    效果为:同时修改元素的宽度、高度、opacity属性

    ①不传参数:直接显示,不进行动画

    ②参数时间毫秒数,表示多少毫秒内完成函数

    ③传入(时间,函数)表示动画完成后,执行回调函数

     

    .hide() 让显示元素隐藏,与.show()相反

     

    .slideDown() 让隐藏的元素显示,效果为从上到下,增加高度

    .slidUp() 让显示的元素隐藏,效果为从下到上,减少高度

    .slidToggle() 让显示的元素隐藏,让隐藏的元素显示

     

    .fadeOut() 让显示的元素淡出隐藏,该透明度

    .fadeIn() 让隐藏的元素淡入显示

    .fadeToggle() 让显示的元素淡出隐藏,让隐藏的元素淡入显示

    .fadeTo(时间,最终透明度,函数) 同fadeToggle,接受第二个参数,表示最终达到的透明度

     

    .animate({最终的样式属性,键值对对象},动画事件,动画效果("linear"或"swing"),动画执行完后的回调函数)

    自定义动画函数注意事项:

    ①参数一的对象中,键必须使用驼峰命名法。(fontSize : "18px")

    ②只有数值类型的属性能够使用动画,非数值类型属性不能应用动画。

  • 相关阅读:
    JS站点
    1011 World Cup Betting (20分)
    1007 Maximum Subsequence Sum (25分)(动态规划DP)
    1006 Sign In and Sign Out (25分)
    1005 Spell It Right (20分)
    1004 Counting Leaves (30分)(DFS)
    1003 Emergency (25分)(Dijkstra算法)
    1002 A+B for Polynomials (25分)
    1001 A+B Format (20分)
    canvas
  • 原文地址:https://www.cnblogs.com/suitongyu/p/7501822.html
Copyright © 2011-2022 走看看