zoukankan      html  css  js  c++  java
  • jQuery-3~4章

    jQuery-3~5

     

    JQuery003-JQuery中的DOM操作

    jQuery中的DOM操作:

    1、查找节点

    A.查找元素节点

    B. 查找属性节点

    var s1 = $("ul li:eq(1)");

    var li_txt = s1.txt();

    alert(li_txt);

    var $para = $("p");

    var p_txt = $para.attr("title");

    alert(p_txt);

    2、创建节点

    为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点。
          var box = $('<div id="box">节点</div>'); //创建一个节点
          $('body').append(box); //将节点插入到<body>元素内部

    创建元素节点

    创建文本节点

    var s1 = $("<li></li>"); // 创建第一个li元素

    var s2 = $("<li></li>"); // 创建第二个li元素

     

    3、插入节点

     在创建节点的过程中,其实我们已经演示怎么通过.append()方法来插入一个节点。但除了这个方法之余呢,jQuery 提供了其他几个方法来插入节点。

     
     

    4、删除节点

    remove()方法

    detach()

    empty()方法

    从DOM节点中删除所有匹配的元素,传入的参数作用于根据jQuery表达式来筛选元素。

     $('div').remove(); //直接删除 div 元素
    注意:.remove()不带参数时,删除前面对象选择器指定的元素。而.remove()本事也可以
    带选择符参数的,比如:$('div').remove('#box');只删除 id=box 的 div。

    和remove()方法一样是从DOM中去掉所有匹配的元素。这个方法不会吧匹配的元素从jQuery对象中删除,因而可以在将在再使用这些匹配的元素。所有绑定的事件,附加的数据等都会保留下来。

    清空节点而不是删除节点。

    5、复制节点

    可以使用clone()方法来实现。

    6、替换节点

    replaceWith()

    replaceAll()

    将所有匹配的元素都替换成HTML或者DOM元素

    颠倒了replaceWith()操作,其作用和功能和replaceWith()是一样的。

    7、包裹节点

    wrap()方法:该方法对于要在文档中插入额外的结构化标记非常有用,而且不会破坏原始文档的语义。

    jQuery 提供了一系列方法用于包裹节点, 那包裹节点是什么意思呢?其实就是使用字符串代码将指定元素的代码包含着的意思

     
     

    8、属性操作

    用attr()方法来获取和设置元素属性

    用removeAttr()来删除元素属性

    如果要获取<p>元素的属性title,只需给attr()方法传递一个参数—属性名称

    如下代码

    $("p").removeAttr("title"); //删除<p>元素的属性title

    9、样式操作

    获取class和设置class都可以使用attr()方法来完成

    var p_class = $("p").attr("class");

    追加样式:addClass()方法

    10、            设置和获取HTMl、文本和值

    html()方法

    text()方法

    val()方法

    该方法类似于JS中的innerHTML属性

    该方法类似于JS中的innerText属性,可以用来读取或者设置某个元素中的文本内容

    该方法类似于JS中的value属性,可以用来设置和获取元素的值

    11、            遍历节点

    children()

    用于取得匹配元素的子元素集合

    next()

    用于取得匹配元素后面邻近的同辈元素

    prev()

    取得匹配元素前面紧邻的同辈元素

    sibling()

    取得匹配元素前后所有的同辈元素

    closest()

    取得最近的匹配元素

    parent() ,parents() , closest()三个方法的区别

     

    12、            CSS-DOM操作

    几种经常使用的方法

    offset()

    获取元素在当前视窗的相对便宜。返回对象包含两个属性:top和left。只对当前元素有效

    position()

    获取元素相对于最近一个position样式属性设置为realitive或者absolute的祖父节点的相对便宜,和offset()一样,返回对象包含两个属性top和left

    scrollTop()

    获取元素滚动条距离顶端的距离

    scrollLeft()

    获取元素滚动条距离左侧的距离

    JQ004-jQuery中的事件和动画

    一、           jQuery中的事件

    1、加载DOM

    JS的onload事件只能保存对一个函数的引用,后面的会自动覆盖前面的函数。而jQuery的ready()方法可以很好的处理这个问题。调用$(document).ready()方法都在现有的行为上追加新的行为,这些行为函数会根据注册的顺序依次执行。如下代码:

     

     

    简写:如下

    一般写法

    简单写法

       

    2、事件绑定

    使用band()方法来进行对匹配元素进行特定事件的绑定。调用格式如下

    bind( type [, data ] , fn );

    bind()方法有三个参数:

    事件类型:如:blur , focus , load , resize , scroll , unload , click , dbclick , mousedown , mouseup , mousemove , mouseover , mouseenter , mouseleave , change , select , submit , keydown , keypress , keyup , error等

    可选参数,作为event.data属性值传递给事件对象的额外数据对象

    用来绑定的处理函数

    怎么用css样式把相应的内容隐藏起来??

    使用:display:none;

     

    简写事件绑定:

     

    3、合成事件

    jQuery有两个合成的事件。类似于之前的ready()事件。hover()  toggle()方法都书序jQuery自定义的方法:

    hover()

    toggle()

    用于模拟光标悬停事件,光标悬停在特定元素上时,触发事件

    语法结构:toggle(fn1 , fn2 , fn3 , ……fnN);

    该方法用于模拟鼠标连续单击事件,第一次单击元素触发指定的第一个函数,以此类推。

    4、事件冒泡

    从里往外执行。

    事件冒泡会带来问题,要如何停止事件冒泡:

     

    事件捕获:从外往里执行

    5、事件对象的属性

    jQuery在遵循w3c规范的情况下,对事件对象的常用属性进行了封装,使得事件在各大浏览器中都可以正常运行,而不需要进行浏览器类型判断。

    event.type

    event.preventDefault()方法

    event.stopProgation()方法

    event.target

    获取到事件类型

    阻止默认的事件行为

    阻止事件的冒泡

    获取到触发事件的元素

    event.relatedTarget

    event.pageX和event.pageY方法

    event.which

    event.metaKey

    用来访问mouseover和mouseout的相关元素

    获取光标对于页面的x坐标和y坐标(如果页面中有滚动条,要加上滚动条的宽度和高度)

    获取到鼠标单击事件中获取到鼠标的左中右事件,在键盘事件中的键盘按键

    为键盘事件中获取<ctrl>键

    6、移除事件

    unbind()方法。

    参数类型如下:

    没有参数:移除所有事件

    有参数:移除该类型事件

    把绑定时传递的处理函数作为第2个参数,则这个特定参数被删除

    7、模拟操作

    trigger():完成模拟触发操作。

    $(‘#btn’).trigger(“click”);      模拟点击事件

    $(‘#btn’). click();  简写

    自定义触发事件:

    $('#btn').bind("myClick" , function(){

                  $('#test').qppend("<p> myClick <p>");

                  });

    $(‘#btn’).trigger(“myClick”)

    如果只想触发绑定的focus事件不想触发浏览器默认事件,可以使用triggerHandler()方法。

    $(“input”).triggerHandler(“focus”);

    8、其他用法

    bind()方法不经能够为元素绑定浏览器支持的具有相同名称的事件,也可以绑定自定义事件。此外bind()方法还能做很多事情。

    1、绑定多个事件类型 (可以一次性绑定多个事件类型)

    $(function(){

           $("div").bind("mouseover mouseout", function(){

                  $(this).toggleClass("over");

           });

    });

    当光标移动到div时,该元素的class切换为over

     

    2、添加事件命名空间,便于管理(为元素绑定的多个事件类型用命名空间规范起来)

    $(function(){

           $("div").bind("click.plugin", function(){

                  $("body").append("<p> click 事件 <p>");

           });

           $("div").bind("mouseover.plugin", function(){

                  $("body").append("<p> mouseover 事件 <p>");

           });

           $("div").bind("dbclick ", function(){

                  $("body").append("<p> dbclick 事件 <p>");

           });

           $("button")click(function(){

                  $("div")unbind(".plugin");

           });

    });

    3、相同事件名称,不同命名空间执行方法

    $(function(){

           $("div").bind("click", function(){

                  $("body").append("<p> click 事件 <p>");

           });

           $("div").bind("click.plugin", function(){

                  $("body").append("<p> click. plugin 事件 <p>");

           });

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

                  $("div")trigger("click!");

           });

    });

     

    注意最后一个click后面的感叹号!。它的作用是:匹配所有不包含在命名空间中的click方法。

     

    二、           jQuery中的动画

    1、show() 和 hide() 方法

    show() 和hide() 方法

    相当于css的display:none或者inner、block、innerblock

    让show() 和hide() 方法动起来

    修改元素的属性:高度宽度和不透明度

    可以为他们 一个速度参数:slow

    $("element").show("slow");

    关键字还有normal 和 fast(事件长度分别为:600毫秒、400毫秒、200毫秒)。可以直接填写时间数据,单位为毫秒:

    $("element").show(1000);

    2、fadeIn() 和 fadeOut() 方法

    这两个方法值改变元素的不透明度,淡入,淡出

    3、dlideUp() 和 dlideDown() 方法

    只改变元素的高度

    4、自定义动画方法animate()

    语法结构为: animate(params, speed, callback);

    参数说明如下:

    1、params:一个包含样式属性及值的映射

    2、speed 速度参数,可选

    3、callback 在动画完成时执行的函数,可选

    累加累减动画

    $(this).animate({left:"+=100px"}, 100)  //在当前位置累加100px

    多重动画

    $(this).animate({left:"+=100px"}, 100)

                         .animate({height:"+=200px"}, 100);

    综合动画

    $(function(){

           $("#panel").css("opacity","0.5");

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

                  $(this).animate({left:"+=100px", height:"+=200px", opacity:"1"}, 3000)

                         .animate({top:"+=200px", "+=100px"}, 3000)

                         .fadeOut(5000)

                         .fadeIn(5000)

           });

    });

    5、动画回调函数

    如果最后面只是想改css样式,而不是要让动画淡入或者淡出。但是css样式方法并不会加入到队列中,而是立即执行。可以对css样式使用函数回调方法。如下代码:

    $(function(){

           $("#panel").css("opacity","0.5");

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

                  $(this).animate({left:"+=100px", height:"+=200px", opacity:"1"}, 3000)

                         .animate({top:"+=200px", "+=100px"}, 3000, function(){

                                $(this).css("border", "5px solid blue");

                         })   

           });

    });

    6、停止动画和判断试够处于动画状态

    使用stop()方法。

    该方法有两个可选参数:clearQueue和gotoEnd。都为boolean值

    clearQueue

    表示是否要清空未完成的队列

    $("#panel").hover(function(){

           $(this).stop()

                  .animate({height: "150", "300"}, 2000);          

    },function(){

           $(this).stop()

                  .animate({height:"22", "60"},3000);

    });

    gotoEnd

    表示是否当即停止动画

    判断元素是否处于动画状态。

    if(!$(element).is(“:animated”)){

    //如果当前没有动画则添加新动画。

    }

    动画延迟操作:

    使用delay()方法

    7、其他动画方法

    四个用于交互的动画方法:

    toggle(speed, [callback])

    切换元素的可见状态,如果是可见的切换为隐藏的,如果是隐藏的切换成可见的。

    slideToogle(speed, [easing], [callback])

    通过高度变化来切换陪陪元素的可见性,通过高度变化来改变。(只调整元素的高度)

    fadeTo(speed, opacity, [callback])

    把元素的不透明度以渐进方式调整大指定的值。(只调整元素的不透明度)

           $(this).fadeTo(6000,0.2);  //参数:事件,透明度

    fadeToggle(speed,[easing], [callback])

    通过不透明度变化来切换匹配元素的可见性(只调整元素的不透明度)

    8、动画方法概括

    方法名

    说明

    hide()  show()

    同时修改多个样式属性:高度、宽度、不透明度

    fadeIn()  fadeOut()

    只改变不透明度

    sildeUp()  slideDown()

    只改变高度

    fadeTo()

    只改变不透明度

    toggle()

    用来代替hide()和show()方法,会同时修改多个属性

    slideToggle()

    用来代替sildeUp() 和 slideDown() 方法,所以只改变高度

    fadeToggle()

    用来代替fadeIn()和fadeOut()方法,所以只改变宽度

    animate()

    自定义动画方法(可以用来代替所有其他动画方法方法)

     

  • 相关阅读:
    萌新向Python数据分析及数据挖掘 第三章 机器学习常用算法 第三节 梯度下降法 (上)理解篇
    萌新向Python数据分析及数据挖掘 第三章 机器学习常用算法 第二节 线性回归算法 (下)实操篇
    萌新向Python数据分析及数据挖掘 第三章 机器学习常用算法 第二节 线性回归算法 (上)理解篇
    萌新向Python数据分析及数据挖掘 第三章 机器学习常用算法 第一节 KNN算法 (下)实操篇
    萌新向Python数据分析及数据挖掘 第三章 机器学习常用算法 第一节 KNN算法 (上)理解篇
    萌新向Python数据分析及数据挖掘 第二章 pandas 第五节 Getting Started with pandas
    Oracle数据库安装和授权
    c# 如何获取JSON文件以及如何获取Config文件(framework 和 net .Core)
    C#Core查询数据库存储EXCEL文件
    如何在WINDOW系统下编译P12证书制作
  • 原文地址:https://www.cnblogs.com/lal-fighting/p/5190398.html
Copyright © 2011-2022 走看看